在Asp.Net Core Spa模板上使用帶有webpack的語義UI

我想在Asp.Net Core上使用Angular 2的語義UI。我已經從JavaScript services官方Yeoman模板開始使用aspnetcore-spa項目模板，該模板已經配置了Asp.Net MVC Core，Webpack，Angular 2和Bootstrap。在Asp.Net Core Spa模板上使用帶有webpack的語義UI

然後，我試着按照this GitHub上描述的步驟安裝Semantic UI。我做

步驟：

安裝使用NPM npm install semantic-ui --save
- 在設置語義UI，我安裝了所有的功能和選擇的安裝文件夾wwwroot/lib/semantic/
去了wwwroot/lib/semantic文件夾並運行gulp build

這就是我開始真的不確定的地方，在模板結構中沒有，所以我不確定將語義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.css和ng-semantic。

最後，我使用NPM安裝了Ng-Semantic，並將import { NgSemanticModule } from 'ng-semantic'加入了app.module.ts。

現在，當我嘗試運行應用程序時，我收到以下錯誤：

System.Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: jQuery is not defined

我得到的這個錯誤是由系統試圖預渲染一些代碼依賴於jQuery的這是造成一個很大的禁忌，它可能是semantic-ui.js。但我完全不知道如何解決這個問題。

爲了便於參考和排除故障，我將代碼的當前狀態推送到GitHub上，它的地址爲this address。

在此先感謝！

來源

2017-05-17 Gimly

嘗試刪除'應用-prerenderer-module'屬性https://stackoverflow.com/questions/40257514/call-to-node-module-failed-with-errors-with-angular2-asp-net – yurzui

那麼，確保刪除預渲染將肯定解決問題，但我想要一個解決方案，我可以保持預渲染。 – Gimly

我設法使它在部分正常工作，這要歸功於這個其他SO問題：asp.net core spa template, Semantic UI

我複製在這裏的問題提出的措施，用於簡化和增加了一些意見。

首先，這個想法是使用NPM語義UI安裝只是CSS：
- npm install semantic-ui-css --save
然後，安裝ng2-semantic-ui庫。它允許使用所有語義UI組件，而不依賴於JQuery。
- npm install ng2-semantic-ui --save
打開webpack.config.vendor.js文件，刪除bootstrap和進入/供應商名單bootstrap.css和'ng2-semantic-ui'和'semantic-ui-css/semantic.css'
替換它們使用命令
- webpack --config webpack.config.vendor.js如果您在app.module.client.ts文件不
導入SuiModule從ng2-semantic-ui你的WebPack全球的裝機量
或node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod。
最後，在.NET方面，在Views/Home/Index.html，由asp-ng2-prerender-module並通過以下替換asp-prerender-module 「正在加載...」：

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

然後，你必須重寫很多應用程序用Semantic UI來代替引導CSS類。

來源

2017-08-16 14:56:50 Gimly

@Gimly我也正是你所描述的東西，但我得到了下面的錯誤，如果我運行：節點node_modules /的WebPack /斌/ webpack.js --env.prod

ERROR in ./$$_gendir/~/ng2-semantic-ui/dist/modules/select/components/select-option.ngfactory.ts 
Module parse failed: /Users/psychos/Documents/Sample/$$_gendir/node_modules/ng2-semantic-ui/dist/modules/select/components/select-option.ngfactory.ts Unexpected token (11:28) 
You may need an appropriate loader to handle this file type. 
| import * as i0 from '@angular/core'; 
| import * as i1 from 'ng2-semantic-ui/dist/modules/select/components/select-option'; 
| const styles_SuiSelectOption:any[] = ([] as any[]); 
| export const RenderType_SuiSelectOption:i0.RendererType2 = i0.ɵcrt({encapsulation:2, 
|  styles:styles_SuiSelectOption,data:{}}); 
@ ./$$_gendir/ClientApp/app/components/prowl/list.component.ngfactory.ts 8:0-131 
@ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 
@ ./ClientApp/boot.browser.ts

來源

2018-01-09 22:40:59 Hannes

我在webpack.js上刪除了「include：/ ClientApp /」，現在它正在運行。 :) – Hannes

在Asp.Net Core Spa模板上使用帶有webpack的語義UI

回答

相關問題