Angular 2 AOT and lazy loading without using Angular CLI

Question

I am working with a very simple Angular 2 application, and I am not using the Angular CLI (for the sake of this specific question, please do not suggest that I use the CLI). When using the JIT compiler the site runs without any issues. Eagerly loaded modules and well as lazy loaded modules are totally fine.

I can run the AOT compiler successfully and then use Rollup to perform tree shaking, as outlined in the Angular 2 documentation. When doing this the site runs without any issues for eagerly loaded modules, but I get an error when trying to go to modules that are eagerly loaded. Here is the error message: GET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found) (that is the module I am trying to lazy load)

A very basic question to start:

• Does it even make sense to use lazy loading when you are doing AOT and tree shaking? Do you still get benefits?

Assuming the answer to the question above is yes, I am wondering how I might be able to get AOT compilation and lazy loading working together? I have seen on the GitHub issues for the Angular CLI that this question has been raised, and it looks like some solution was put in place. This assumes you are using the CLI, which I am not. I did notice in the output from when I ran AOT that there was no *.ngfactory.ts nor *.ngsummary.json created for my lazy loaded modules, but only for my eagerly loaded modules. Which maybe makes sense?

For reference, the command I ran for AOT is ngc -p tsconfig-aot.json with the following tsconfig-aot.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [
            "node_modules/@types/"
        ]
    },
    "files": [
        "app/app.module.ts",
        "app/main-aot.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit": true
    }
}

Then I ran rollup -c rollup-config.js for rollup to perform tree shaking. Here is the rollup-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'

//paths are relative to the execution path
export default {
    entry: 'app/main-aot.js',
    dest: 'aot/dist/build.js', // output a single application bundle
    sourceMap: true,
    sourceMapFile: 'aot/dist/build.js.map',
    format: 'iife',
    plugins: [
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            include: ['node_modules/rxjs/**']
        }),
        uglify()
    ]
}

Please let me know if I can provide more information or be more clear. Thank you!

Answer 1

rollup does not support code splitting yet. Here is a github issue for that.

You could achieve this with using webpack. It supports code splitting and lazy loading and Treeshaking.

Does it even make sense to use lazy loading when you are doing AOT and tree shaking? Do you still get benefits?

Why not? You still decrease the start time for you application because the first module has to be loaded only. However you can load the other ones lazy but automatically with the correct Preloadingstrategy.

BR Fabian