角度2 AOT和延迟加载而不使用Angular CLI

Question

我正在使用一个非常简单的Angular 2应用程序,我没有使用Angular CLI(为了这个特定的问题,请不要建议我使用CLI).使用JIT编译器时,站点运行时没有任何问题.急切加载的模块以及延迟加载的模块都完全没问题.

我可以成功运行AOT编译器,然后使用Rollup执行树抖动,如Angular 2文档中所述.执行此操作时,站点运行时没有任何问题,因为急切加载的模块,但在尝试转到急切加载的模块时出现错误.这是错误消息:( GET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found)这是我试图延迟加载的模块)

一个非常基本的问题:

• 当你做AOT和树摇动时,使用延迟加载是否有意义？你还能获得福利吗？

假设上面问题的答案是肯定的,我想知道如何能够将AOT编译和延迟加载一起工作？我已经看到Angular CLI的GitHub问题已经提出了这个问题,看起来已经有了一些解决方案.这假设您使用的是CLI,我不是.我在输出AOT时注意到我的延迟加载模块没有*.ngfactory.ts也没有*.ngsummary.json创建,但仅适用于我急需加载的模块.这可能有意义吗？

作为参考,我为AOT运行的命令ngc -p tsconfig-aot.json具有以下内容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
    }
}

然后我跑去rollup -c rollup-config.js累积以执行树摇动.这是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()
    ]
}

如果我能提供更多信息或更清楚,请告诉我.谢谢!

Answer 1

rollup 尚不支持代码分割。这是一个 github 问题。

您可以使用 webpack 来实现这一点。它支持代码分割、延迟加载和Treeshaking。

当您进行 AOT 和 Tree Shaking 时，使用延迟加载是否有意义？你还能得到福利吗？

为什么不？您仍然可以减少应用程序的启动时间，因为只需加​​载第一个模块。但是，您可以使用正确的预加载策略延迟但自动加载其他加载项。

BR法比安