How you should import MDB Angular modules:

In 6.1.0 we have made it possible to import only those modules that you actually use in your application.
Therefore, there may be problems with importing individual modules, when the whole of our library is imported next to them.

There are two ways to use the MDB Angular library.

The first one:
consists in importing the whole library to the main application module (app.module.ts).
This is convenient when writing an application developer version, as you can immediately use all the components that we make available to our users. Its disadvantage is that in the case of the production version of the application, there are also modules installed that you do not use in your project, which can have a negative impact on the performance of the application.

The second one
is to import only those modules that you actually want to use in your application. This has its advantages and disadvantages.
The advantage of this approach is that you can achieve a higher speed of your application. The disadvantage is that if you want to use another component, you have to import its module in the main module of your application (app.module.ts).

MDB Angular Pro (ng-uikit-pro-standard)

Below you will find a brief description of how you should import the MDB Angular Pro modules in your application and how you should not do it.

First way - the good one: 

        
            
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        
        import { MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';
        
        import { AppComponent } from './app.component';
        
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            MDBBootstrapModulesPro.forRoot()
          ],
          providers: [MDBSpinningPreloader],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

Second way - also the good one: 

        
            
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        
        import { DropdownModule, MDBSpinningPreloader } from 'ng-uikit-pro-standard';
        
        import { AppComponent } from './app.component';
        
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            DropdownModule.forRoot()
          ],
          providers: [MDBSpinningPreloader],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

Third way - the wrong way: 

        
            
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        
        import { DropdownModule, MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';
        
        import { AppComponent } from './app.component';
        
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            MDBBootstrapModulesPro.forRoot(),
            DropdownModule.forRoot()
          ],
          providers: [MDBSpinningPreloader],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

The exception to this rule is the ToastModule, which must be imported together with the MDBBootstrapModulesPro module.

MDB Angular Free (angular-bootstrap-md)

Below you will find a brief description of how you should import the MDB Angular Free modules in your application and how you should not do it.

First way - the good one: 

        
            
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        
        import { MDBBootstrapModule } from 'angular-bootstrap-md';
        
        import { AppComponent } from './app.component';
        
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            MDBBootstrapModule.forRoot(),
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

Second way - also the good one: 

        
            
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        
        import { DropdownModule } from 'angular-bootstrap-md';
        
        import { AppComponent } from './app.component';
        
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            DropdownModule.forRoot(),
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

Third way - the wrong way: 

        
            
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      
      import { MDBBootstrapModule, DropdownModule } from 'angular-bootstrap-md';
      
      import { AppComponent } from './app.component';
      
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule,
          MDBBootstrapModule.forRoot(),
          DropdownModule.forRoot(),
        ],
        bootstrap: [AppComponent]
      })
      export class AppModule { }