@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: ...})

Answer 3

If a single file is handled incorrectly OR not loaded at all, you'll get an infinite loop on 95% emitting.

UPDATE:: It appears that there is one area where errors will get swallowed up:

reject(new Error('Child compilation failed:\n' + errorDetails));

That is line 57 of @ngtools\webpack\src\resource_loader.js You'll want to put a breakpoint to debug or output that error details, or you'll be stuck on AOT compiling forever.

Just going to leave this in case someone is stuck in the future, basically if you get stuck in an infinite loop you're probably on the right track..

I finally have something working, there were so many issues along the way..

The main thing that bit me that I didn't understand is, I guess, that for AoT, ALL YOUR FILES have to be loaded into webpack

This is the module.rules config that finally got me running...

// Ahead of Time Compilation
[{ test: /\.ts$/, loader: '@ngtools/webpack', exclude: [/\.(spec)\.ts$/] },
// AoT requires all files to be loaded
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.css$/, loader: 'raw-loader' },
{
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    loader: 'file-loader', options: { name: '[path][name].[ext]' }
}]

I added this loader which basically just puts my images back into the exact same place they exist.. But I guess that causes them to be packaged correctly..

If I do not include a file type (or if there is some sort of error while loading a file see comment below) then I get caught in an infinite loop...

If you run webpack with --progress --profile you will see that it gets stuck on 95% emitting. What's going on behind the scenes is some sort of absolute path vs relative path issue and it gets caught in a loop in mkdirp.

But I guess the trick is for AoT, is to just make sure that you have a loader for EVERY file type that you are using.