Использование семантического пользовательского интерфейса с веб-пакетом в шаблоне Asp.Net Core Spa

Я пытаюсь использовать Semantic UI с Angular 2 поверх Asp.Net Core. Я начал с шаблона проекта aspnetcore-spa из JavaScript-сервисов официальных шаблонов Yeoman, в которых уже есть Asp.Net. MVC Core, Webpack, Angular 2 и Bootstrap настроены.

Затем я попытался выполнить шаги, описанные в этом GitHub, чтобы установить Semantic UI.

Шаги, которые я сделал:

  • Installed Semantic UI using NPM npm install semantic-ui --save
    • During the setup, I installed all the features and selected the install folder as wwwroot/lib/semantic/
  • Зашел в папку wwwroot/lib/semantic и запустил gulp build

Вот тут-то я и начал сильно сомневаться, в структуре шаблона нет vendor.ts, поэтому я не совсем понял, куда поместить импорт для Semantic css и js.

Единственное, что я смог найти, это webpack.config.vendor.js, содержащий некоторые записи для Bootstrap, поэтому я изменил свойство vendor и добавил импорт для семантических js и css.

Вот как я его модифицировал:

entry: {
    vendor: [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/platform-server',
        'angular2-universal',
        'angular2-universal-polyfills',
        'es6-shim',
        'es6-promise',
        'event-source-polyfill',
        'jquery',
        'zone.js',
        'wwwroot/lib/semantic/dist/semantic.min.js',
        'wwwroot/lib/semantic/dist/semantic.min.css',
        'ng-semantic'
    ]
}

Я удалил ссылки на начальную загрузку и добавил semantic.min.js, semantic.min.css и ng-semantic.

Наконец, я установил Ng-Semantic с помощью NPM и добавил import { NgSemanticModule } from 'ng-semantic' в app.module.ts.

Теперь, когда я пытаюсь запустить приложение, я получаю следующую ошибку:

System.Exception: сбой модуля Call to Node с ошибкой: сбой предварительного рендеринга из-за ошибки: ReferenceError: jQuery не определен

Я понимаю, что эта ошибка вызвана тем, что система пытается предварительно отобразить некоторый код, основанный на jQuery, что является большим нет-нет, и, вероятно, это semantic-ui.js. Но я совершенно не представляю, как это можно исправить.

Для справки и упрощения устранения неполадок я отправил текущий статус кода на GitHub, он доступен по адресу этот адрес.

Заранее спасибо!


webpack angular asp.net-core semantic-ui
person Gimly    schedule 17.05.2017    source источник
comment
Попробуйте удалить атрибут app-prerenderer-module stackoverflow.com/questions/40257514/   -  person yurzui    schedule 29.05.2017
comment
Что ж, конечно, удаление предварительного рендеринга определенно решит проблему, но мне нужно решение, в котором я мог бы сохранить предварительный рендеринг.   -  person Gimly    schedule 30.05.2017

Ответы (1)


arrow_upward
2
arrow_downward

Мне удалось заставить его работать правильно, отчасти благодаря этому другому вопросу SO: asp шаблон .net core spa, семантический пользовательский интерфейс

Я копирую здесь шаги, предложенные в вопросе, для простоты и добавляю несколько комментариев.

  • Во-первых, идея состоит в том, чтобы установить только CSS для Semantic UI, используя NPM:

    • npm install semantic-ui-css --save

  • Затем установите библиотеку ng2-semantic-ui. Это позволяет использовать все компоненты Semantic UI без зависимости от JQuery.

    • npm install ng2-semantic-ui --save

  • Откройте файл webpack.config.vendor.js, удалите bootstrap и bootstrap.css в списке записей/поставщиков и замените их на 'ng2-semantic-ui' и 'semantic-ui-css/semantic.css'

  • Восстановите vendor.js с помощью команды

    • webpack --config webpack.config.vendor.js if you have webpack installed globally
    • или node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod, если нет

  • Импортируйте SuiModule из ng2-semantic-ui в файл app.module.client.ts.

  • Наконец, на стороне .Net в Views/Home/Index.html замените asp-prerender-module на asp-ng2-prerender-module, а "Загрузка..." на следующее:

    <div class="ui active inverted dimmer"> <div class="ui text large loader">Loading</div> </div>

Затем вам придется переписать большую часть приложения, чтобы заменить загрузочные классы css семантическим пользовательским интерфейсом.

person Gimly    schedule 16.08.2017