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

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

Giovanni De Stefano (zxxz) pro premium priority asked 7 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 7 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 (zxxz) pro premium priority commented 7 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

Add comment

Damian Gemza staff answered 7 years ago

1 0 Best answer

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 (zxxz) pro premium priority commented 7 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 7 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 commented 6 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 commented 6 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 6 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 commented 6 years ago

Ay,

Aleluia, you saved my night !

Thanks a lot !

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: Yes
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Giovanni De Stefano

Pro User Premium support

87Support score
20Questions 2Answers

0Snippets likes 0Snippets