This article talks about ” Can’t resolve ‘./../$$_gendir/ClientApp/app/app.browser.module.ngfactory'” error while publishing a dot net core 3, angular 5 application created from SPA template and how to fix it.
When I was building my aspnet core web applciation, I got following errors in my Gitlab CI pipeline, in this article, we will try to resolve them.

  • Module not found : error : Can’t resolve ‘./../$$_gendir/ClientApp/app/app.browser.module.ngfactory’
  • error MSB3073: The command “node node_modules/webpack/bin/webpack.js –env.prod” exited with code 2.

My setup

@angular/cli - Version 1.5.5
Node: Version 8.2.1
npm: Version 5.5.1
dotnet code: Version 2.1.1-preview-007165

Step 1: Create a new Dotnet core 2 Angular application from SPA

Run following commands in a shell

mkdir ng5-app
cd ng5-app
dotnet new angular
npm install

Step 2. Verify the angular version and upgrade to angular 5

At the command prompt, run following command to install a utility to check outdated packages (Note: to run these commands, you should have npm installrun as explained in step 1).

npm install -g npm-check-updates

Run the following command to see all outdated packages

ncu

I get following list of packages on my computer

PS C:\codewithdotnet\ng5-app> ncu
Using C:\codewithdotnet\ng5-app\package.json
[..................] / :
 @angular/animations                 4.2.5  →         5.0.5
 @angular/common                     4.2.5  →         5.0.5
 @angular/compiler                   4.2.5  →         5.0.5
 @angular/compiler-cli               4.2.5  →         5.0.5
 @angular/core                       4.2.5  →         5.0.5
 @angular/forms                      4.2.5  →         5.0.5
 @angular/http                       4.2.5  →         5.0.5
 @angular/platform-browser           4.2.5  →         5.0.5
 @angular/platform-browser-dynamic   4.2.5  →         5.0.5
 @angular/platform-server            4.2.5  →         5.0.5
 @angular/router                     4.2.5  →         5.0.5
 @ngtools/webpack                    1.5.0  →         1.8.5
 @types/chai                         4.0.1  →         4.0.8
 @types/jasmine                     2.5.53  →         2.8.2
 @types/webpack-env                 1.13.0  →        1.13.2
 awesome-typescript-loader           3.2.1  →         3.4.1
 chai                                4.0.2  →         4.1.2
 css-loader                         0.28.4  →        0.28.7
 event-source-polyfill               0.0.9  →        0.0.12
 expose-loader                       0.7.3  →         0.7.4
 extract-text-webpack-plugin         2.1.2  →         3.0.2
 file-loader                        0.11.2  →         1.1.5
 html-loader                         0.4.5  →         0.5.1
 jasmine-core                        2.6.4  →         2.8.0
 json-loader                         0.5.4  →         0.5.7
 karma                               1.7.0  →         1.7.1
 karma-jasmine                       1.1.0  →         1.1.1
 karma-webpack                       2.0.3  →         2.0.6
 preboot                             4.5.2  →  6.0.0-beta.0
 rxjs                                5.4.2  →         5.5.4
 style-loader                       0.18.2  →        0.19.0
 typescript                          2.4.1  →         2.6.2
 url-loader                          0.5.9  →         0.6.2
 webpack                             2.5.1  →        3.10.0
 webpack-hot-middleware             2.18.2  →        2.21.0
 webpack-merge                       4.1.0  →         4.1.1
 zone.js                            0.8.12  →        0.8.18

Run following command to updated all packages to latest version and record new versions in package.json file.

ncu -u

Following is the output in my computer

PS C:\codewithdotnet\ng5-app> ncu -u
Using C:\codewithdotnet\ng5-app\package.json
[..................] | :
 @angular/animations                 4.2.5  →         5.0.5
 @angular/common                     4.2.5  →         5.0.5
 @angular/compiler                   4.2.5  →         5.0.5
 @angular/compiler-cli               4.2.5  →         5.0.5
 @angular/core                       4.2.5  →         5.0.5
 @angular/forms                      4.2.5  →         5.0.5
 @angular/http                       4.2.5  →         5.0.5
 @angular/platform-browser           4.2.5  →         5.0.5
 @angular/platform-browser-dynamic   4.2.5  →         5.0.5
 @angular/platform-server            4.2.5  →         5.0.5
 @angular/router                     4.2.5  →         5.0.5
 @ngtools/webpack                    1.5.0  →         1.8.5
 @types/chai                         4.0.1  →         4.0.8
 @types/jasmine                     2.5.53  →         2.8.2
 @types/webpack-env                 1.13.0  →        1.13.2
 awesome-typescript-loader           3.2.1  →         3.4.1
 chai                                4.0.2  →         4.1.2
 css-loader                         0.28.4  →        0.28.7
 event-source-polyfill               0.0.9  →        0.0.12
 expose-loader                       0.7.3  →         0.7.4
 extract-text-webpack-plugin         2.1.2  →         3.0.2
 file-loader                        0.11.2  →         1.1.5
 html-loader                         0.4.5  →         0.5.1
 jasmine-core                        2.6.4  →         2.8.0
 json-loader                         0.5.4  →         0.5.7
 karma                               1.7.0  →         1.7.1
 karma-jasmine                       1.1.0  →         1.1.1
 karma-webpack                       2.0.3  →         2.0.6
 preboot                             4.5.2  →  6.0.0-beta.0
 rxjs                                5.4.2  →         5.5.4
 style-loader                       0.18.2  →        0.19.0
 typescript                          2.4.1  →         2.6.2
 url-loader                          0.5.9  →         0.6.2
 webpack                             2.5.1  →        3.10.0
 webpack-hot-middleware             2.18.2  →        2.21.0
 webpack-merge                       4.1.0  →         4.1.1
 zone.js                            0.8.12  →        0.8.18

Upgraded C:\codewithdotnet\ng5-app\package.json

Now, run ncu again and verify if there are any outdated packages
Run following command to updated all packages to latest version and record new versions in package.json file.

PS C:\codewithdotnet\ng5-app> ncu
Using C:\codewithdotnet\ng5-app\package.json
[..................] / :
All dependencies match the latest package versions 🙂

Step 3. Build, and publish dot net project

Run dotnet build command to build dotnet project
Run dotnet publish –configuration Release to publish the project

Build will throw following errors.

1. Module not found : error : Can’t resolve ‘./../$$_gendir/ClientApp/app/app.browser.module.ngfactory’
2. error MSB3073: The command “node node_modules/webpack/bin/webpack.js –env.prod” exited with code 2.

Following messages are from my computer.

PS C:\codewithdotnet\ng5-app> dotnet publish --configuration Release
Microsoft (R) Build Engine version 15.5.178.35674 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Restore completed in 67.91 ms for C:\codewithdotnet\ng5-app\ng5-app.csproj.
  Restore completed in 71.65 ms for C:\codewithdotnet\ng5-app\ng5-app.csproj.
  ng5-app -> C:\codewithdotnet\ng5-app\bin\Release\netcoreapp2.0\ng5-app.dll
  [......]

  added 222 packages, removed 64 packages, updated 186 packages and moved 7 packages in 34.71s
  Hash: cd7904394826d99d36cf5bab273a02f1103415d7
  Version: webpack 3.10.0
  [......]


      ERROR in ./ClientApp/boot.browser.ts
Module not found : error : Can't resolve './../$$_gendir/ClientApp/app/app.browser.module.ngfactory' in 'C:\codewithdotnet\ng5-app\ClientApp' [C:\codewithdotnet\ng5-app\ng5-app.csproj]
       @ ./ClientApp/boot.browser.ts 5:0-95

EXEC : ERROR in error : Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+ [C:\codewithdotnet\ng5-app\ng5-app.csproj]
          at throwNotSupportedError (C:\codewithdotnet\ng5-app\packages\compiler-cli\src\ngtools_api.ts:132:9)
          at Function.NgTools_InternalApi_NG_2.codeGen (C:\codewithdotnet\ng5-app\packages\compiler-cli\src\ngtools_api.ts:80:11)
          at _donePromise.Promise.resolve.then (C:\codewithdotnet\ng5-app\node_modules\@ngtools\webpack\src\plugin.js:430:58)
          at 
          at process._tickCallback (internal/process/next_tick.js:188:7)
          at Function.Module.runMain (module.js:607:11)
          at startup (bootstrap_node.js:158:16)
          at bootstrap_node.js:575:3
 Child Hash: 5d2965220f50a874c2eb Time: 6215ms Asset Size Chunks Chunk Names main-server.js 3.28 MB 0 [emitted] [big] main-server


ERROR in ./ClientApp/boot.server.ts Module not found : error : Can't resolve './../$$_gendir/ClientApp/app/app.server.module.ngfactory' in 'C:\codewithdotnet\ng5-app\ClientApp' [C:\codewithdotnet\ng5-app\ng5-app.csproj] @ ./ClientApp/boot.server.ts 8:0-94 EXEC : ERROR in error : Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+ [C:\codewithdotnet\ng5-app\ng5-app.csproj] at throwNotSupportedError (C:\codewithdotnet\ng5-app\packages\compiler-cli\src\ngtools_api.ts:132:9) at Function.NgTools_InternalApi_NG_2.codeGen (C:\codewithdotnet\ng5-app\packages\compiler-cli\src\ngtools_api.ts:80:11) at _donePromise.Promise.resolve.then (C:\codewithdotnet\ng5-app\node_modules\@ngtools\webpack\src\plugin.js:430:58) at at process._tickCallback (internal/process/next_tick.js:188:7) at Function.Module.runMain (module.js:607:11) at startup (bootstrap_node.js:158:16) at bootstrap_node.js:575:3

C:\codewithdotnet\ng5-app\ng5-app.csproj(41,5): error MSB3073: The command “node node_modules/webpack/bin/webpack.js –env.prod” exited with code 2. PS C:\codewithdotnet\ng5-app>

Step 4. Fixing the error

Update the webpack.config.js file as shown below

1. Replace
const AotPlugin = require(‘@ngtools/webpack’).AotPlugin;
with
const AngularCompilerPlugin = require(‘@ngtools/webpack’).AngularCompilerPlugin;
2. Replace AotPlugin with AngularCompilerPlugin

Updated webpack.config.js in my computer

Lines hilighted in Green are the changed code

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
//const AotPlugin = require('@ngtools/webpack').AotPlugin;
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            //new AotPlugin({
		new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot.server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            //new AotPlugin({
		new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

Publish project again to very no errors

Run dot net publish and verify there are no errors.

PS C:\codewithdotnet\ng5-app> dotnet publish
Microsoft (R) Build Engine version 15.5.178.35674 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Restore completed in 66.99 ms for C:\codewithdotnet\ng5-app\ng5-app.csproj.
  Restore completed in 72.12 ms for C:\codewithdotnet\ng5-app\ng5-app.csproj.
  ng5-app -> C:\codewithdotnet\ng5-app\bin\Debug\netcoreapp2.0\ng5-app.dll

  added 116 packages in 8.463s
  Hash: cd7904394826d99d36cf5bab273a02f1103415d7
  Version: webpack 3.10.0
  Child
      Hash: cd7904394826d99d36cf
      Time: 12940ms
                                     Asset    Size  Chunks                    Chunk Names
      89889688147bd7575d6327160d64e760.svg  109 kB          [emitted]
                                 vendor.js  191 kB       0  [emitted]         vendor
                                vendor.css  289 kB       0  [emitted]  [big]  vendor
      Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?minimize!node_modules/bootstrap/dist/css/bootstrap.css:
           1 asset
  Child
      Hash: 5bab273a02f1103415d7
      Time: 12948ms
                                     Asset     Size  Chunks                    Chunk Names
      89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]
                                 vendor.js  3.91 MB       0  [emitted]  [big]  vendor
  Hash: 0a6d57d259ccb9012cedd22ea89670e96339373d
  Version: webpack 3.10.0
  ng5-app -> C:\codewithdotnet\ng5-app\bin\Debug\netcoreapp2.0\publish\
PS C:\codewithdotnet\ng5-app>