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

145

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.

Umair Sarfraz
la source
Importez RouteModule à la racine de votre application et mettez à jour la dernière version stable du package npm
harshes53
Ouais, j'ai la dernière version stable.
Umair Sarfraz le
2
Avez-vous également ajouté le RouterModuleà imports: []de tous les modules où vous utilisez routerLinkou<router-outlet>
Günter Zöchbauer
La commande du module @Umair est importante dans les importations, déplacez-vous AppRoutingModuleavantLayoutModule
harshes53
1
@ harshes53 Je ne pense pas que ce soit vrai.
Günter Zöchbauer

Réponses:

262

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

Günter Zöchbauer
la source
@Gunter est-il acceptable d'importer plusieurs fois RouterModule? Par exemple si je veux utiliser routerLink dans un childModule, je dois importer RouterModule dans le module enfant alors qu'il a déjà été importé par le module root app ...
Olivier Boissé
Oui, il ne sera inclus qu'une seule fois dans la sortie de construction.
Günter Zöchbauer
Ok mais je pense qu'il faut prendre soin d'appeler la méthode forRootune seule fois, les modules enfants ne doivent importer que RouterModule sans appeler la méthode forRoot
Olivier Boissé
Je pense que cela dépend de ce qui forRootfait. Lors de la connexion de fournisseurs à forRootplusieurs reprises, le résultat est le même que s'il était effectué une seule fois. Si vous faites autre chose, cela ne sera peut-être pas différent.
Günter Zöchbauer
2
Merci pour cette réponse! Dans mon cas, l'application a fonctionné, mais les tests ont échoué. La solution consistait à importer RouterTestingModule dans les tests, pour chaque composant qui utilise routerLink.
Slavik Shynkarenko le
24

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
  ],
Ben Richards
la source
Cela n'a pas résolu le problème. Pouvez-vous s'il vous plaît vérifier ma mise à jour?
Umair Sarfraz le
@Ben - "forRoot ()" signifie que vous appelez une méthode définie sur un module importé qui exécute la configuration ou l'installation du module. Vous pouvez également définir une méthode comme "forChild ()" dans un module personnalisé et l'appeler, si vous le souhaitez. Cette méthode est utilisée pour des tâches telles que la configuration d'un fournisseur pour un service. C'est aussi la façon dont vous obtenez un service Singleton dans Angular. Voir angular.io/guide/singleton-services
RoboBear
10

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.

cchapman
la source
3

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

Tudor
la source
2
Peut se conformer il y a un bug. J'ai juste continué à supprimer le contenu du dossier dist et à reconstruire. Finalement cela a fonctionné. Essayez d'ajouter un lien vers chaque composant dans app.component.ts. Si cela ne fonctionne pas, votre seule option est la prière et le jeûne.
Sam le
1

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 !!!

Akitha_MJ
la source
1

Vous devez ajouter RouterMoudledans les importssections du module contenant le Headercomposant

Hung Vu
la source