Angular 4 提前 - 延迟加载不起作用

Question

我有一个 SystemJS 项目。我使用 NGC 和 Rollup 进行 AOT 编译。一切正常，但用于路由的延迟加载不起作用。例如，这是我的 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
  }
}

和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()
    ]
}

在运行使用 roll-up 连接 AOT 之后一切正常，但是当我尝试为我的应用程序使用 lazyload 时它不起作用。

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

AOT 构建通过且没有任何错误，在运行使用 AOT 的应用程序之后，我在开发工具中没有看到任何错误。但是延迟加载也不起作用。

UPD 在 JIT 编译中，延迟加载一切正常。

知道如何解决这个问题吗？

Answer 1

（只是根据我的评论回答，如果有效 - 请随时 upvote/accept 回答）

您必须使用 webpack 进行 AOT 和延迟加载。 Rollup 将不起作用（至少目前如此）。

使用@ngtools/webpack配置AOT+延迟加载

在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
  }
};

在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"
  }
}

参考：http://www.dzurico.com/angular-aot-webpack-lazy-loading/

Angular 4 提前 - 延迟加载不起作用

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

rollup

lazy-loading

angular-routing

angular2-aot

angular