Impossibile associare "routerLink" poiché non è una proprietà nota

Di recente, ho iniziato a giocare con Angular 2. È fantastico finora. Quindi, ho avviato un progetto personale demo per motivi di apprendimento angular-cli.

Con la configurazione di routing di base, ora desidero passare ad alcuni percorsi dall'intestazione, ma poiché la mia intestazione è un genitore di router-outlet, ricevo questo errore.

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>

Ora capisco in parte suppongo che dal momento che quel componente è un involucro attorno ad router-outletesso non sarebbe possibile accedere in questo modo router. Quindi, c'è la possibilità di accedere alla navigazione dall'esterno per uno scenario come questo?

Sarei davvero felice di aggiungere ulteriori informazioni se necessario. Grazie in anticipo.

Aggiornare

1- Il mio package.jsonha già la @angular/router 3.3.1versione stabile . 2- Nel mio appmodulo principale , ho importato il file routing-module. Vedi sotto.

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 {}

Il percorso a cui sto tentando di accedere è delegato da un altro moduleche è ilUsersModule

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 { }

Mentre sto provando a navigare da un componente che fa parte del Layoutmodulo, ma non ha alcuna idea del modulo router. È questo ciò che causa l'errore.

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{}

Sto cercando di navigare dal HeaderComponent. Sarei felice di fornire ulteriori informazioni se necessario.

È necessario aggiungere RouterModulea importsogni @NgModule()dove i componenti utilizzano qualsiasi componente o direttiva da (in questo caso routerLinke <router-outlet>.

declarations: [] consiste nel rendere noti componenti, direttive, tubi all'interno del modulo corrente.

exports: []consiste nel rendere disponibili componenti, direttive, tubi per l'importazione di moduli. Ciò che viene aggiunto è declarationssolo privato al modulo. exportsli rende pubblici.

Vedi anche https://angular.io/api/router/RouterModule#usage-notes

Manca l'inclusione del pacchetto route o includendo il modulo router nel modulo dell'app principale.

Assicurati che il tuo package.json abbia questo:

"@angular/router": "^3.3.1"

Quindi nella tua app.module importa il router e configura i percorsi:

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

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

Aggiornamento :

Spostare AppRoutingModule in modo che sia il primo nelle importazioni:

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

Aggiungerò un altro caso in cui stavo ottenendo lo stesso errore ma essendo solo un manichino. Avevo aggiunto [routerLinkActiveOptions]="{exact: true}"senza ancora aggiungere routerLinkActive="active".

Il mio codice errato era

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

quando avrebbe dovuto essere

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

Senza routerLinkActive, non puoi avere routerLinkActiveOptions.

Quando nient'altro funziona quando dovrebbe funzionare, riavvia ng serve. È triste trovare questo tipo di bug.

Nel mio caso, devo solo importare il mio componente appena creato in RouterModule

{path: 'newPath', component: newComponent}

Quindi app.moduleimportare il router e configurare i percorsi:

importare {RouterModule} da '@ angular / router';

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

Spero che questo aiuti a qualcuno !!!

È necessario aggiungere RouterMoudlenelle importssezioni del modulo contenente il Headercomponente