No se puede vincular a 'routerLink' ya que no es una propiedad conocida

Recientemente, comencé a jugar con angular 2. Hasta ahora es increíble. Entonces, comencé un proyecto personal de demostración para aprender a usar angular-cli.

Con la configuración de enrutamiento básica, ahora quiero navegar a algunas rutas desde el encabezado, pero dado que mi encabezado es un padre para el router-outlet, recibo este error.

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

  <a [routerLink]="['/signin']">Sign in</a>

Ahora entiendo parcialmente, supongo que dado que ese componente es un envoltorio router-outlet, no sería posible acceder de esta manera router. Entonces, ¿existe la posibilidad de acceder a la navegación desde el exterior para un escenario como este?

Me encantaría agregar más información si fuera necesario. Gracias de antemano.

Actualizar

1- Mi package.jsonya tiene la @angular/router 3.3.1versión estable . 2- En mi appmódulo principal , he importado el routing-module. Por favor ver más abajo.

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.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

const routes: Routes = [
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

La ruta a la que intento acceder está delegada de otra moduleque es laUsersModule

user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';

const usersRoutes: Routes = [
  { path: 'signin',  component: SigninComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(usersRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class UsersRoutingModule { }

Mientras intento navegar desde un componente que es parte del Layoutmódulo, pero no tengo noción del módulo enrutador. Es eso lo que está causando el error.

Layout.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  exports: [HeaderComponent, FooterComponent]
})
export class LayoutModule{}

Estoy tratando de navegar desde el HeaderComponent. Estaré encantado de proporcionar más información si es necesario.

Debe agregar RouterModulea importscada @NgModule()componente donde los componentes usan cualquier componente o directiva (en este caso routerLinky <router-outlet>.

declarations: [] es hacer componentes, directivas, tuberías, conocidos dentro del módulo actual.

exports: []consiste en poner componentes, directivas, tuberías disponibles para importar módulos. Lo que se agrega declarationssolo es privado al módulo. exportslos hace públicos

Ver también https://angular.io/api/router/RouterModule#usage-notes

Le falta la inclusión del paquete de ruta o la inclusión del módulo de enrutador en su módulo de aplicación principal.

Asegúrese de que su package.json tenga esto:

"@angular/router": "^3.3.1"

Luego, en su app.module, importe el enrutador y configure las rutas:

import { RouterModule } from '@angular/router';

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent}
        ])
    ],

Actualización :

Mueva el AppRoutingModule para ser el primero en las importaciones:

imports: [
    AppRoutingModule.
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(), // What is this?
    LayoutModule,
    UsersModule
  ],

Agregaré otro caso en el que recibí el mismo error pero solo siendo un tonto. Había agregado [routerLinkActiveOptions]="{exact: true}"sin agregar aún routerLinkActive="active".

Mi código incorrecto fue

<a class="nav-link active" routerLink="/dashboard" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

cuando debería haber sido

<a class="nav-link active" routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

Sin tener routerLinkActive, no puedes tener routerLinkActiveOptions.

Cuando nada más funcione cuando debería funcionar, reinicie ng serve. Es triste encontrar este tipo de errores.

En mi caso, solo necesito importar mi componente recién creado a RouterModule

{path: 'newPath', component: newComponent}

Luego, en su app.moduleimportación, el enrutador y configure las rutas:

importar {RouterModule} desde '@ angular / router';

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent},
            {path: 'newPath', component: newComponent}
        ])
    ],

Espero que esto ayude a alguien !!!

Es necesario añadir RouterMoudleen importslas secciones del módulo que contiene el Headercomponente