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

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

Using the ngc part works and creates the aot folder. However, when I run the application, I get the following error

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

      

My code looks like this: -

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 running node_modules /. bin / ngc -p tsconfig-aot.json aot folder generated successfully.

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 links that "You have to compile these tc files as es2015 modules in order to benefit from the 'shake tree'. This means there must be another config file (TSconfig compilation AOT.json), which only points to the 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. When compiling, I get js files I ran the command
 tsc src/main.ts

cumulative-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 ran the command below node_modules /. bin / rollup -c rollup-config.js

and then when I execute npm run lite, I get an error.

+3


source to share


1 answer


You need to add the following code on the main page:



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

      

+1


source







All Articles