asp.net核心spa模板，语义UI

我无法使用Microsoft.AspNetCore.SpaTemplate进行语义ui。

当我创建一个Angular CLI-App时，它工作正常，但我希望将它打包在一起。

我做了什么：

1）安装SPA模板： dotnet new –install Microsoft.AspNetCore.SpaTemplates :: *
2）创建新项目： dotnet new angular
3）安装所有deps： npm install
4）添加semantic-iu-css： npm i semantic-ui-css –save
5）添加ng2-semantic-ui： npm i ng2-semantic-ui –save
6）将“semantic-ui-css / semantic.css”和“ng2-semantic-ui”添加到webpack.config.vendor.js
7）运行webpack --config webpack.config.vendor.js来重建vendor.js
8）将“eot | woff | woff2 | ttf”添加到webpack.config.js中的URL-Loader
9）在app.module.client.ts中导入‘ng2-semantic-ui’

当我运行应用程序时，我得到以下exception：

未捕获错误：模块“AppModule”导入的意外值“SuiModule”。 请添加@NgModule注释。

这是我的代码：
home.component.ts

 import { Component } from '@angular/core'; import { SuiModule } from 'ng2-semantic-ui'; @Component({ selector: 'home', templateUrl: './home.component.html' }) export class HomeComponent { } 

home.component.html：

   
  First Panel 
 
 
Add classes to the sui-accordion element to apply styles.
 
   
  Second Panel 
 
 
Second panel content.
 
   

app.module.client.ts：

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { sharedConfig } from './app.module.shared'; import { SuiModule} from 'ng2-semantic-ui'; @NgModule({ bootstrap: sharedConfig.bootstrap, declarations: sharedConfig.declarations, imports: [ BrowserModule, FormsModule, HttpModule, SuiModule, ...sharedConfig.imports ], providers: [ { provide: 'ORIGIN_URL', useValue: location.origin } ] }) export class AppModule { } 

webpack.config.vendor.js

 const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge'); module.exports = (env) => { const extractCSS = new ExtractTextPlugin('vendor.css'); const isDevBuild = !(env && env.prod); const sharedConfig = { stats: { modules: false }, resolve: { extensions: [ '.js' ] }, module: { rules: [ { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, entry: { vendor: [ '@angular/animations', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', 'semantic-ui-css/semantic.css', 'ng2-semantic-ui', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'jquery', 'zone.js', ] }, output: { publicPath: '/dist/', filename: '[name].js', library: '[name]_[hash]' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898 new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 ] }; const clientBundleConfig = merge(sharedConfig, { output: { path: path.join(__dirname, 'wwwroot', 'dist') }, module: { rules: [ { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) } ] }, plugins: [ extractCSS, new webpack.DllPlugin({ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin() ]) }); const serverBundleConfig = merge(sharedConfig, { target: 'node', resolve: { mainFields: ['main'] }, output: { path: path.join(__dirname, 'ClientApp', 'dist'), libraryTarget: 'commonjs2', }, module: { rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ] }, entry: { vendor: ['aspnet-prerendering'] }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ] }); return [clientBundleConfig, serverBundleConfig]; }