[Angular] MDBBootstrapModules.forRoot() for each module?

Topic: [Angular] MDBBootstrapModules.forRoot() for each module?

Giovanni De Stefano priority asked 6 years ago

Hello, I have a question on how to properly setup an Angular project with MDBootstrap Pro. Is it correct to import MDBBootstrapModules.forRoot() for each module that wants to use MDBootstrap Angular components? Something like this:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FooModule,
    BarModule,
    RoutingModule,
    MDBBootstrapModules.forRoot()
  ],
  providers: [
    MDBSpinningPreloader
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {
}

and

@NgModule({
  imports: [
    CommonModule,
    MDBBootstrapModules.forRoot()
  ],
  declarations: [FooComponent]
})
export class FooModule { }

Thanks, zxxz

Damian Gemza staff commented 6 years ago

Dear zxzz, You have to import MDBootstrapModules.forRoot() only in your app.module.ts file. You don't have to import in in every component which you're using. That's described in our 5min-quickstart guide: https://mdbootstrap.com/angular/5min-quickstart Best Regards, Damian

Giovanni De Stefano priority commented 6 years ago

Hello Damian, Thank you for your answer. I have followed the 5min-quickstart but if I copy paste the code for "Double Navigation with fixed SideNav & non-fixed Navbar" directly in app.component.html then the page renders properly. I then added a RoutingModule and a FooModule with one FooPageComponent. Than I moved the html code from app.component.html to foo-page.component.html (the routing part works fine, that's not a problem). Initially I got a bunch of errors that are fixed by adding NO_ERRORS_SCHEMA also to the FooModule. After adding NO_ERRORS_SCHEMA to the FooModule I get a page rendered badly: https://imagebin.ca/v/3vY8DPmbMTF4 So the exact same code renders fine if in app.component.html but it renders badly if in another component in another module. Evidently I am missing something...what is it? Thanks in advance! zxxz

Please insert min. 15 characters.

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

Dear Giovanni, You have to remember, that if you're using another module, and in this module you want to use our components, you have to also import MDB to this module. For example, my SecondModule looks like this:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { CommonModule } from '@angular/common';

import { SecondComponent } from './second/second.component';

import { MDBBootstrapModules } from 'ng-mdb-pro';

import { MDBSpinningPreloader } from 'ng-mdb-pro';

@NgModule({

imports: [

CommonModule,

MDBBootstrapModules.forRoot(),

],

declarations: [SecondComponent],

exports: [SecondComponent],

providers: [MDBSpinningPreloader],

schemas: [NO_ERRORS_SCHEMA]

})

export class SecondModule { }

And in my app.component I'm using my SecondComponent which contains double navbar code. Best Regards, Damian

Giovanni De Stefano priority commented 6 years ago

Hello Damian, So the answer to my initial question is: yes, MDBBootstrapModules.forRoot() has to be imported in each module. Thanks for the support! Cheers, Giovanni

Damian Gemza staff commented 6 years ago

I'm so sorry for this mistake. I did not understand you well. Yes, if you're using more than one module, and in those modules you're using MDB, you have to import MDB in every module which uses it. Best Regards, Damian

gilmourguru free commented 5 years ago

When I apply this approach I get this ERROR:

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

linziyan free commented 5 years ago

his answer is not clear.

MDBBootstrapModules only import at your root module, aka, app.module.ts.

if you import this modules (MDBBootstrapModules) in a submodule, these errors will occurs.

if you want to use some of the module ,such as navmodule, you just import the nav module in your submodule, no matter how many module you used, just import the right module.

the 5mins tutorial said nothing about how to use mdbootstrappro in a submodule. hope this can help

Arkadiusz Idzikowski staff commented 5 years ago

The problem with BrowserModule in lazy loaded module exist in version 7.5.0 and is caused by StickyHeaderModule. The best approach (and workaround for now) would be to import only the modules you need instead of whole MDBBootstrapModulesPro. You can find modules list here:

https://mdbootstrap.com/docs/angular/getting-started/modules/

Nicolas Hug free commented 5 years ago

Ay,

Aleluia, you saved my night !

Thanks a lot !

Add comment