加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 07:15:26 所属栏目:安全 来源:网络整理
导读:我正在使用一个非常简单的Angular 2应用程序,我没有使用Angular CLI(为了这个特定的问题,请不要建议我使用CLI).使用JIT编译器时,站点运行时没有任何问题.急切加载的模块以及延迟加载的模块都完全没问题. 我可以成功运行AOT编译器,然后使用Rollup执行树摇动,
我正在使用一个非常简单的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.

Does it even make sense to use lazy loading when you are doing AOT and tree shaking? Do you still get benefits?

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

BR Fabian

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读