角度AOT&汇总-未捕获的ReferenceError：未定义导出 [英] Angular AOT & Rollup - Uncaught ReferenceError: exports is not defined

问题描述

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

I am trying to implement Angular's AOT tutorial: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

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

Using ngc part works and it generates aot folder. However,when I run the application, I get the below error

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

我的代码如下：-

tsconfig-aot.json

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文件夹。

After executing node_modules/.bin/ngc -p tsconfig-aot.json, aot folder is successfully generated.

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文件。

I read in one of the SO link that "You need to compile these ts files as es2015 modules, in order to benefit from "tree-shaking". This means there must be one more config file (tsconfig-compile-aot.json) that only points to main-aot.ts file."

tsconfig-compile-aot.json

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"
    ]
}

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

tsc src / main.ts

Compile main-aot.ts files with tsc and tsconfig-compile-aot.json, again as es2015 modules and generate your js files. On compiling I get my js files I executed the command
tsc src/main.ts

rollup-config.js

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

After that I executed, the below command node_modules/.bin/rollup -c rollup-config.js

然后执行npm精简运行，我得到错误。

and then on executing npm run lite,I get the error .

推荐答案

如果使用以下命令导入文件，则会出现未定义导出错误 .js 以外的扩展名。看来您可能具有 .ts 文件，因此您需要配置 commonjs 插件以查找 .ts 扩展名。

You can get the "exports is not defined" error if you are importing files with extensions other than .js. It looks like you might have .ts files so you'd need to configure the commonjs plugin to look for .ts extensions.

汇总commonjs插件仅搜索具有 .js的文件文件扩展名默认情况下。乍一看并不明显，但是他们在他们的文档：

The rollup commonjs plugin only searches for files with the .js file extension by default. It's not obvious at first but they mention this in their docs:

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

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

If you're importing files with other extensions then you need to list them in this config.

这篇关于角度AOT&汇总-未捕获的ReferenceError：未定义导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！