gpt4 book ai didi

angular - 从 Angular 7 中的编译库延迟加载模块

转载 作者:行者123 更新时间:2023-12-04 11:47:34 25 4
gpt4 key购买 nike

我正在尝试从库中延迟加载 NgModule。我有一个 ng 应用程序,其中包含一些库(项目)。这个库在其他一些项目中被重用。问题是我找不到解决方案,它适用于 jit 和 aot,以及编译/未编译库。

文件结构是这样的

app
-projects
--lib
---(lib files)
-src
--(app files)

AppModule 有路由,看起来像这样
const routes: Routes = [
{
path: 'eager',
children: [
{
path: '',
component: LibComponent // component imported from lib
},
{
path: 'lazy',
loadChildren: 'lib/src/lib/lazy/lazy.module#LazyModule' // module i want to load lazily
}
]
}
];

如果我像这样使用它,则在尝试导航到 jit 中的惰性路由时会出现运行时错误(aot 工作正常): ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function
此评论 https://github.com/angular/angular-cli/issues/9488#issuecomment-370065452建议不要将 LazyModule 包含到任何桶文件中,但如果我从库的 public_api 中排除它,我会收到构建错误:
ERROR in ./projects/lib/src/lib/lazy/lazy.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\projects\lazy_minimal\lazy-minimal\projects\lib\src\lib\lazy\lazy.module.ts is missing from the TypeSc
ript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (C:\projects\lazy_minimal\lazy-minimal\node_modules\@ngtools\webpac
k\src\angular_compiler_plugin.js:752:23)
at plugin.done.then (C:\projects\lazy_minimal\lazy-minimal\node_modules\@ngtools\webpack\src\loader.js:41:31
)
at process._tickCallback (internal/process/next_tick.js:68:7)


有什么方法可以使它对 aot 和 jit 都有效吗?

最佳答案

在 Angular-CLI 中有一个 open issue 关于以延迟加载方式加载 node_modules 中的编译库 here ,它仍然打开。

最后提出的解决方法是:

这个话题很久以前就开了。有了这样的评论,人们很难从最新评论中找到任何信息。但另一方面,我认为大多数人无论如何都不会阅读所有评论。看到此帖子的新用户大多阅读第一条和最新评论,并丢失了中间所说的内容。

因此,由于上述原因(大量评论、隐藏评论、难以报告和通知人们),我锁定此问题以防止此评论随着新评论的出现而丢失。

感谢所有报告并帮助诊断问题并提供解决方法的人。

我们推荐的在 Angular 工作区或节点模块中延迟加载库的方法是使用代理/包装器模块。使用这种方法延迟加载可以在 JIT 和 AOT 模式下工作。还有其他仅在 AOT 模式下工作的解决方案,例如 tsconfig 导入,但为了获得更好的开发体验,我们不鼓励这样做。

下面是推荐方法的示例;

第一 lazy/lazy.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LibModule, LazyComponent } from 'my-lib';

@NgModule({
imports: [
LibModule,
RouterModule.forChild([
{ path: '', component: LazyComponent, pathMatch: 'full' }
])
]
})
export class LazyModule { }

然后 app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
],
imports: [
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
]),
],
bootstrap: [AppComponent]
})
export class AppModule { }

1 月 10 日与合作者的 Angular 锁定和有限对话

关于angular - 从 Angular 7 中的编译库延迟加载模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55647989/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com