Question

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

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

一个非常基本的问题：

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

假设上面问题的答案是肯定的，我想知道如何能够将AOT编译和延迟加载一起工作？我已经在Angular CLI的GitHub问题上看到了this question has been raised, and it looks like some solution was put in place。这假设您使用的是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

汇总不支持代码拆分。 Here是一个github问题。

您可以使用webpack实现此目的。它支持代码分割和延迟加载以及Treeshaking。

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

为什么不呢？您仍然减少了应用程序的开始时间，因为只需要加载第一个模块。但是你可以使用正确的Preloadingstrategy来加载其他懒惰但是自动加载。

BR Fabian

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

1 个答案: