CODEWITHSUNDEEP
angularangular6ngx-bootstrapngx-bootstrap-modal
th1rdey3
th1rdey3

Reputation: 4358

ngx-bootstrap Modal Component not found even after adding to entry component

Recently I have converted an ASP.NET Core 2.0 Angular app to ASP.NET Core 2.1 (later one uses angular/cli app). In the previous version I had some modal components built with ngx-bootstrap which were working correctly. But after conversion those components stopped working and started throwing this error -

No component factory found for {component}. Did you add it to @NgModule.entryComponents?

I have added following to my app.module.ts file -

@NgModule({
    imports: [
        ModalModule.forRoot(),
        MySubModule
    ],
    entryComponents: [
        MyModalComponent
    ]
})

In my MySubModule -

@NgModule({
    declarations: [
        MyModalComponent
    ],
    imports: [
        ModalModule.forRoot()
    ]
    exports: [
        MyModalComponent
    ]
})

Even though I have defined my entry component it's throwing this error. Can anyone suggest any solution?

Upvotes: 1

Views: 2671

Answers (2)

th1rdey3
th1rdey3

Reputation: 4358

It was actually a silly problem. I was only looking at my code but the problem was caused by some files that were in ClientApp/dist directory. So the application was pulling those files instead of picking up the ng serve files. So, any changes I was making to my files were not getting picked up. Deleting everything from dist folder fixed the issue.

Upvotes: 1

Lia
Lia

Reputation: 11982

you are using modal in your MyModalComponent and you use MySubModule as module for it, so you should add import ModalModule to your MySubModule and declare your MySubModule in app.module.ts.

In MySubModule:

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
    declarations: [
        MyModalComponent
    ],
    imports: [
        ModalModule.forRoot()
    ]
    exports: [
        MyModalComponent
    ]
})
export class MySubModule { }

in your app.module.ts:

@NgModule({
    imports: [
        MySubModule
    ]
})

export class AppModule { }

and its better to use ngbootstrap modal

Upvotes: 2

Related Questions