Add AoT compilation to Angular template

Author: SteveSandersonMS

templates/AngularSpa/ClientApp/app/app.module.browser.ts

@@ -10,8 +10,12 @@ import { AppComponent } from './components/app/app.component';
         AppModuleShared
     ],
     providers: [
-        { provide: 'ORIGIN_URL', useValue: location.origin }
+        { provide: 'ORIGIN_URL', useFactory: getOriginUrl }
     ]
 })
 export class AppModule {
 }
+
+export function getOriginUrl() { 
+    return location.origin; 
+}

templates/AngularSpa/ClientApp/boot-client.ts renamed to templates/AngularSpa/ClientApp/boot.client.ts

@@ -9,13 +9,15 @@
     "@angular/animations": "4.2.5",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
+    "@angular/compiler-cli": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/platform-server": "4.2.5",
     "@angular/router": "4.2.5",
+    "@ngtools/webpack": "1.5.0",
     "@types/node": "8.0.8",
     "angular2-template-loader": "0.6.2",
     "aspnet-prerendering": "^2.0.5",

templates/AngularSpa/ClientApp/boot-server.ts renamed to templates/AngularSpa/ClientApp/boot.server.ts

@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
+const AotPlugin = require('@ngtools/webpack').AotPlugin;
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
 
 module.exports = (env) => {
@@ -16,7 +17,7 @@ module.exports = (env) => {
         },
         module: {
             rules: [
-                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
+                { 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' }
@@ -28,7 +29,7 @@ module.exports = (env) => {
     // Configuration for client-side bundle suitable for running in browsers
     const clientBundleOutputDir = './wwwroot/dist';
     const clientBundleConfig = merge(sharedConfig, {
-        entry: { 'main-client': './ClientApp/boot-client.ts' },
+        entry: { 'main-client': './ClientApp/boot.client.ts' },
         output: { path: path.join(__dirname, clientBundleOutputDir) },
         plugins: [
             new webpack.DllReferencePlugin({
@@ -43,22 +44,34 @@ module.exports = (env) => {
             })
         ] : [
             // Plugins that apply in production builds only
-            new webpack.optimize.UglifyJsPlugin()
+            new webpack.optimize.UglifyJsPlugin(),
+            new AotPlugin({
+                tsConfigPath: './tsconfig.json',
+                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#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' },
+        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({
+                tsConfigPath: './tsconfig.json',
+                entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
+                exclude: ['./**/*.client.ts']
+            })
+        ]),
         output: {
             libraryTarget: 'commonjs',
             path: path.join(__dirname, './ClientApp/dist')

templates/AngularSpa/npm-shrinkwrap.json

@@ -2,6 +2,27 @@ 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',
+];
+const allModules = treeShakableModules.concat(nonTreeShakableModules);
 
 module.exports = (env) => {
     const extractCSS = new ExtractTextPlugin('vendor.css');
@@ -14,26 +35,6 @@ module.exports = (env) => {
                 { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
             ]
         },
-        entry: {
-            vendor: [
-                '@angular/animations',
-                '@angular/common',
-                '@angular/compiler',
-                '@angular/core',
-                '@angular/forms',
-                '@angular/http',
-                '@angular/platform-browser',
-                '@angular/platform-browser-dynamic',
-                '@angular/router',
-                'bootstrap',
-                'bootstrap/dist/css/bootstrap.css',
-                'es6-shim',
-                'es6-promise',
-                'event-source-polyfill',
-                'jquery',
-                'zone.js',
-            ]
-        },
         output: {
             publicPath: '/dist/',
             filename: '[name].js',
@@ -48,6 +49,11 @@ module.exports = (env) => {
     };
 
     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: [
@@ -68,14 +74,14 @@ module.exports = (env) => {
     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' ] } ]
         },
-        entry: { vendor: ['aspnet-prerendering'] },
         plugins: [
             new webpack.DllPlugin({
                 path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),