fix (AoT - Lazy load) : lazy modules chunks creation on Server bundle (#410)

Closes #422 
Closes #413 

* Modified .csproject to emit the wwwroot/dist folder, if the folder is not created yet

* Remove Jest and added Karma test runner for executing unit test cases

* Added PhantomJS for running test in CI environments. Removed deprecated tslint rules and amended existing rules.

* adding tslint config to angular-cli for the ng lint command (#407)

* fix (AoT - Lazy load) : commented code that prevented lazy modules chunks from getting created on PlatformServer

* packages updated to fix 1) Zone already loaded error, 2) issue with not-found component template load issue

* Update README.md

* Update README.md

* chore(engine): remove comments

* Enable uglifyjs on server bundle to reduce bundle size

* Mangling and compress options disabled for Server bundle to fix preboot script issue. Removed duplicated Bootstrap css from vendor bundle

Author: davidsekar

ClientApp/app/containers/not-found/not-found.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'not-found',
     templateUrl: './not-found.component.html'
-    // styleUrls: ['./not-found.component.css']
 })
 export class NotFoundComponent implements OnInit {
     constructor() { }

ClientApp/boot.server.ts

@@ -13,7 +13,7 @@ import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from './poly
 
 enableProdMode();
 
-export default createServerRenderer((params: BootFuncParams) => {
+export default createServerRenderer((params) => {
 
   // Platform-server provider configuration
   const setupOptions: IEngineOptions = {

Views/Shared/_Layout.cshtml

@@ -10,7 +10,7 @@
     @Html.Raw(ViewData["Links"])
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" />
-    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
+    <!-- <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /> -->
 
     @Html.Raw(ViewData["Styles"])
 

package.json

@@ -10,8 +10,9 @@
     "test:coverage": "npm run test -- --coverage",
     "build:dev": "npm run build:vendor && npm run build:webpack",
     "build:webpack": "webpack --progress --color",
-    "build:prod": "npm run build:vendor -- --env.prod && npm run build:webpack -- --env.prod",
-    "build:vendor": "webpack --config webpack.config.vendor.js --progress --color"
+    "build:prod": "npm run clean && npm run build:vendor -- --env.prod && npm run build:webpack -- --env.prod",
+    "build:vendor": "webpack --config webpack.config.vendor.js --progress --color",
+    "clean": "rimraf wwwroot/dist clientapp/dist"
   },
   "dependencies": {
     "@angular/animations": "^4.3.0",
@@ -29,21 +30,21 @@
     "@ngx-translate/core": "^6.0.1",
     "@ngx-translate/http-loader": "0.0.3",
     "@types/node": "^7.0.12",
-    "angular2-router-loader": "^0.3.4",
-    "angular2-template-loader": "0.6.0",
-    "aspnet-prerendering": "2.0.3",
+    "angular2-router-loader": "^0.3.5",
+    "angular2-template-loader": "^0.6.2",
+    "aspnet-prerendering": "^3.0.1",
     "aspnet-webpack": "^2.0.1",
     "awesome-typescript-loader": "^3.0.0",
     "bootstrap": "^3.3.7",
     "bootstrap-sass": "^3.3.7",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.1",
     "css": "^2.2.1",
-    "css-loader": "^0.25.0",
-    "event-source-polyfill": "^0.0.7",
-    "expose-loader": "^0.7.1",
-    "extract-text-webpack-plugin": "^2.0.0-rc",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.4",
+    "css-loader": "^0.28.7",
+    "event-source-polyfill": "^0.0.9",
+    "expose-loader": "^0.7.3",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "html-loader": "^0.5.1",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
     "json-loader": "^0.5.4",
@@ -52,18 +53,18 @@
     "node-sass": "^4.5.2",
     "preboot": "^5.0.0",
     "raw-loader": "^0.5.1",
-    "rimraf": "^2.6.1",
-    "rxjs": "^5.0.1",
-    "sass-loader": "^6.0.3",
+    "rimraf": "^2.6.2",
+    "rxjs": "^5.4.3",
+    "sass-loader": "^6.0.6",
     "signalr": "^2.2.1",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.18.2",
     "to-string-loader": "^1.1.5",
-    "typescript": "2.3.4",
+    "typescript": "2.5.2",
     "url-loader": "^0.5.7",
-    "webpack": "^2.2.0",
-    "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.14.1",
-    "zone.js": "^0.8.9"
+    "webpack": "^3.6.0",
+    "webpack-hot-middleware": "^2.19.1",
+    "webpack-merge": "^4.1.0",
+    "zone.js": "^0.8.17"
   },
   "devDependencies": {
     "@angular/cli": "^1.3.2",
@@ -84,6 +85,7 @@
     "karma-remap-coverage": "^0.1.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.3",
-    "tslint": "^5.0.0"
+    "tslint": "^5.7.0",
+    "webpack-bundle-analyzer": "^2.9.0"
   }
 }

webpack.config.js

@@ -13,6 +13,7 @@ const webpack = require('webpack');
 const merge = require('webpack-merge');
 const AotPlugin = require('@ngtools/webpack').AotPlugin;
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const { sharedModuleRules } = require('./webpack.additions');
 
@@ -56,6 +57,7 @@ module.exports = (env) => {
                 moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
             })
         ] : [
+            // new BundleAnalyzerPlugin(),
             // Plugins that apply in production builds only
             new webpack.optimize.UglifyJsPlugin(),
             new AotPlugin({
@@ -68,7 +70,7 @@ module.exports = (env) => {
 
     // Configuration for server-side (prerendering) bundle suitable for running in Node
     const serverBundleConfig = merge(sharedConfig, {
-        resolve: { mainFields: ['main'] },
+        // resolve: { mainFields: ['main'] },
         entry: { 'main-server': './ClientApp/boot.server.ts' },
         plugins: [
             new webpack.DllReferencePlugin({
@@ -78,6 +80,10 @@ module.exports = (env) => {
                 name: './vendor'
             })
         ].concat(isDevBuild ? [] : [
+            new webpack.optimize.UglifyJsPlugin({
+              compress: false,
+              mangle: false
+            }),
             // Plugins that apply in production builds only
             new AotPlugin({
                 tsConfigPath: './tsconfig.json',
@@ -90,7 +96,7 @@ module.exports = (env) => {
             path: path.join(__dirname, './ClientApp/dist')
         },
         target: 'node',
-        devtool: 'inline-source-map'
+        devtool: isDevBuild ? 'inline-source-map': false
     });
 
     return [clientBundleConfig, serverBundleConfig];

webpack.config.vendor.js

@@ -16,8 +16,8 @@ const treeShakableModules = [
     'zone.js',
 ];
 const nonTreeShakableModules = [
-    'bootstrap',
-    'bootstrap/dist/css/bootstrap.css',
+    // 'bootstrap',
+    // 'bootstrap/dist/css/bootstrap.css',
     'core-js',
     // 'es6-promise',
     // 'es6-shim',
@@ -90,7 +90,9 @@ module.exports = (env) => {
                 path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                 name: '[name]_[hash]'
             })
-        ]
+        ].concat(isDevBuild ? [] : [
+          new webpack.optimize.UglifyJsPlugin()
+      ])
     });
 
     return [clientBundleConfig, serverBundleConfig];