Ngx-bootstrap: template parse error with ng2-bootstrap/collapse

[exedor]

Ok, I have to admin I'm getting brain-^#@&*ed by the combination of angular 2 and ng2-bootstrap.

Thank you for your work on this great project! I'm using angular 2.3.1 and ng2-bootstrap 1.1.16-9.

I'm trying to get a navbar collapse working in a lazy loaded feature module. I've seen the example here:
https://github.com/mylisabox/lisa-ui/blob/master/src/app/layout/header/header.component.html

I am getting the following error:

"Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'collapse' since it isn't a known property of 'div'. ("se navbar-collapse" (collapsed)="collapsed($event)"

I thought that importing CollapseModule in the app module and then calling CollapseModule.forRoot() in the app module imports was enough to make it available throughout the application but the only way I can eliminate the error above is to also import CollapseModule inside my feature module called admin.module.ts AND call CollapseModule.forRoot() in that module and every other feature module where it is used.

Is that the proper way to do this? Even if it was in a "shared" module, that module would still be calling forRoot() every time it gets imported, wouldn't it?

The angular documentation goes out of their way to emphasize designing modules so that forRoot is only called once in the app root module. Is this right? Do all modules importing ng2-bootstrap modules need to both import AND call the .forRoot() method on them even thought it isn't in the root module?

[valorkin]

I know your pain,
so in two words:

• you should call .forRoot() only in root module (it will set up configs and service providers_
• any other can include module,
• or you can import and export it in shared module like here

if it doesn't help, join slack and drop me a note, ok?

[exedor]

When I call .forRoot in root module, even if I import TabsModule and CollapseModule in feature modules, I still get the error above. The only way I have been able to get around that is to call .forRoot in my feature module as well OR do as you suggest and import, as well as export using a shared module.

But doesn't calling .forRoot() in a shared module execute it every time a different feature module imports it? I thought that is what angular2 authors are calling a BAD thing as it introduces memory links and attempts to create multiple instances of singleton services, etc...

[valorkin]

Can you point me to modules you are are speaking about and routing definition

[exedor]

For anyone else reading this, the issue was due to the separate dependency injection tree that angular2 gives lazy loaded modules. So, moral of the story is eager load all your application modules (not a good option), use a shared module and call .forRoot() multiple times, which apparently in ng2-bootstraps case is not a bad thing due to it's current implementation, or carefully ensure you are calling .forRoot in your root module and in each lazy loaded module.

Thank you to valorkin for his help and time in discussion.

[resting]

@exedor I have imported CollapseModule to my app.module.ts.

  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    SharedPipeModule,
    LayoutModule,
    ToastModule.forRoot(),
    CollapseModule.forRoot(),
  ],

Is that not enough? Do I still need to import to every feature module that uses it?
Getting the error Can't bind to 'collapse' since it isn't a known property of 'div'.

[valorkin]

@resting nope, please ref this article https://angular.io/guide/ngmodule
in general this is very common issue,

1. with .forRoor in app module
2. and import to lazy\child modules without .forRoot where collapse is used

[resting]

@valorkin Got it, thanks. Had imported it to my child module and it's working fine.

[sachindivakar2]

@valorkin can you explain a bit further please

[valorkin]

@sachindivakar2 with angular v6 + I will be able to remove this forRoot thing at all
just need to find free time :cry: