问题
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 commandtsc 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: []
}
回答2:
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.
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.
来源:https://stackoverflow.com/questions/43580270/angular-aot-rollup-uncaught-referenceerror-exports-is-not-defined