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

旧城冷巷雨未停 提交于 2019-12-23 17:46:12

问题


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: []
}



回答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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!