Topic: Issues with Double Navigation, Material Core Theme and "[WDS] Disconnected!"
Hi,
I'm having some issues trying to get Double Navigation to work. I went through some other topics about Double Navigation but none of them worked for me and I don't know if it is due to the "Could not find Angular Material core theme" error I'm getting. Here follows a image of what I see.
Is this error due to the "core theme" error? How can I solve this?
Is this error due to the "core theme" error? How can I solve this?
Add comment
Thanks Magdalena for the support. I downloaded the new version and decided to start a new project from it, instead of updating the one I had. It is working now.
Raphael,
you should download pro version one more time - there were few changes and bugs fixes in 4.1.0 version and I hope that everything will be fine from now on.
1. Did you download the new version of mdb-angular?
Yes, I'm using mdb-angular-pro-4.1.0.
2. Did you exactly copy and paste the code from docs?
Yes, I did.
Here's the code:
app.module.ts
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>
It should work properly from what I see. That warning isn't connected to it and we will soon remove it.
1. Did you download the new version of mdb-angular?
2. Did you exactly copy and paste the code from docs?
3. Maybe there is a misprint in your code?
If none of this help, please provide me your code so I can check exactly what you have.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No