LayoutModule是导出的模块名称

Question

我有一个需要公开提供程序的延迟加载模块，因此我使用forRoot约定并返回以下代码：

@NgModule({
  imports: [RouterModule.forChild([
    {path: "", component: LazyComponent},
  ])],
  declarations: [LazyComponent],
})
export class LazyModule {
  static forRoot() {
    return {
      ngModule: LazyModule,
      providers: [provider]
    };
  }
}

问题是当我在我的app模块中调用forRoot时，延迟加载不再起作用。（我在控制台中看不到单独的块）

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LazyModule.forRoot() <======== this stops the lazy load module
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

从我学到的东西应该只是让提供者单身，为什么它不起作用？

Answer 1

我遇到了类似的问题，我不得不延迟加载具有某些配置的模块。因此，我想出了这个临时解决方案。

惰性模块

    @NgModule({
          imports: [
             RouterModule.forChild([
              {path: "", component: LazyComponent},
             ])],
          declarations: [LazyComponent],
    })
    export class LazyModule {
       // considering the function only handle providers 
       static setDynamicProviders(provider?: any) {
            if(LazyModule && LazyModule.__annotations__ && LazyModule.__annotations__[0]){
            LazyModule.__annotations__[0].providers.push(provider);               
          }
            return LazyModule;
       }
   }

父模块

const someService = {
  provide: 'SOME_TOKEN',
  useFactory: (dependecy1) => (//dome something with dependency1)
  deps: [SOME_DEPENDENCY_TOKEN]
}

@NgModule({
 imports: [
    RouterModule.forRoot([
        path: 'lazy',
        loadChildren: ()=>(import('*your path to lazy module*').then(ref => ref.LazyModule.setDynamicProvider(someService)))
    ])
  ]
})

因此，我只是在修改@NgModule装饰器创建的注释。在此阶段，Angular不支持通过静态方法返回ModuleWithProviders的延迟加载。

Answer 2

在LazyModule导入数组中导入AppModule时，它不再是“懒惰”了。只应在专用RoutingModule中引用惰性模块。

因此，如果我理解正确，您希望在LazyModules之间共享服务吗？

如果是，请从LazyModule移除AppModule并创建一个SharedModule并移动您想要在SharedModule中的providers数组内共享的服务。使用AppModule导入forRoot中的SharedModule，并在LazyModules

中导入SharedModule而不是forRoot

Answer 3

在我们定义模块时尝试以下代码是Lazy RouterModule.forChild：

@NgModule({
  imports: [RouterModule.forChild([
    {path: "", component: LazyComponent},
  ])],
  declarations: [LazyComponent],
})
export class LazyModule { }

但是当我们加载父模块时，请尝试以下代码：

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
     {
         path: '',
         loadChildren: './layout/layout.module#LayoutModule',
         canActivate: [AuthGuard]
     }
    ]) <======== right way to load lazy module
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

注意：FullPath就像'./moduleFolder/lazy.module#LayoutModule'

LayoutModule是导出的模块名称

请告诉我

Answer 4

截至目前，无法在将延迟加载的模块中执行forRoot（或此类的任何其他配置静态方法）。这里的问题在于，这种方法返回一个ModuleWithProviders，而loadChildren需要一个NgModuleFactory。

调用forRoot

4 个答案:

LayoutModule是导出的模块名称