web-dev-qa-db-fra.com

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. J'ai donc lancé un projet personnel de démonstration pour apprendre à utiliser angular-cli.

Avec la configuration de routage de base, je souhaite maintenant naviguer vers certains itinéraires à 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 en partie, je suppose que puisque ce composant est un wrapper autour de router-outlet, il ne serait pas possible d’avoir accès à 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 vraiment heureux d'ajouter plus d'informations si nécessaire. Merci d'avance.

Mise à jour

1- Mon package.json a déjà la version stable @angular/router 3.3.1. 2- Dans mon module principal app, j'ai importé le routing-module. S'il vous plaît 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 {}

La route que je tente d’accéder est déléguée par une autre module qui est la UsersModule

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

Bien que j'essaie de naviguer à partir d'un composant qui fait partie du module Layout, mais ne possède aucune notion du module de routeur. Est-ce ce 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'essaie de naviguer à partir de la HeaderComponent. Je serais heureux de fournir plus d'informations si nécessaire.

angulartypescriptangular2-routing
63
Umair Sarfraz

Vous devez ajouter RouterModule à imports de chaque @NgModule() où les composants utilisent un composant ou une directive de (dans ce cas, routerLink et <router-outlet>.

declarations: [] consiste à créer des composants, des directives, des tuyaux, connus à l'intérieur du module actuel.

exports: [] consiste à rendre des composants, des directives et des canaux disponibles pour l'importation de modules. Ce qui est ajouté à declarations uniquement est privé pour le module. exports les rend publics.

132
Günter Zöchbauer

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

Assurez-vous que votre package.config a ceci:

"@angular/router": "^3.3.1"

Ensuite, dans votre app.module, importez le routeur et configurez les itinéraires:

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

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

Mise à jour:

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

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

J'ajouterai un autre cas où j'obtiendrais la même erreur mais 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 cela 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.

2
cchapman