Angular AOT 和汇总 - 未捕获的 ReferenceError：未定义导出

Posted 2023-02-19

【中文标题】Angular AOT 和汇总 - 未捕获的 ReferenceError：未定义导出

【英文标题】：Angular AOT & Rollup - Uncaught ReferenceError: exports is not defined

【发布时间】：2017-09-20 16:09:45

【问题描述】：

我正在尝试实现 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 链接中读到“您需要将这些 ts 文件编译为 es2015 模块，以便从“tree-shaking”中受益。这意味着必须还有一个配置文件 (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 时，我得到了错误。

【问题讨论】：

我看不出tsconfig-aot.json和tsconfig-compile-aot.json之间的区别第一个已经有es2015模块类型

汇总配置应该有 main-aot 生产入口点

@yurzui：抱歉，区别在于文件部分，只是名称问题。我的main.ts内容已经根据aot改了，没有main-aot

检查这个 repo github.com/alexzuza/angular2-build-examples/tree/master/…

【参考方案1】：

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

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

【讨论】：

这似乎只是修补问题，并没有解决核心捆绑错误。

【参考方案2】：

如果您正在导入扩展名不是.js 的文件，您可能会收到“未定义导出”错误。看起来您可能有 .ts 文件，因此您需要配置 commonjs 插件以查找 .ts 扩展。

rollup commonjs 插件默认只搜索带有.js 文件扩展名的文件。一开始并不明显，但他们在docs 中提到了这一点：

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

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