Topic: Angular 2 DoubleNavbarModule not working?
I was following along with the Tutorial code for implementing the DoubleNavBar and pretty much have it set up how i want but am I getting these errors. Now i am still kind of a newbie with Angular but looking at the DoubleNavBar component, it looks like the the inputs don't have @Input decorators. Not sure if thats the issue or not. Also just a not that the SideBar module is imported by the AppModule which isn't shown below.
My sidebar Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SidebarComponent } from './sidebar.component';
import { AuthService } from '../shared/services/auth.service';
import { DoubleNavbarModule } from '../angular-bootstrap-md/pro/doubleNavigation';
import { SidenavModule } from '../angular-bootstrap-md/pro/sidenav';
@NgModule({
imports: [RouterModule, CommonModule, DoubleNavbarModule, SidenavModule],
declarations: [SidebarComponent],
exports: [SidebarComponent],
providers: [AuthService]
})
export class SidebarModule {}
import { Component, OnInit } from '@angular/core';
import { ROUTES } from './sidebar-routes.config';
import { MenuType } from './sidebar.metadata';
import { AuthService } from '../shared/services/auth.service';
import { Location } from '@angular/common';
@Component({
moduleId: module.id,
selector: 'app-sidebar-cmp',
templateUrl: 'sidebar.component.html',
})
export class SidebarComponent implements OnInit {
public menuItems: any[];
public location: Location;
constructor(location: Location, private _auth: AuthService) {
this.location = location;
}
ngOnInit() {
this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND);
}
getTitle() {
let titlee = this.location.prepareExternalUrl(this.location.path());
if (titlee.charAt(0) === '#') {
titlee = titlee.slice(2);
}
for (let item = 0; item < this.menuItems.length; item++) {
if (this.menuItems[item].path === titlee) {
return this.menuItems[item].title;
}
}
return 'Dashboard';
}
getPath() {
return this.location.prepareExternalUrl(this.location.path());
}
logout() {
this._auth.logout();
}
}
<DoubleNavBar [fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
<SideNav>
<li>
<div class="logo-wrapper waves-light">
<a routerLink="dashboard"><img src="../../assets/img/angular2-logo.png" class="img-fluid flex-center"></a>
</div>
</li>
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<li>
<ul class="collapsible collapsible-accordion">
<squeezebox [multiple]="false" aria-multiselectable="false">
<!-- ORDERS -->
<sb-item>
<sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head>
<sb-item-body>
<ul>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[1].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[1].title}}</span>
</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[1].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[2].title}}</span>
</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[2].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[3].title}}</span>
</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[3].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[4].title}}</span>
</a>
</li>
</ul>
</sb-item-body>
</sb-item>
<!-- PRODUCTS -->
<sb-item>
<sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-head>
<sb-item-body>
<ul>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[5].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[5].title}}</span>
</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[6].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[6].title}}</span>
</a>
</li>
</ul>
</sb-item-body>
</sb-item>
<!-- REGIONS -->
<sb-item>
<sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
<sb-item-body>
<ul>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[7].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[7].title}}</span>
</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[menuItems[7].path]" class="waves-effect">
<span class="sidebar-normal">{{menuItems[7].title}}</span>
</a>
</li>
</ul>
</sb-item-body>
</sb-item>
</squeezebox>
</ul>
</li>
</SideNav>
<breadcrumb>
<p><a class="navbar-brand" href="{{getPath()}}"> {{getTitle()}} </a></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" href="#" (click)="logout()">
<i class="fa fa-user"></i>
<span class="hidden-sm-down">Profile</span>
</a>
</li>
</links>
</DoubleNavBar>
Uncaught Error: Template parse errors:
Can't bind to 'fixedSideNav' since it isn't a known property of 'DoubleNavBar'. ("<DoubleNavBar [ERROR ->][fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true""): ng:///SidebarModule/SidebarComponent.html@0:14
Can't bind to 'navbarClass' since it isn't a known property of 'DoubleNavBar'. ("<DoubleNavBar [fixedSideNav]="true" [ERROR ->][navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
<SideNav>
<li>
"): ng:///SidebarModule/SidebarComponent.html@0:36
Can't bind to 'scrolling' since it isn't a known property of 'DoubleNavBar'. ("<DoubleNavBar [fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [ERROR ->][scrolling]="true">
<SideNav>
<li>
"): ng:///SidebarModule/SidebarComponent.html@0:97
Can't bind to 'multiple' since it isn't a known property of 'squeezebox'. ("
<li>
<ul class="collapsible collapsible-accordion">
<squeezebox [ERROR ->][multiple]="false" aria-multiselectable="false">
<!-- ORDERS -->
"): ng:///SidebarModule/SidebarComponent.html@16:16
'sb-item-head' is not a known element:
1. If 'sb-item-head' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-head' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<!-- ORDERS -->
<sb-item>
[ERROR ->]<sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head>
<sb-item"): ng:///SidebarModule/SidebarComponent.html@20:24
'sb-item-body' is not a known element:
1. If 'sb-item-body' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head>
[ERROR ->]<sb-item-body>
<ul>
<li routerLinkActive="active">
"): ng:///SidebarModule/SidebarComponent.html@21:24
'sb-item' is not a known element:
1. If 'sb-item' is an Angular component, then verify that it is part of this module.
2. If 'sb-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<!-- ORDERS -->
[ERROR ->]<sb-item>
<sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head"): ng:///SidebarModule/SidebarComponent.html@19:5
'sb-item-head' is not a known element:
1. If 'sb-item-head' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-head' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<!-- PRODUCTS -->
<sb-item>
[ERROR ->]<sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-head>
<sb-"): ng:///SidebarModule/SidebarComponent.html@49:24
'sb-item-body' is not a known element:
1. If 'sb-item-body' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-head>
[ERROR ->]<sb-item-body>
<ul>
<li routerLinkActive="active">
"): ng:///SidebarModule/SidebarComponent.html@50:24
'sb-item' is not a known element:
1. If 'sb-item' is an Angular component, then verify that it is part of this module.
2. If 'sb-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<!-- PRODUCTS -->
[ERROR ->]<sb-item>
<sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-"): ng:///SidebarModule/SidebarComponent.html@48:5
'sb-item-head' is not a known element:
1. If 'sb-item-head' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-head' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<!-- REGIONS -->
<sb-item>
[ERROR ->]<sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
<sb-item-body>
"): ng:///SidebarModule/SidebarComponent.html@68:24
'sb-item-body' is not a known element:
1. If 'sb-item-body' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
[ERROR ->]<sb-item-body>
<ul>
<li routerLinkActive="active">
"): ng:///SidebarModule/SidebarComponent.html@69:24
'sb-item' is not a known element:
1. If 'sb-item' is an Angular component, then verify that it is part of this module.
2. If 'sb-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<!-- REGIONS -->
[ERROR ->]<sb-item>
<sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
"): ng:///SidebarModule/SidebarComponent.html@67:5
'squeezebox' is not a known element:
1. If 'squeezebox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<li>
<ul class="collapsible collapsible-accordion">
[ERROR ->]<squeezebox [multiple]="false" aria-multiselectable="false">
<!-- ORDERS -->
"): ng:///SidebarModule/SidebarComponent.html@16:4
'SideNav' is not a known element:
1. If 'SideNav' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("edSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
[ERROR ->]<SideNav>
<li>
<div class="logo-wrapper waves-light">
"): ng:///SidebarModule/SidebarComponent.html@1:1
'breadcrumb' is not a known element:
1. If 'breadcrumb' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</li>
</SideNav>
[ERROR ->]<breadcrumb>
<p><a class="navbar-brand" href="{{getPath()}}"> {{getTitle()}} </a></p>
</b"): ng:///SidebarModule/SidebarComponent.html@88:2
'links' is not a known element:
1. If 'links' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <p><a class="navbar-brand" href="{{getPath()}}"> {{getTitle()}} </a></p>
</breadcrumb>
[ERROR ->]<links>
<!-- SideNav slide-out button -->
<li class="nav-item">
"): ng:///SidebarModule/SidebarComponent.html@91:4
'DoubleNavBar' is not a known element:
1. If 'DoubleNavBar' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<DoubleNavBar [fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scr"): ng:///SidebarModule/SidebarComponent.html@0:0
at syntaxError (http://localhost:4200/vendor.bundle.js:68064:34) [<root>]
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:79176:19) [<root>]
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:93221:39) [<root>]
at http://localhost:4200/vendor.bundle.js:93141:62 [<root>]
at Set.forEach (native) [<root>]
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:93141:19) [<root>]
at http://localhost:4200/vendor.bundle.js:93028:19 [<root>]
at Object.then (http://localhost:4200/vendor.bundle.js:68054:156) [<root>]
at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:93027:26) [<root>]
at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:92956:37) [<root>]
at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:4803:25) [<root>]
at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:4789:21) [<root>]
at Object.453 (http://localhost:4200/main.bundle.js:8655:124) [<root>]
at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30) [<root>]
ZoneAwareError @ zone.js:917
syntaxError @ compiler.es5.js:1689
TemplateParser.parse @ compiler.es5.js:12801
JitCompiler._compileTemplate @ compiler.es5.js:26846
(anonymous) @ compiler.es5.js:26766
JitCompiler._compileComponents @ compiler.es5.js:26766
(anonymous) @ compiler.es5.js:26653
then @ compiler.es5.js:1679
JitCompiler._compileModuleAndComponents @ compiler.es5.js:26652
JitCompiler.compileModuleAsync @ compiler.es5.js:26581
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4595
PlatformRef_.bootstrapModule @ core.es5.js:4581
453 @ main.ts:11
__webpack_require__ @ bootstrap 6a29c14…:52
854 @ timepickerModule.ts:17
__webpack_require__ @ bootstrap 6a29c14…:52
webpackJsonpCallback @ bootstrap 6a29c14…:23
(anonymous) @ main.bundle.js:1
Add comment
Hi,
I copy a code from sidebar component HTML and I paste it to my component, I remove all attributes and directives from a router, and I figure it out, it's probably mistakes with DoubleNavbar name. In your code is
<DoubleNavBar ... it should be <DoubleNavbar ...
Regards
Yup, that was the issue. Thanks. Can't believe it was that simple haha, spent way to long on that problem.
Ok so the breadcrumb and links issue is solved. They were there for the ng-content inside of the doublenavbar component. A big issue was that i needed to include NO_ERRORS_SCHEMA inside of the module i was nesting these in. I decided to name the components back to their original because im pretty sure it affects styling. I still can't get the ng-content on the SideNav to select properly though.
Alright, so i got it to the point where it compiled. First issue was i wasn't importing the right files inside my app module. I was importing the compiled npm files when i really needed the /typescripts/
Secondly, the navbar component didnt seem to work, so i changed its selector to app-double-nav-bar and also changed it to that inside the html and that got that to work.
The SideNav would have worked by itself probably but inside the ts files its selector was Sidenav and not SideNav, i cahnged it to app-side-nav anyway and that got it working.
I have no clue where the breadcrumb and links selectors are though now and those are causing some problems.
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