Angular AOT STEP 1

bootstrap.aot.ts

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';

// After `ngc` command is run this ngfactory file gets generated...
// So Following error is useless...
import { AppModuleNgFactory } from '../build/src/app/app.module.ngfactory';


declare var IS_PROD_TEST: boolean;
declare var environment;

if (IS_PROD_TEST) {
  console.log("IS_PROD, TEST", environment);
  enableProdMode();
} else {
  console.log("IS_NOT_PROD, TEST", IS_PROD_TEST);
}

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(err => console.error(err));

package.json

"scripts": {
    "aot": "ngc -p tsconfig-aot.json",
    "clean": "rimraf build dist server/dist",
    "clean:dist": "rimraf server/dist",
    "compodoc": "compodoc src -p tsconfig.json -s",
    "build:sass": "node-sass -r build/ -o build/",
    "copy:build": "cpx -v \"src/**/*\" \"build\"",
    "package:replace-scss": "node ./config/replace-scss.js",
    "build": "webpack --display-error-details",
    "build:prod:test": "cross-env NODE_ENV=prod_test npm run build",
    "serve:stage": "npm run start --prefix ./server",
    "serve:prod": "npm run start NODE_ENV=production --prefix ./server",
    "start": "cross-env NODE_ENV=development webpack-dev-server",
    "start:prod:test": "npm-run-all clean copy:build build:sass package:replace-scss aot build:prod:test",
    "start:hmr": "webpack-dev-server --env.HMR"
}

replace-scss.js

const replace = require("replace");
const fs = require('fs-extra')

/**
 * This replaces all .scss extensions with .css
 */
replace({
  regex: '.scss',
  replacement: '.css',
  paths: ['./build'],
  recursive: true,
  silent: false
});

tsconfig-aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitHelpers": false,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": ["dom","es7"],
    "outDir": "./dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "typeRoots": [
        "./node_modules/@types"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "files": [
    "src/app/app.module.ts",
    "src/bootstrap.aot.ts"
  ],
  "exclude": [
    "node_modules",
    "ngx-datatable/e2e", // This is a third party Library, which I am using as a git-submodule
    "e2e",
    "ngx-datatable/demo",
    "**/*.spec.ts",
    "**/*.e2e.ts",
    "**/*.d.ts",
    "**/*.ngfactory.ts", // Do not forget to exclude ngfactory here, really important that I know of
    "**/*.shim.ts"
  ],
  // Following Awesome TS Loader Options is not required if U are using AOTPlugin, checkout the Second Method
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  // Required if Compile options are not given into AOTPlugin
  "angularCompilerOptions": {
    "genDir": "build",		// If Generated Directory is confusing, try running `ngc -p tsconfig-aot.json` and u can get
    						// to know where ur *.ngfactory.ts files are generated, this path is used by bootstrap.aot.ts imports
    "strictMetadataEmit" : false, // Keep this property false if build fails, Is responsible to Some Metadata Checks, which may or 
    							  // may not be that crucial, for me `false` worked fine
    "entryModule": "./build/app/modules/app.module#AppModule"
  }
}

webpack.prod.js

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const commonConfig = require('./webpack.common');
const { ENV, dir, IS_PRODUCTION } = require('./helpers');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ngtools = require('@ngtools/webpack');
var environment = require('../src/environments/environment.prod');

module.exports = function(env) {

  var _plugins = [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      dir('src')
    ),
    // Disable this when Checking for Bundle Analysis...
    // new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['polyfills'],
      minChunks: Infinity
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: 'dependency',
      title: 'Quick Reports'
    }),
    new CleanWebpackPlugin(['server/dist'], {
      root: dir(),
      verbose: false,
      dry: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ];

  if (IS_PRODUCTION || true) {
    _plugins.push( new BundleAnalyzerPlugin(bundleAnalyzerOpt) );
  }

  return webpackMerge(commonConfig({ env: ENV, environment: environment }), {
    devtool: 'source-map',
    entry: {
      'app': './src/bootstrap.aot.ts',
      'polyfills': './src/polyfills.ts'
    },
    module: {
      exprContextCritical: false,
      rules: [
        {
            enforce: 'pre',
            test: /\.js$/,
            use: [
                {
                    loader: 'source-map-loader'
                }
            ],
            exclude: /(node_modules)/
        },
        {
            test: /\.ts$/,
            use: [
                {
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: "./tsconfig-aot.json"
                    }
                },
                'angular2-template-loader'
            ],
            exclude: [/\.(spec|e2e|d)\.ts$/]
        }

      ]
    },
    plugins: _plugins
  });

};

bundleAnalyzerOpt = {
  analyzerMode: 'server',
  analyzerHost: '127.0.0.1',
  analyzerPort: 8888,
  reportFilename: dir('stats','report.html'),
  defaultSizes: 'parsed',
  generateStatsFile: true,
  statsFilename: dir('stats', 'stats.json'),
  logLevel: 'warn'
}