How to use MDB in child modules? including lazy loading)

Alvipeo,

If you have your's sharedModule, and in this sharedModule exists something like sharedComponent, you have to export this sharedComponent in exports array in your's sharedModule. For me it's working well. You can read more about this here: https://stackoverflow.com/questions/39601784/angular-2-use-component-from-another-module.

So mine app.module.ts looks like this:

import { SharedModule } from './shared/shared.module';

import { BrowserModule } from '@angular/platform-browser';

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

import { ToastModule } from './../../node_modules/ng-mdb-pro/pro/alerts/toast/toast.module';

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

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { SharedComponent } from './shared/shared.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule, BrowserAnimationsModule, MDBBootstrapModules.forRoot(), ToastModule.forRoot(), FormsModule, SharedModule

],

providers: [MDBSpinningPreloader],

bootstrap: [AppComponent],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class AppModule { }

My shared.module.ts looks like this:

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

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

import { SharedComponent } from './shared.component';

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

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

@NgModule({

imports: [

CommonModule, MDBBootstrapModules.forRoot(),

],

providers: [

MDBSpinningPreloader,

],

declarations: [SharedComponent],

exports: [SharedComponent],

})

export class SharedModule { }

And my shared.component.html looks like this:

<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbRippleRadius>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">

<divclass="modal-dialog"role="document">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close pull-right"aria-label="Close" (click)="basicModal.hide()">

<spanaria-hidden="true">×</span>

</button>

<h4class="modal-title w-100"id="myModalLabel">Modal title</h4>

</div>

<divclass="modal-body">

...

</div>

<divclass="modal-footer">

<buttontype="button"class="btn btn-secondary waves-light"aria-label="Close" (click)="basicModal.hide()"mdbRippleRadius>Close</button>

<buttontype="button"class="btn btn-primary relative waves-light"mdbRippleRadius>Save changes</button>

</div>

</div>

</div>

And remember to use your's sharedComponent in your's app.component.html like this: <app-shared></app-shared>

Try to repeat my code in your's project.

Best Regards,

Damian

Damian, I'm trying not to create a shared component. I usually have multiple modules in my angular apps so CLI would create chunks and I can leverage lazy loading.

For example, in my app.module routing:

Start your code here
const routes: Routes = [
 { path: "", component: TheHomepage, pathMatch: "full", data: {} },
 {
 path: "user",
 loadChildren: "./users/users.module#MyUsersModule"
 },
 {
 path: "bloggers",
 loadChildren: "./bloggers/bloggers.module#MyBloggersModule"
 }
];

Now, in Users module I need to import your MDB module to be able to use components. Think of it as those modules are reusable and independent (and loaded lazily). App module knows nothing about other modules and those modules know nothing about App module. ok, tell me how to fix this 'Can't bind to 'buttonClass' since it isn't a known property of 'mdb-tabset'.'. Maybe I can do it myself.