Angular AOT 和汇总 - 未捕获的 ReferenceError : exports is not defined

Question

我正在尝试实现 Angular 的 AOT 教程: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

使用 ngc 部分有效并生成 aot 文件夹。但是，当我运行应用程序时，出现以下错误

bundle.js:1 Uncaught ReferenceError: exports is not defined

我的代码如下:-

tsconfig-aot.json

    {
      "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
      },

    "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],

      "angularCompilerOptions": {
       "genDir": "aot",
       "skipMetadataEmit" : true
     },
     "exclude": [
            "node_modules",
            "bower_components",
            "typings/main",
            "typings/main.d.ts"
        ]
    }

执行node_modules/.bin/ngc -p tsconfig-aot.json后，成功生成aot文件夹

主要.ts

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

我在其中一个 SO 链接中读到“您需要将这些 ts 文件编译为 es2015 模块，以便从“摇树”中受益。这意味着必须再有一个配置文件(tsconfig-compile-aot .json) 只指向 main-aot.ts 文件。”

tsconfig-compile-aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

   "files": [
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
 },
 "exclude": [
        "node_modules",
        "bower_components",
        "typings/main",
        "typings/main.d.ts"
    ]
}

使用 tsc 和 tsconfig-compile-aot.json 编译 main-aot.ts 文件，再次作为 es2015 模块并生成你的 js 文件。在编译时我得到了我的 js 文件 我执行了命令
tsc src/main.ts

rollup-config.js

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
  entry: 'src/main.js',
  dest: 'bundle.js', // output a single application bundle
  sourceMap: false,
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings
    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
}

之后我执行了下面的命令 node_modules/.bin/rollup -c rollup-config.js

然后在执行 npm run lite 时，我得到了错误。

Answer 1

您需要在母版页中添加以下代码:

window.module = {
    id: 'foo',
    exports: []
}