Angular AOT & Rollup - Uncaught ReferenceError: exports is not defined

问题:

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

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 

My code is as below :-

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

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

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

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

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

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()   ] } 

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

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

回答1:

You need to add following code in your master page:

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

文章来源: Angular AOT & Rollup - Uncaught ReferenceError: exports is not defined