Search code examples
angulartypescriptaot

Unable to create AOT ES5 compatible code using ngc and tsc

I believe I have tried several options before coming here to ask a query. I have an angular2 library that I have AOT compiled using ngc. I am using plain npm scripts, no webpack at the moment. Below is the tsconfig used,

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": ["dom","es2015"],
    "outDir": "tsc-out"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "aot/",
    "app/boot-aot.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot/",
    "strictMetadataEmit" : true
  }
}

Doing ngc results in a folder called "aot" which also has a "node_modules" folder as below

aot folder contents

app
node_modules
 @angular
 @ngbootstrap 
 rxjs

Until now, the factories all look ok but they are ts files. But I intend to do a tsc on this output so I can use these factories in a native ES5 environment. So I figured I could run a tsc on this folder with a different tsconfig file.

This step does not generate the node_modules folder. Due to this some of the generated factory files are incorrect as it still refers to the node_modules folder that was supposed to be generated. For example the app.module.ngfactory.js (inside app folder) that is generated has references like,

var import59 = require("../node_modules/@ng-bootstrap/ng-
bootstrap/tooltip/tooltip.ngfactory");
var import60 = require("../node_modules/@ng-bootstrap/ng-
bootstrap/typeahead/typeahead-window.ngfactory");

Am I goofing up something here? I have tried several different combinations but seems I am missing some information here. Can we expose these aot factories to ES5 given the current behavior of ngc and tsc?

Solution

  • Yes you can expose these aot factories to ES5 given the current behavior of ngc.

    You don't have to run tsc after ngc, as ngc runs tsc for you. You should look at the final results in your outDir (out-tsc) rather than the genDir (aot). And if using Angular 5 you don't even see that aot dir.

    Also recommend to set your "module" parameter to "es2015" rather than "commonjs" and then run rollup to do tree-shaking and final es5 bundling.

    You don't need the exclusions of node_modules/aot, as these needs to be compiled with the final bundle.

    You can see a complete example with ngc and rollup here:

    https://github.com/fintechneo/angular2-templates

    Currently upgraded to Angular 5, but if you look at previous versions you can follow the configuration back to Angular 2.