javascript - 如何使用 Webpack 运行 Angular 2 AOT

Question

更新

@developer033 提到后，我正在运行 npm run server:prod 并且应用程序正在 prod 模式下运行。但我不确定，如何验证它是否经过 AOT 优化？

如果我检查 main.bundle.js 以检查它是否有 main.browser.aot.ts 的代码:

我看到是 main.browser.ts 而不是 main.browser.aot.ts所以我不确定我是否在使用 AOT 构建。

原帖

好的，我可以使用 Webpack 在 AOT 模式下编译我的 Angular2 项目，它创建了两个文件夹，一个是“dist”，另一个是“compiled”，但我不确定编译后如何运行 AOT 项目。

构建命令:

"build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail"

编译后，我运行命令:

npm run webpack-dev-server

现在应用程序运行了，但我不确定它是否使用 AOT 编译代码。我在浏览器中看到 AOT 和非 AOT 应用程序没有区别。

AOT:

没有 AOT:

tsconfig.webpack.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "baseUrl": "./src",
        "outDir": "compiled",
        "paths": {},
        "lib": [
            "es2015",
            "dom"
        ],
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "exclude": [
        "node_modules",
        "dist",
        "compiled",
        "src/**/*.spec.ts",
        "src/**/*.e2e.ts"
    ],
    "awesomeTypescriptLoaderOptions": {
        "forkChecker": true,
        "useWebpackText": true
    },
    "angularCompilerOptions": {
        "genDir": "compiled",
        "skipMetadataEmit": true
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

ma​​in.browser.aot.ts:

 import { platformBrowser } from '@angular/platform-browser';
    import { decorateModuleRef } from './app/environment';
    import { enableProdMode } from '@angular/core';
    import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';

    if (ENV.toLocaleLowerCase() === 'production' || ENV.toLocaleLowerCase() === 'prod') {
      enableProdMode();
    }
    export function main(): Promise<any> {
      return platformBrowser()
        .bootstrapModuleFactory(AppModuleNgFactory)
        .then(decorateModuleRef)
        .catch(err => console.error(err));
    }

    export function bootstrapDomReady() {
      document.addEventListener('DOMContentLoaded', main);
    }

    bootstrapDomReady();

config/webpack.common.js:

const HMR = helpers.hasProcessFlag('hot');
const AOT = helpers.hasNpmFlag('aot');
const METADATA = {
    title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
    baseUrl: '/',
    isDevServer: helpers.isWebpackDevServer()
};
module.exports = function(options) {
    isProd = options.env === 'production';
    return {
        entry: {
            'polyfills': './src/polyfills.browser.ts',
            'vendor': './src/vendor.browser.ts',
            'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts'
        },
        resolve: { extensions: ['.ts', '.js', '.json', '.css', '.scss'], modules: [helpers.root('src'), 'node_modules'], },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loaders: [
                        '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
                        'awesome-typescript-loader',
                        { loader: 'ng-router-loader', options: { loader: 'async-import', genDir: 'compiled', aot: AOT } },
                        'angular2-template-loader'
                    ],
                    exclude: [/\.(spec|e2e)\.ts$/]
                },
                {
                    test: /\.scss$/,
                    exclude: /node_modules/,
                    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
                },{ test: /\.json$/, loader: 'json-loader'},
                { test: /\.woff(2)?(\?v=.+)?$/,  use: 'url-loader?limit=10000&mimetype=application/font-woff' },
                { test: /\.(ttf|eot|svg)(\?v=.+)?$/, use: 'file-loader' },
                { test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery' },
                { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] },
                { test: /\.(jpg|png|gif)$/, loader: 'file' },
            ],
        },
        plugins: [            
            new ngcWebpack.NgcWebpackPlugin({
                disabled: !AOT,
                tsConfig: helpers.root('tsconfig.webpack.json'),
                resourceOverride: helpers.root('config/resource-override.js')
            }),
            new ExtractTextPlugin({ filename: 'initial.css', allChunks: true }),
            new AssetsPlugin({ path: helpers.root('dist'), filename: 'webpack-assets.json', prettyPrint: true }),
            new CheckerPlugin(),
            new CommonsChunkPlugin({ name: 'polyfills', chunks: ['polyfills']  }),
            new CommonsChunkPlugin({ name: 'vendor', chunks: ['main'], minChunks: module => /node_modules/.test(module.resource) }),
            new CommonsChunkPlugin({ name: ['polyfills', 'vendor'].reverse() }),
            new ContextReplacementPlugin( /angular(\\|\/)core(\\|\/)@angular/,  helpers.root('src') ),
            new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets',  }, { from: 'src/meta', }, ]),
            new HtmlWebpackPlugin({ template: 'src/index.html', title: METADATA.title, chunksSortMode: 'dependency',  metadata: METADATA, inject: 'head',
                //csp: "default-src 'self'; child-src 'none'; object-src 'none'"
            }),
            new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
            new HtmlElementsPlugin({ headTags: require('./head-config.common') }),
            new LoaderOptionsPlugin({}),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
            }),
            // Fix Angular 2
            new NormalModuleReplacementPlugin( /facade(\\|\/)async/, helpers.root('node_modules/@angular/core/src/facade/async.js') ),
            new NormalModuleReplacementPlugin( /facade(\\|\/)collection/, helpers.root('node_modules/@angular/core/src/facade/collection.js') ),
            new NormalModuleReplacementPlugin(  /facade(\\|\/)errors/, helpers.root('node_modules/@angular/core/src/facade/errors.js') ),
            new NormalModuleReplacementPlugin(  /facade(\\|\/)lang/, helpers.root('node_modules/@angular/core/src/facade/lang.js') ),
            new NormalModuleReplacementPlugin( /facade(\\|\/)math/, helpers.root('node_modules/@angular/core/src/facade/math.js') ),
        ],
        node: {  global: true, crypto: 'empty', process: true,  module: false, clearImmediate: false, setImmediate: false }
    };
}

config/webpack.prod.js:

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
const API_HOST = process.env.HOST || 'localhost';
const API_PORT = process.env.PORT || 8080;
const METADATA = webpackMerge(commonConfig({ env: ENV }).metadata, { API_HOST: API_HOST, API_PORT: API_PORT,
    ENV: ENV, HMR: false
});

module.exports = function(env) {
    return webpackMerge(commonConfig({ env: ENV }), {
        devtool: 'source-map',
        output: {
            path: helpers.root('dist'),
            filename: '[name].[chunkhash].bundle.js',
            sourceMapFilename: '[name].[chunkhash].bundle.map',
            chunkFilename: '[id].[chunkhash].chunk.js'
        },
        plugins: [
            new WebpackMd5Hash(),
            new DefinePlugin({'API_HOST': JSON.stringify(API_HOST), 'API_PORT': JSON.stringify(API_PORT),
                'ENV': JSON.stringify(METADATA.ENV), 'NODE_ENV': JSON.stringify(METADATA.ENV), 'HMR': METADATA.HMR,
                'process.env': {
                    'API_HOST': JSON.stringify(API_HOST), 'API_PORT': JSON.stringify(API_PORT),
                    'ENV': JSON.stringify(METADATA.ENV), 'NODE_ENV': JSON.stringify(METADATA.ENV), 'HMR': METADATA.HMR,
                }
            }),
            new UglifyJsPlugin({
                beautify: false, //prod
                mangle: {  screw_ie8: true, keep_fnames: true }, //prod
                compress: { screw_ie8: true }, //prod
                comments: false //prod
            }),
            new NormalModuleReplacementPlugin( /angular2-hmr/,  helpers.root('config/modules/angular2-hmr-prod.js') ),
            new LoaderOptionsPlugin({
                debug: false,
                options: {
                    tslint: { emitErrors: true, failOnHint: true, resourcePath: 'src' },
                    htmlLoader: { minimize: true, removeAttributeQuotes: false, caseSensitive: true,
                        customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
                        customAttrAssign: [/\)?\]?=/]
                    },
                }
            }),
        ],
        node: { global: true, crypto: 'empty', process: false, module: false, clearImmediate: false, setImmediate: false }
    });
}

Package.json:

{
  "name": "angular2-webpack-starter",
  "version": "5.1.1",
  "description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
  "keywords": [
    "angular2",
    "webpack",
    "typescript"
  ],
  "author": "Patrick Stapleton <patrick@angularclass.com>",
  "homepage": "https://github.com/angularclass/angular2-webpack-starter",
  "license": "MIT",
  "scripts": {
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
    "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "ci": "npm run lint && npm test && npm run e2e",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules dist",
    "clean:aot": "npm run rimraf -- compiled",
    "docker": "docker",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --github-dev",
    "github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --github-prod",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "pree2e": "npm run webdriver:update -- --standalone",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
    "server:prod": "http-server dist --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "test": "karma start",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js  --progress --profile --bail",
    "webdriver-manager": "webdriver-manager",
    "webdriver:start": "npm run webdriver-manager start",
    "webdriver:update": "npm run webdriver-manager update",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/platform-server": "4.1.3",
    "@angular/router": "4.1.3",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.0",
    "@angularclass/hmr-loader": "~3.0.2",
    "animate.css": "^3.5.2",
    "assets-webpack-plugin": "^3.4.0",
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-loader": "^2.1.0",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "error-stack-parser": "^2.0.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "font-awesome": "^4.7.0",
    "font-awesome-sass-loader": "^2.0.1",
    "http-server": "^0.10.0",
    "ie-shim": "^0.1.0",
    "ionicons": "^3.0.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "ng-snotify": "^1.1.6",
    "ngc-webpack": "^2.0.0",
    "normalize.css": "^7.0.0",
    "primeng": "^4.0.1",
    "resolve-url-loader": "^2.0.2",
    "rxjs": "^5.0.0-rc.1",
    "sourcemapped-stacktrace": "^1.1.6",
    "stacktrace-gps": "^3.0.1",
    "stacktrace-js": "^2.0.0",
    "zone.js": "~0.8.11"
  },
  "devDependencies": {
    "@angular/cli": "^1.1.0",
    "@angular/compiler-cli": "^4.1.3",
    "@ngtools/webpack": "^1.4.1",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^7.0.22",
    "@types/protractor": "^4.0.0",
    "@types/selenium-webdriver": "3.0.4",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^2.2.15",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.1.3",
    "codelyzer": "~3.0.1",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.28.4",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.7.1",
    "istanbul-instrumenter-loader": "^2.0.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-remap-coverage": "^0.1.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.3",
    "ng-router-loader": "^2.1.0",
    "node-sass": "^4.5.3",
    "parse5": "^3.0.2",
    "postcss-loader": "^2.0.5",
    "protractor": "^5.1.2",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "^2.0.2",
    "rimraf": "^2.5.2",
    "sass-loader": "^6.0.5",
    "script-ext-html-webpack-plugin": "^1.3.2",
    "source-map-loader": "^0.2.1",
    "string-replace-loader": "1.2.0",
    "style-loader": "^0.18.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.2",
    "ts-node": "^3.0.4",
    "tslint": "^5.3.2",
    "tslint-loader": "^3.5.3",
    "typedoc": "^0.7.1",
    "typescript": "2.3.4",
    "url-loader": "^0.5.8",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.9",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^4.1.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/angularclass/angular2-webpack-starter.git"
  },
  "bugs": {
    "url": "https://github.com/angularclass/angular2-webpack-starter/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

Answer 1

更新:

正如@developer033 所指出的，ng2-admin 最近更新为 Angular-cli 而不是 angular2-webpack-starter。

原答案:

发布完整答案

运行以下两个命令来构建和运行服务器(如@developer033 所述):

npm run build:prod (npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail)
npm run server:prod

在我的例子中，我在不同的地址同时运行 JIT 和 AOT 构建:

http://127.0.0.1:8080是JIT，其余是AOT

要验证您的构建是否为 AOT，请按照@Maximus 所述检查您的主 bundle 文件。您也可以暂时禁用 UglifyJsPlugin 优化代码，只是为了检查主包 js。

最后，我在 AOT 构建中遇到了以下错误:

"Uncaught TypeError: Cannot read property 'setGlobalVar' of null"

为了解决这个问题，我简单地评论了 disableDebugTools();在我的 environment.ts 文件中。

注意:
我用 angular2-webpack-starter 创建了项目模板对于 AOT，我提到了 ng2-admin