在延迟加载的模块中使用角度组件

*发表于 2022-5-3 10:53:01* · 发表于 2022-5-3 10:53:01

问题
我想在我的应用程序的几个部分中使用角度组件，包括延迟加载模块中的组件。我不知道如何声明组件以便在惰性模块中使用它。我将向您展示不同文件的一些相关部分：

应用程序模块.ts

import { FpgTimeComponent } from './fpgTime/fpg-time.component';
@NgModule({
declarations: [
AppComponent,
(...)
FpgTimeComponent
应用程序路由.ts
const appRoutes: Routes = [
{ path: '', redirectTo: 'customer', pathMatch: 'full' },
{
path: 'customer',
component: CustomerComponent
},
{
path: 'lazy',
loadChildren: 'app/lazy/lazy.module#LazyModule'
}
];
惰性模块.ts
import { FpgTimeComponent } from '../fpgTime/fpg-time.component';
import { LazyComponent } from './lazy.component';
import { routing } from './lazy.routing';
@NgModule({
imports: [routing],
declarations: [
LazyComponent,
FpgTimeComponent
]
})

复制代码

应用程序加载，但是当我去延迟路由时，它会引发以下错误：

我不会在任何地方导入 LazyModule，因为它是延迟加载的。那么，如何声明组件 FpgTimeComponent 以便能够在惰性模块（以及非惰性组件）中使用它？

先感谢您，

回答
FpgTimeComponent 不是要加载的惰性模块文件的一部分，因此您不能这样做。考虑一下您正在尝试将一个组件导入一个对它一无所知的惰性模块中，因为它没有在该模块中定义，也没有在您在 LazyModule 中导入的任何其他模块中定义。那么它将从哪里获取组件呢？

将 FpgTimeComponent 添加到 SharedModule 并在 SharedModule 中导入 LazyModule ，或者将 FpgTimeComponent 移动到 LazyModule 中。一旦你做了其中之一，它应该可以工作。

前者可能是更好的方法，因为我可以保证，随着您继续开发，您将继续遇到与其他组件/其他惰性模块相同的错误。如果你在多个地方使用组件，它们应该按照角度最佳实践的定义在 SharedModule 中，并且应该在所有惰性模块中导入 SharedModule。

这是一个例子。

共享模块：

import { FpgTimeComponent } from './some/path';
@NgModule({
declarations: [
FpgTimeComponent
],
exports: [
FpgTimeComponent
]
})
酶模块：
import { SharedModule } from '../shared/shared.module';
import { LazyComponent } from './lazy.component';
import { routing } from './lazy.routing';
@NgModule({
imports: [
routing,
SharedModule
],
declarations: [
LazyComponent
]
})

复制代码

[软件设计/软件工程] 在延迟加载的模块中使用角度组件

相关内容