Webpack Configuration Question

[bgauvey]

I created an app with the SPA Templates for .NET Core and Visual Studio 2017. The Angular app is using the primeng components for the UI. In order to get fontawesome and primeng themes running I ran webpack --config webpack.config.vendor.js so that I could add the css files to the nonTreeShakableModules array. Everything seems to work until I publish.

When I attempt to publish I get the following error

Code: Select all

    ERROR in ./$$_gendir/~/primeng/components/menu/menu.ngfactory.ts
Module parse failed: .\$$_gendir\node_modules\primeng\components\menu\menu.ngfactory.ts Unexpected token (14:32)
You may need an appropriate loader to handle this file type.
| import * as i3 from '@angular/router';
| import * as i4 from 'primeng/components/dom/domhandler';
| export const MenuModuleNgFactory:i0.NgModuleFactory<i1.MenuModule> = i0.?cmf(i1.MenuModule,
|     ([] as any[]),(_l:any) => {
|       return i0.?mod([i0.?mpd(512,i0.ComponentFactoryResolver,i0.?CodegenComponentFactoryResolver,
 @ ./$$_gendir/ClientApp/app/components/locations/locations.component.ngfactory.ts 9:0-99
 @ ./$$_gendir/ClientApp/app/components/list/list.component.ngfactory.ts
 @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
 @ ./ClientApp/boot.server.ts

I have this error for every primeng component that is used. There is definitely something in my webpack config, but I haven't a clue where to start.

Here is the webpack.config.vendor.js

Code: Select all

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',
    'font-awesome/css/font-awesome.css',
    'primeng/resources/primeng.css',
    'primeng/resources/themes/south-street/theme.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];
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|jpg|jpeg|gif|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [

            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] }), // 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];
}

[adefwebserver]

I had a similar problem and this link fixed it:
https://github.com/aspnet/JavaScriptSer ... ssues/1293
Basically:
issue was linked to the AoT, as explained in issue #1168https://github.com/aspnet/JavaScriptSer ... ssues/1168. I could fix it by removing the include: /ClientApp/ setting from webpack.config.js