patterntypescriptangularCritical
Can't bind to 'routerLink' since it isn't a known property
Viewed 0 times
bindpropertyknownisnsincecanrouterlink
Problem
Recently, I have started playing with angular 2. It's awesome so far. So, i have started a demo personal project for the sake of learning using
With the basic routing setup, I now want to navigate to some routes from header, but since my header is a parent to the
app.component.html
header.component.html
Now I understand partially I guess that since that component is a wrapper around
I would be really happy to add any more information if needed. Thank you in advance.
Update
1- My
2- In my main
app.module.ts
app-routing.module.ts
```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.c
angular-cli.With the basic routing setup, I now want to navigate to some routes from header, but since my header is a parent to the
router-outlet, I receive this error.app.component.html
// Trying to navigate from this component
header.component.html
Sign in
Now I understand partially I guess that since that component is a wrapper around
router-outlet it would not be possible this way to access router. So, is there a possibility to access navigation from outside for a scenario like this?I would be really happy to add any more information if needed. Thank you in advance.
Update
1- My
package.json already has the stable @angular/router 3.3.1 version.2- In my main
app module, I have imported the routing-module. Please see below.app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AlertModule.forRoot(),
LayoutModule,
UsersModule,
AppRoutingModule --> This is the routing module.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app-routing.module.ts
```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.c
Solution
You need to add
See also https://angular.io/api/router/RouterModule#usage-notes
RouterModule to imports of every @NgModule() where components use any component or directive from (in this case routerLink and `.
import {RouterModule} from '@angular/router';
@NgModule({
declarations:[YourComponents],
imports:[RouterModule]
declarations: [] is to make components, directives, pipes, known inside the current module.
exports: [] is to make components, directives, pipes, available to importing modules. What is added to declarations only is private to the module. exports` makes them public.See also https://angular.io/api/router/RouterModule#usage-notes
Code Snippets
import {RouterModule} from '@angular/router';
@NgModule({
declarations:[YourComponents],
imports:[RouterModule]Context
Stack Overflow Q#42035387, score: 640
Revisions (0)
No revisions yet.