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

Question

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?

Answer 1

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.

Answer 2

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