Как обеспечить перехватчик для всех модулей в Angular за один раз? - PullRequest
Новая
       22

Как обеспечить перехватчик для всех модулей в Angular за один раз?

0 голосов
/ 19 марта 2019

Я использую Angular и использую ngx-admin для разработки веб-сайта.

Он имеет модуль с именем ThemeModule для управления общедоступными модулями, такими как Nebular , а также компонентами компоновки и базовыми модулями, такими как CommonModule, FormsModule, ReactiveFormsModule.ThemeModule должен быть импортирован в другие модули, как показано ниже 

  @NgModule({
    imports: [
      AdminRoutingModule,
      ThemeModule
    ]
  })
  export class AdminModule {
  }

Вот моя проблема, что у меня есть AppInterceptor, это что-то вроде HttpInterceptor.Но я должен предоставить это в каждом модуле. 

  const NB_THEME_PROVIDERS = [
    NgxMdModule.forRoot().providers,
    ...NbThemeModule.forRoot({ name: 'cosmic' }, [COSMIC_THEME]).providers,
    ...NbSidebarModule.forRoot().providers,
    ...NbMenuModule.forRoot().providers,
    ...NbDatepickerModule.forRoot().providers,
    ...NbDialogModule.forRoot().providers, // attention here, I will mention it later
    ...NbWindowModule.forRoot().providers,
    ...NbToastrModule.forRoot().providers
  ];

  @NgModule({
    imports: [...BASE_MODULES, ...NB_MODULES],
    exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS],
    declarations: [...COMPONENTS],
  })
  export class ThemeModule {
    static forRoot(): ModuleWithProviders {
      return <ModuleWithProviders>{
        ngModule: ThemeModule,
        providers: [
          httpInterceptorProviders, // global interceptor, it from another file: export const httpInterceptorProviders = [{ provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }];
          ...NB_THEME_PROVIDERS
        ],
      };
    }
  }

И я импортирую этот модуль в несколько модулей, как показано ниже.

Для UserModule

  @NgModule({
    imports: [
      UserRoutingModule,
      ThemeModule,
    ],
    declarations: [
      ...userRoutedComponents
    ],
    // As you can see, it works for me without providing interceptor
  })
  export class UserModule { }

Для AuthModule

  @NgModule({
    imports: [
      AuthRoutingModule,
      ThemeModule,
    ],
    providers: [
      httpInterceptorProviders, // for this module, I have to provide that, otherwise it didn't work for me
      ...NbDialogModule.forRoot().providers,
    ]
  })
  export class AuthModule { }

На самом деле у меня есть другие модули с именами VisitModule и AdminModule, проблема их такая же, как AuthModule.

Короче говоря, все модулиимпорт ThemeModule, однако работает только UserModule.Мой код app-routing, как показано ниже, я думаю, вы можете сказать, что модули, которые я упомянул, одного уровня. 

  const routes: Routes = [
    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', canActivateChild: [AdminGuard] },
    { path: 'user', loadChildren: 'app/user/user.module#UserModule', canActivateChild: [UserGuard] },
    { path: 'auth', loadChildren: 'app/auth/auth.module#AuthModule', canActivateChild: [AuthGuard] },
    { path: 'visit', loadChildren: 'app/visit/visit.module#VisitModule' },
    { path: '', redirectTo: 'admin', pathMatch: 'full' },
    { path: '**', redirectTo: 'visit' },
  ];

  @NgModule({
    imports: [
      RouterModule.forRoot(routes),
    ],
    exports: [RouterModule],
    providers: [
      AdminGuard,
      AuthGuard,
      UserGuard,
      AppGlobalService,
    ],
  })
  export class AppRoutingModule {
  }

На самом деле, количество проблем больше, чем в других модулях, у меня естьдочерний компонент, и я добавляю его в declarations и entryComponents, но консоль показывает

Не найдена фабрика компонентов для AppContrastComponent.Вы добавили его в @ NgModule.entryComponents?

Я почти уверен, что сделал это!Затем я добавляю другой провайдер, чтобы он работал. 

  @NgModule({
    imports: [
      AuthRoutingModule,
      ThemeModule,
      NbAuthModule.forRoot(),
      NgxMdModule.forRoot(),
    ],
    declarations: [
      ...authRoutedComponents,
      ...CHILD_COMPONENT,
    ],
    entryComponents: [
      ...CHILD_COMPONENT,
    ],
    providers: [
      httpInterceptorProviders,
      ...NbDialogModule.forRoot().providers // this module belongs to Nebular, and I have return that in ThemeModule
    ]
  })
  export class AuthModule { }

Итак, как мне это исправить?И я думаю, что я сбит с толку насчет метода forRoot(), кто может объяснить мне его функцию?

Я проект с открытым исходным кодом, если вам нужна дополнительная информация, вы можете посетить мой репозиторий мой репозиторий

...