I'm studying angular 2 and I came across a problem in the application I'm doing as I study. I decided to create a CoreModule and create a SideBar component (menu) with the links for application navigation, however it did not work as expected.
The sidebar is rendered but the links are missing rendering the href, which makes it impossible to navigate:
<a _ngcontent-aap-3="" routerlink="/dashboard" routerlinkactive="active">Dashboard</a>
I'll leave my code below, could anyone tell me what I'm doing wrong?
app / core / sidebar / sidebar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
app / core / sidebar / sidebar.component.html
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
<li><a routerLink="/clientes" routerLinkActive="active">Clientes</a></li>
</ul>
</div>
app / core / core.module.ts
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { SidebarComponent } from './sidebar/sidebar.component';
@NgModule({
imports: [],
exports: [SidebarComponent],
declarations: [SidebarComponent],
providers: []
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error(
'CoreModule is already loaded. Import it in the AppModule only');
}
}
}
app / app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
AppRoutingModule,
BrowserModule,
CoreModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app / app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app / app.component.html
<div class="container-fluid">
<div class="row">
<app-sidebar></app-sidebar>
<div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
<router-outlet></router-outlet>
</div>
</div>
</div>
app / app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{ path: 'dashboard', component: DashboardComponent }
])
],
exports: [
RouterModule
],
declarations: [],
providers: [],
})
export class AppRoutingModule { }