При отложенной загрузке произошла ошибка при использовании модального ngxBoostrap - PullRequest
Новая
       33

При отложенной загрузке произошла ошибка при использовании модального ngxBoostrap

0 голосов
/ 25 декабря 2018

У меня есть основной AppRoutingModule класс, в котором я устанавливаю свои маршруты и добавляю свои appModule: 

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'shopCart', component: ShopCartComponent },
  { path: 'administration', loadChildren: './admin/admin.module#AdminModule' },
  { path: 'productsList', loadChildren: './products/products.module#ProductsModule' },
  { path: 'not-found', component: PageNotFoundComponent, data: { message: 'Page not found!' } },
  { path: '**', redirectTo: '/not-found' }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })

  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В appModule Я добавляю в модуль импорта 

ModalModule.forRoot(),
NgbModule.forRoot(),

И в providers я добавляю NgbActiveModal.Я хочу ленивую загрузку admin.module и в этом модуле у меня есть modal.

Мой admin.module: 

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    AdminRoutingModule,
    NgbModule,
    AlertModule.forRoot()

  ],
  declarations: [
    AdminComponent,
    CategoryComponent,
    ProductModal

  ]
  , entryComponents: [
    CategoryComponent,
    ProductModal
  ]

})
export class AdminModule { }

Все работает хорошо, и что я нажимаю на мой модал Я нажимаю на модал, у меня есть ошибка: 

ERROR Error: No component factory found for CategoryComponent. Did you add it to @NgModule.entryComponents?

Я перешел по этой ссылке ссылка

Хочу отметить, что до загрузки Lazy все работало хорошо.

1 Ответ

0 голосов
/ 25 декабря 2018

Вы должны переместить ваш dynamic components на более высокий уровень, чтобы angular мог найти их, если вы хотите создать их без использования ng-templates

Так что в вашем случае вы добавляете это к своему app.module.ts

    @NgModule({
      declarations: [
        // Other imports....

      ],
      entryComponents: [
        CategoryComponent,
        ProductModal
      ],
      providers: [
           // other providers...
        ],
      bootstrap: [AppComponent],


    })
    export class AppModule { }

Удалите это из admin.module.ts

@NgModule({
  imports: [
    // Other Imports....    
  ],
  declarations: [
    AdminComponent,
    // CategoryComponent, -> Removed
    // ProductModal -> Removed

  ]
  , entryComponents: [
    // CategoryComponent, -> Removed
    // ProductModal -> Removed
  ]

})
export class AdminModule { }

Это должно заставить ваше приложение генерировать модалы.

Вы можете узнать больше о entryComponents здесь

Другое более простое решение

Переместите метод Modal.forRoot() в модуль LazyLoaded admin.module.ts

, чтобы ваш admin.module.ts стал 

@NgModule({
  imports: [
    // Add this, Remove for `app.module.ts`
    ModalModule.forRoot(),

  ],
  declarations: [
    AdminComponent,
    CategoryComponent,
    ProductModal

  ]
  , entryComponents: [
    CategoryComponent,
    ProductModal
  ]

})
export class AdminModule { }
...