不能使用PrimeNG和.Net Core 2 Angular項目模板

Question

我用Visual Studio 2017 15.3和Angular Project Template創建了一個新的ASP.NET Core 2.0項目。它工作正常，但是當我嘗試添加PrimeNG到packages.json和webpack.config.vendor.js並引用ButtonModule我收到以下錯誤：

NodeInvocationException: Unexpected value 'ButtonModule' imported by the module 'AppModuleShared'. Please add a @NgModule annotation.

什麼想法？

app.module.shared.ts：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './components/app/app.component'; 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 
import { ButtonModule } from 'primeng/primeng'; 
@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     ButtonModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}) 
export class AppModuleShared { 
} 

webpack.config.vendor.js

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const merge = require('webpack-merge'); 
const treeShakableModules = [ 
    '@angular/animations', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    'zone.js'  
]; 
const nonTreeShakableModules = [ 
    'bootstrap', 
    'bootstrap/dist/css/bootstrap.css', 
    'es6-promise', 
    'es6-shim', 
    'event-source-polyfill', 
    'jquery', 
    'primeng/primeng' 
]; 
const allModules = treeShakableModules.concat(nonTreeShakableModules); 

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' } 
      ] 
     }, 
     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, { 
     entry: { 
      // To keep development builds fast, include all vendor dependencies in the vendor bundle. 
      // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle. 
      vendor: isDevBuild ? allModules : nonTreeShakableModules 
     }, 
     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'] }, 
     entry: { vendor: allModules.concat(['aspnet-prerendering']) }, 
     output: { 
      path: path.join(__dirname, 'ClientApp', 'dist'), 
      libraryTarget: 'commonjs2', 
     }, 
     module: { 
      rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ] 
     }, 
     plugins: [ 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ] 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
} 

Answer 1

正如S_developer提到的已經存在的問題進行workaround。它與AOT編譯器有關，我希望有一天會有修復...

Answer 2

將嘗試該解決方案，因爲我無法使Prime能夠工作。已經嘗試材料，開發快遞等，我只是嘗試與材料，現在它是工作。剛從索引頁面中刪除預渲染，現在它工作。

這只是一個表現考慮，還是它做別的事情。當試圖使用dev express控件時，他們聲明需要刪除該聲明。