Impossible d'utiliser PrimeNG avec le modèle de projet angulaire .Net Core 2

Question

J'ai créé un nouveau projet ASP.NET Core 2.0 avec Visual Studio 2017 15.3 et le Angular Project Template. Il fonctionne très bien, mais lorsque je tente d'ajouter PrimeNG à packages.json et webpack.config.vendor.js et font référence au ButtonModule je reçois l'erreur suivante:

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

Des idées?

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

Comme mentionné S_developer il existe déjà un workaround pour la question. Il est lié au compilateur AOT et j'espère qu'il y aura un correctif un jour ...

Answer 2

J'essaierai la solution car je ne pouvais pas non plus faire fonctionner Prime. J'ai essayé Matériel, Dev Express, etc. Je l'ai juste essayé avec du matériel, et maintenant c'est du travail. Juste enlevé le prérendering de la page d'index, et maintenant cela fonctionne.

Est-ce juste une performance considérée, ou fait-elle quelque chose d'autre. Lorsque vous essayez de travailler avec les commandes dev express, elles indiquent que l'instruction doit être supprimée.