Make a change to webpack.config.js in a .NET Core Angular application to get the AoT compliation working.

webpack.config.js is the last file in the file tree. At line 4 it has:

const AotPlugin = require('@ngtools/webpack').AotPlugin;

 
 

Per page 47 of "ASP.NET Core 2 and Angular 5" by Valerio De Sanctis this needs to be manually changed to:

const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

 
 

...in order to get the AoT stuff working in Angular 5 instead of Angular 4. No wonder I couldn't get this to work for me. Another change needs to happen here in the same file:

module: {
   rules: [
      { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ?
            ['awesome-typescript-loader?silent=true', 'angular2-template-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' }
   ]
},

 
 

The first item in the array changes like so:

module: {
   rules: [
      { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, include: /ClientApp/, use: isDevBuild ?
            ['awesome-typescript-loader?silent=true', 'angular2-template-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' }
   ]
},

 
 

Addendum 5/9/2018: It turns out that webpack.config.js is not the lastmost file in the solution after all. See: this