Impossible de se lier à 'routerLink' car ce n'est pas une propriété connue

Récemment, j'ai commencé à jouer avec angular 2. C'est génial jusqu'à présent. Donc, j'ai commencé un projet personnel de démonstration dans le but d'apprendre à utiliser angular-cli.

Avec la configuration de routage de base, je souhaite maintenant accéder à certaines routes à partir de l'en-tête, mais comme mon en-tête est un parent du router-outlet, je reçois cette erreur.

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>

Maintenant, je comprends partiellement, je suppose que puisque ce composant est un wrapper autour, router-outletil ne serait pas possible d'accéder de cette façon router. Alors, y a-t-il une possibilité d'accéder à la navigation de l'extérieur pour un scénario comme celui-ci?

Je serais très heureux d'ajouter des informations supplémentaires si nécessaire. Merci d'avance.

Mettre à jour

1- Mon a package.jsondéjà la @angular/router 3.3.1version stable . 2- Dans mon appmodule principal , j'ai importé le fichier routing-module. Veuillez voir ci-dessous.

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

L'itinéraire moduleauquel j'essaie d'accéder est délégué par un autre qui est leUsersModule

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

Pendant que j'essaye de naviguer à partir d'un composant qui fait partie du Layoutmodule, mais qui n'a aucune notion du module de routeur. Est-ce cela qui cause l'erreur.

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

J'essaye de naviguer à partir du HeaderComponent. Je serais heureux de fournir plus d'informations si nécessaire.

Vous devez ajouter RouterModuleà importsde tous les @NgModule()endroits où les composants utilisent un composant ou une directive à partir de (dans ce cas routerLinket <router-outlet>.

declarations: [] est de faire connaître des composants, des directives, des tuyaux, à l'intérieur du module courant.

exports: []est de mettre à disposition des composants, des directives, des tuyaux, pour importer des modules. Ce qui est ajouté declarationsuniquement est privé pour le module. exportsles rend publics.

Voir aussi https://angular.io/api/router/RouterModule#usage-notes

Il vous manque soit l'inclusion du package d'itinéraire, soit l'inclusion du module de routeur dans votre module d'application principal.

Assurez-vous que votre package.json a ceci:

"@angular/router": "^3.3.1"

Puis dans votre app.module importez le routeur et configurez les routes:

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

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

Mise à jour :

Déplacez AppRoutingModule pour être le premier dans les importations:

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

J'ajouterai un autre cas où j'obtenais la même erreur, mais étant juste un mannequin. J'avais ajouté [routerLinkActiveOptions]="{exact: true}"sans encore ajouter routerLinkActive="active".

Mon code incorrect était

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

quand ça aurait dû être

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

Sans avoir routerLinkActive, vous ne pouvez pas avoir routerLinkActiveOptions.

Lorsque rien d'autre ne fonctionne alors que cela devrait fonctionner, redémarrez ng serve. C'est triste de trouver ce genre de bugs.

Dans mon cas, j'ai juste besoin d'importer mon composant nouvellement créé dans RouterModule

{path: 'newPath', component: newComponent}

Puis dans votre app.module importez le routeur et configurez les routes:

importer {RouterModule} depuis '@ angular / router';

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

J'espère que cela aide quelqu'un !!!

Vous devez ajouter RouterMoudledans les importssections du module contenant le Headercomposant