Angular 4 Ahead-of-Time - lazyload doesn't work

Question

I have a project with SystemJS. I use NGC and Rollup for AOT compilation. All works fine but lazyload for routing doesn't work. For example, it's my tsconfig-aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "baseUrl": ".",
        "paths": {
            "app/*": [ "../src/app/*" ]
        }
  },
  "typeRoots": [
    "node_modules/@types"
  ],
  "files": [
    "../src/app/app.module.aot.ts"
  ],
  "exclude": [
    "node_modules",
    "typings"
  ],
  "angularCompilerOptions": {
    "genDir": "../",
    "skipMetadataEmit": false,
    "skipTemplateCodegen": false
  }
}

and rollup.config.app.js

'use strict';

import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
    entry: './src/app/app.module.aot.js',
    dest:  './src/dist/app.module.min.js',
    sourceMap: true,
    format: 'iife',
    onwarn: function(warning) {
        // Skip certain warnings
        if ( warning.message.indexOf('\'default\' is not exported by rollup') === -1) { return; }
        if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
        if ( warning.code === 'EVAL' ) { return; }
        console.warn( warning.message );
    },
    plugins: [
        nodeResolve({jsnext: true, module: true}),
        commonjs({
            include: [
                './node_modules/rxjs/**'
            ]
        }),
        uglify()
    ]
}

After running the AOT with roll-up all works fine but when I try to use lazyload for my app it's doesn't work.

const routes: Routes = [
  {
    path: "test/:id",
    loadChildren: "./src/app/app.module#TestModule"
  }
];

The AOT build pass without any errors and after the run the app with AOT I don't see any errors in the dev tools. But also lazy-load doesn't work.

UPD On the JIT compile all works fine with lazy-loading.

Any idea how to fix this issue?

Angular AOT will not work with `Rollup`. Why you're not moving to webpack? — Ritwick Dey, May 13 '18 at 15:10
@RitwickDey I can't be moving the project on web pack because it's very big app with asp.net. Also, AOT with Rollup work fine but lazyload doesn't work. All other stuff looks good. Do you have any ideas how to resolve this issue? — Taras Kovalenko, May 13 '18 at 15:27
As far I know, AOT is not work with `rollup`. You can check this site http://www.dzurico.com/angular-aot-webpack-lazy-loading/ ......... This site is showing how to do the same with Webpack (almost same configuration - just give a try) — Ritwick Dey, May 13 '18 at 15:31
@RitwickDey Interesting, I was having spent more time to the configure the Rollup and AOT (NGC) and it works for me, I hope :) I'll try to move on from System.js to the Webpack. Also, I think someone can know how to do it on the System.js — Taras Kovalenko, May 13 '18 at 15:37

score 1 · Accepted Answer · answered May 13 '18 at 15:45

(Just answering from my comment, if it works - feel free to upvote/accept the answer)

You have to use webpack for AOT & lazy loading. Rollup will not work (at least as of now).

Use @ngtools/webpack to configure AOT+lazy loading.

In webpack.config.js

const ngToolsWebpack = require('@ngtools/webpack');
var webpack = require('webpack');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  entry: './app/main.aot.ts',
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'app.main.js'
  },
  plugins: [
    new ngToolsWebpack.AotPlugin({
      tsConfigPath: './tsconfig.json'
    }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            },
            sourceMap: true
        })
  ],
  module: {
    loaders: [
      { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
      { test: /\.css$/, loader: 'raw-loader' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.ts$/, loader: '@ngtools/webpack' }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
};

In tsconfig.json

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "outDir": "lib",
    "skipLibCheck": true,
    "rootDir": "."
  },
  "angularCompilerOptions": {
    "genDir": "./app/ngfactory",
    "entryModule": "app/app.module#AppModule"
  }
}

Reference: http://www.dzurico.com/angular-aot-webpack-lazy-loading/

Thank you for your answer but I don't use Webpack, my app use System.js with NGC+Rollup and the question in the next *"How resolve the issue the lazyload without moving on the webpack or similar bundler module"*? — Taras Kovalenko, May 13 '18 at 16:08

Angular 4 Ahead-of-Time - lazyload doesn't work

1 Answers1