Angular AOT & Rollup - Could not resolve 'app.module.ngfactory'

Question

I am trying to complete 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 it comes to tree-shaking with rollup part, I bump into this error:

Error: Could not resolve '../aot/app/app.module.ngfactory' from ...\app\main-aot.js
    at Error (native)
    at ...\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:78:21
    at ...\node_modules\resolve\lib\async.js:56:18
    at load (...\node_modules\resolve\lib\async.js:70:43)
    at onex (...\node_modules\resolve\lib\async.js:93:31)
    at ...\node_modules\resolve\lib\async.js:23:47
    at FSReqWrap.oncomplete (fs.js:82:15)

Am I missing something?

@angular: 2.4.4
rollup: 0.41.4

Answer 1

Angular's AOT tutorial seems missing a step; after using ngc, it generates only ts files in aot folder. As the next step, you need to compile these files one more time, to generate the necessary js files.

There are two important notes here:

1. 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.
2. After step 1, all related ts files in your project will be compiled as es2015 modules. If you're using systemjs as a module loader and commonjs modules in your development environment (as in Angular's tutorials), after using rollup, you need to compile your ts files one more time as commonjs modules, in order to avoid issues with systemjs.

Here are the exact steps:

1. Compile your app.module with ngc and tsconfig-aot.json into aot folder as es2015 modules.
2. Compile main-aot.ts files with tsc and tsconfig-compile-aot.json, again as es2015 modules and generate your js files.
3. Pass your entry file (main-aot.js) to rollup. Now it should generate your output file without any errors.
4. When you want to continue to your development with systemjs, compile your app/ts files with tsconfig.json to convert them to commonjs modules again.

---

I have created a demo application that is using these steps:
https://github.com/forCrowd/Labs-Angular-AOTConfiguration

• Install node packages
• Run gulp - default task
• Open index.html for "Development - SystemJS" case
• Open index-aot.html for "Production - AOT & Rollup Tree-shaking" case

Also it contains build-invalid gulp task that skips this second step, to show that it results in having "Could not resolve 'app.module.ngfactory'" error.