@ngtools\webpack AOT doesn't work OR freezes at 95% emitting

Question

I've been stuck trying to get AOT working with my Webpack app. (@ngtools/webpack)

Can anyone help me at all?

It appears to work, however, compiler.js is still included in the bundle. Also it is still looking for all of my .html files and getting 404 on all of the component templates.

So as far as I can tell it's not really doing the best parts of the AOT?

Can any shine any light here, I'm stuck!!

Thank you!!

Answer 1

(I won't tell you how long it took me to get this working.) First of all, are you using Angular 4.x or 5.x? If 4.x you need to use the AotPlugin, if 5.x then use the AngularCompilerPlugin. Also if you are using 5.0 then the compiler is probably finding some errors in your templates that weren't a problem before. Those need to be corrected before it will work. It was a long time even before I could see the errors, I think because of issues in my tsconfig.json file. So make sure that is correct, and is being pointed to correctly by your AngularCompilerPlugin options. Some examples have it in your source directory, I found it was simpler to keep it in the root directory (same as webpack.config.js) and refer to it like this in the AngularCompilerPlugin options:

   tsConfigPath: "./tsconfig.ngtools.json",

Here is a link to the possible plugin options

https://www.npmjs.com/package/@ngtools/webpack

and here are the tsconfig options that worked for me:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist.ngtools",
    "baseUrl": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "es2015",
    "listEmittedFiles": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "files": [
    "./src/app/app.module.ts", /* this includes all dependents */
    "src/polyfills.ts",
    "src/main.ts"
  ]
}

Also note that you don't need or want a separate main.aot.ts file when using ngtools, it will automatically adjust the platform-browser-dynamic version to platform-browser at compile time. Also with ngtools you don't need to reference the AppModuleNgFactory component, this is also handled automatically.

I found it less than helpful that ngtools doesn't output intermediate files to the file system, so debugging is more difficult, but once things are working it is nice to not have to deal with the intermediate files.

Good luck!

Answer 2

I was able to make a sample angular5 app build in AOT

https://github.com/tomalex0/angularx-aot-jit

I created a sample angular5 app which generates AOT and JIT, might not be in same structure as yours but works

https://github.com/tomalex0/angularx-aot-jit

This commit difference will give better picture of what all i changed while updating to angular5 https://github.com/tomalex0/angularx-aot-jit/commit/1435fddf1a6336f05e63f30062cb4cd2d0ba771f

tsconfig-aot.json for angular5

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "outDir": "aot",
    "skipLibCheck": true,
    "rootDir": "."
  }
}

1. No longer needs "angularCompilerOptions": {"genDir": "aot" }|
2. in webpack config make entry as entry: './js/ng2/app/main.jit.ts'
3. in webpack const { AngularCompilerPlugin } = require('@ngtools/webpack'); and in plugins as new AngularCompilerPlugin({tsConfigPath: './tsconfig-aot.json', entryModule: ...})