首页 文章

Angular AOT&Rollup - 未捕获的ReferenceError:未定义导出

提问于
浏览
3

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

使用ngc部件工作,它生成一个文件夹 . 但是,当我运行应用程序时,我得到以下错误

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链接中读到“你需要将这些ts文件编译为es2015模块,以便从”树摇动“中受益 . 这意味着必须有一个配置文件(tsconfig-compile-aot.json)只指向main-aot.ts文件 . “

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时,我收到错误 .

1 回答

  • 1

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

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

相关问题