Angular AOT & Rollup - 未捕获的引用错误：未定义导出

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文件夹将成功生成。

main.ts

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

我读了一个链接之一，即"您需要将这些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

crolup-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/crolup -c rolup -config.js

然后在执行NPM运行时，我会得到错误。

Answer 1

您需要在主页中添加以下代码：

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

Answer 2

如果您导入具有.js以外的扩展名的文件，则可以获得"未定义"错误。看起来您可能有.ts文件，因此您需要配置commonjs插件以查找.ts扩展。

lollup commonjs插件默认情况下仅搜索具有.js文件扩展名的文件。起初并不明显，但他们在文档中提到了这一点：

// search for files other than .js files (must already
// be transpiled by a previous plugin!)
extensions: [ '.js', '.coffee' ],  // Default: [ '.js' ]

如果您将文件导入其他扩展名，则需要在此配置中列出它们。