Issues with Double Navigation, Material Core Theme and [WDS]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { MDBBootstrapModule } from '../../mdb-angular-pro/typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from '../../mdb-angular-pro/typescripts/angular-bootstrap-md/pro';
import { AgmCoreModule } from '../../mdb-angular-pro/typescripts/angular-bootstrap-md/free/angular2-google-maps/ts/core';

import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes';
import { DoubleNavbarModule } from '../../mdb-angular-pro/typescripts/angular-bootstrap-md/pro/doubleNavigation';
import { SidenavModule } from '../../mdb-angular-pro/typescripts/angular-bootstrap-md/pro/sidenav';

//System Imports
/* MY SYSTEMS COMPONENTS */

@NgModule({
  declarations: [
    AppComponent,
    /* MY SYSTEMS COMPONENTS */
  ],
  imports: [
    BrowserModule,
    AppRoutes,
    DoubleNavbarModule, SidenavModule,
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModulePro.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'api_key_google_maps'
    })
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!--Double navigation-->
<DoubleNavbar [fixedSidenav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
    <!-- Sidebar navigation -->
    <SideNav>
        <li>
            <div class="logo-wrapper waves-light">
                <a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
            </div>
        </li>

        <!--Social-->
        <li>
            <ul class="social">
                <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
                <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
                <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
            </ul>
        </li>
        <!--/Social-->
        <!--Search Form-->
        <li>
            <form class="search-form" role="search">
                <div class="form-group waves-light">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
            </form>
        </li>
        <!--/.Search Form-->
        <!-- Side navigation links -->
        <li>
            <ul class="collapsible collapsible-accordion">
                <squeezebox [multiple]="false" aria-multiselectable="false">
                    <sb-item>
                        <sb-item-head><i class="fa fa-chevron-right"></i> Submit blog</sb-item-head>
                        <sb-item-body>
                            <ul>
                                <li><a href="#" class="waves-effect">Submit listing</a></li>
                                <li><a href="#" class="waves-effect">Registration form</a></li>
                            </ul>
                        </sb-item-body>
                    </sb-item>
                    <sb-item>
                        <sb-item-head><i class="fa fa-hand-pointer-o"></i> Instruction</sb-item-head>
                        <sb-item-body>
                            <ul>
                                <li><a href="#" class="waves-effect">For bloggers</a></li>
                                <li><a href="#" class="waves-effect">For authors</a></li>
                            </ul>
                        </sb-item-body>
                    </sb-item>
                    <sb-item>
                        <sb-item-head><i class="fa fa-eye"></i> About</sb-item-head>
                        <sb-item-body>
                            <ul>
                                <li><a href="#" class="waves-effect">Introduction</a></li>
                                <li><a href="#" class="waves-effect">Monthly meetings</a></li>
                            </ul>
                        </sb-item-body>
                    </sb-item>
                    <sb-item>
                        <sb-item-head><i class="fa fa-envelope-o"></i> Contact me</sb-item-head>
                        <sb-item-body>
                            <ul>
                                <li><a href="#" class="waves-effect">FAQ</a></li>
                                <li><a href="#" class="waves-effect">Write a message</a></li>
                            </ul>
                        </sb-item-body>
                    </sb-item>
                </squeezebox>
            </ul>
        </li>
        <!--/. Side navigation links -->
    </SideNav>
    <breadcrumb>
        <p>Breadcrumb or page title</p>
    </breadcrumb>
    <links>
        <!-- SideNav slide-out button -->
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
        </li>
        <li class="nav-item dropdown btn-group" dropdown>
            <a dropdownToggle ripple-radius type="button" class="nav-link dropdown-toggle">
                Dropdown
            </a>
            <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="divider dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
    </links>
    <!-- /.Navbar -->
</DoubleNavbar>
<!--/.Double navigation-->
<!--Main layout-->
<main>
    <div class="container-fluid">
        <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
        <br>
        <h5>1. Fixed side menu, hidden on small devices</h5>
        <h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
        <p><strong>Note: </strong>To make your Navbar fixed on large screens and non-fixed on mobile, add <code>.mobile-nofixed</code> class to your Navbar</p>
        <div style="height: 2000px"></div>
    </div>
</main>
<!--/Main layout-->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hco</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body class="fixed-sn mdb-skin">
  <main>
    <div class="container-fluid">
      <app-root>
        <div class="text-center pt-5">
          <div class="loader">
            <i class="fa fa-spinner fa-3x animated tada infinite" aria-hidden="true"></i>
          </div>
          <h4 class="pt-1">Carregando</h4>
        </div>
      </app-root>
    </div>
  </main>  
</body>
</html>