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);

我在其中一个SO链接中读到了＃34;您需要将这些ts文件编译为es2015模块，以便从＃34;树摇动中获益＃34;这意味着必须有一个仅指向main-aot.ts文件的配置文件（tsconfig-compile-aot.json）。＆＃34;

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/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

汇总-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: []
}

Answer 2

如果导入扩展名为.js以外的文件，则会出现“未定义导出”错误。看来您可能拥有.ts个文件，因此您需要配置commonjs插件来寻找.ts扩展名。

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

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

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

Angular AOT＆amp;汇总 - 未捕获的ReferenceError：未定义导出

2 个答案: