在延迟加载的路由上创建共享模块

Question

我正在构建一个Angular 11应用程序，并试图创建一个SharedModule。我正在使用惰性加载，并希望避免在惰性加载的路径上多次加载公共模块。我创建了一个共享模块，并将其导入到我的AppModule中。根据我的理解，这个共享模块应该在所有延迟加载的模块中定义，而不需要在其他地方导入。然而，在我的懒惰加载模块中，我收到了一个错误，因为我没有直接导入共享模块。如何全局定义我的ProjectSharedModule？

我有我的共享模块：

@NgModule({
declarations: [ProjectsComponent, TopNavComponent],
imports: [
ChartsModule,
FormsModule,
CommonModule,
RouterModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatTooltipModule,
],
exports: [
ProjectsComponent,
TopNavComponent,
ChartsModule,
FormsModule,
CommonModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatTooltipModule,
],
})
export class ProjectSharedModule {}

这是我的AppModule

@NgModule({
declarations: [AppComponent],
imports: [
ProjectSharedModule, // Shared Module should be defined globally 
BrowserModule,
AppRoutingModule,
HttpClientModule,
FeaturesModule,
LoggerModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthHttpInterceptor,
multi: true,
},
{ provide: LoggerBase, useClass: LoggerService },
],
bootstrap: [AppComponent],
})
export class AppModule {}

以下是延迟加载的模块：

@NgModule({
declarations: [
...
MyComponents
...
],
imports: [
RouterModule,
ProfileRoutingModule,
// Shouldn't need these anymore
// CommonModule,
// FormsModule,
// MatDatepickerModule,
// MatNativeDateModule,
// MatIconModule,
// MatInputModule,
// MatFormFieldModule,
// MatTableModule,
// MatTooltipModule,
// Without including this I get an error
// ProjectSharedModule,
],
})
export class ProfileModule {}

以下是延迟加载模块的路径

{
path: 'pr',
loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule),
canLoad: [AuthorizedUserGuard],
},

同样，我如何在所有懒惰加载的路由中共享我的ProjectSharedModule？

更新

似乎我需要在我的懒惰加载模块中导入我的ProjectSharedModule。根据本文，看起来AppModule导入了缓存的ProjectSharedModule。当懒惰加载的模块尝试导入它时，它会从缓存中检索，以避免在运行时重复模块代码。这要归功于这个答案。

Answer 1

您的SharedModule需要在每个使用共享组件的模块中导入，无论它是否延迟加载。

更新：如果发现ProfileModule只使用SharedModule的几个组件，则可以将它们作为ProfileModule的一部分。您可以做的另一件事是根据SharedModule的功能将其划分为更小的SharedModule，并导入所需的一个。

所以你的profile.module.ts应该是：

@NgModule({
declarations: [
...
MyComponents
...
],
imports: [
RouterModule,
ProfileRoutingModule,
SharedModule
// Shouldn't need these anymore
// CommonModule,
// FormsModule,
// MatDatepickerModule,
// MatNativeDateModule,
// MatIconModule,
// MatInputModule,
// MatFormFieldModule,
// MatTableModule,
// MatTooltipModule,
// Without including this I get an error
// ProjectSharedModule,
],
})
export class ProfileModule {}