Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了角度2 AOT和延迟加载而不使用Angular CLI大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用一个非常简单的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编译和延迟加载一起工作?我在GitHub上看到了Angular CLI 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()
    ]
}

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

解决方法

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

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

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

BR Fabian

大佬总结

以上是大佬教程为你收集整理的角度2 AOT和延迟加载而不使用Angular CLI全部内容,希望文章能够帮你解决角度2 AOT和延迟加载而不使用Angular CLI所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。