Não é possível vincular ao 'routerLink', pois não é uma propriedade conhecida

145

Recentemente, comecei a jogar com o angular 2. É incrível até agora. Então, eu comecei um projeto pessoal de demonstração para aprender usando angular-cli.

Com a configuração básica de roteamento, agora quero navegar para algumas rotas do cabeçalho, mas como meu cabeçalho é pai do router-outlet, recebo esse erro.

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>

Agora entendo parcialmente, acho que, como esse componente é um invólucro router-outlet, não seria possível acessar esse caminho router. Então, existe a possibilidade de acessar a navegação de fora para um cenário como este?

Eu ficaria muito feliz em adicionar mais informações, se necessário. Agradeço antecipadamente.

Atualizar

1- Meu package.jsonjá possui a @angular/router 3.3.1versão estável . 2- No meu appmódulo principal , eu importei o routing-module. Por favor veja abaixo.

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

A rota que estou tentando acessar é delegada de outra moduleque é aUsersModule

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

Enquanto estou tentando navegar de um componente que faz parte do Layoutmódulo, mas não tem noção do módulo do roteador. É isso que está causando o erro.

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

Estou tentando navegar a partir do HeaderComponent. Ficaria feliz em fornecer mais informações, se necessário.

Umair Sarfraz
fonte
Import RouteModule na raiz do seu aplicativo e atualizar o pacote npm última versão estável
harshes53
Sim, eu tenho a última versão estável.
Umair Sarfraz
2
Você também adicionar o RouterModuleque imports: []de todos os módulos em que você usar routerLinkou<router-outlet>
Günter Zöchbauer
@Umair módulo de ordenação é importante das importações, movimento AppRoutingModuleantesLayoutModule
harshes53
1
@ harshes53 Acho que não é verdade.
Günter Zöchbauer

Respostas:

259

Você precisa adicionar RouterModuleem importstodos os locais @NgModule()onde os componentes usam qualquer componente ou diretiva (neste caso, routerLinke <router-outlet>.

declarations: [] é tornar componentes, diretivas, tubos conhecidos dentro do módulo atual.

exports: []é disponibilizar componentes, diretrizes, tubulações para a importação de módulos. O que é adicionado declarationsapenas é privado ao módulo. exportsos torna públicos.

Veja também https://angular.io/api/router/RouterModule#usage-notes

Günter Zöchbauer
fonte
@ Gunter está tudo bem importar o RouterModule várias vezes? Por exemplo, se eu quiser usar o roteadorLink em um childModule, preciso importar o RouterModule para o módulo filho, já que ele já foi importado pelo aplicativo raiz Module ...
Olivier Boissé
Sim, ele será incluído apenas uma vez na saída da compilação.
Günter Zöchbauer
Ok, mas eu acho que nós precisamos ter o cuidado de chamar o método forRootapenas uma vez, os módulos crianças só deve importar RouterModule sem chamar o método forRoot
Olivier Boisse
Eu acho que depende do que forRootfaz. Ao registrar os provedores forRootvárias vezes, o resultado é o mesmo que se fosse feito apenas uma vez. Se você fizer outras coisas, isso pode não ser diferente.
Günter Zöchbauer
2
Obrigado por esta resposta! No meu caso, o aplicativo funcionou, mas os testes falharam. A solução foi importar o RouterTestingModule nos testes, para cada componente que usa o routerLink.
Slavik Shynkarenko 12/01
24

Está faltando a inclusão do pacote de rota ou a inclusão do módulo roteador no módulo principal do aplicativo.

Verifique se o seu package.json possui:

"@angular/router": "^3.3.1"

Em seu app.module, importe o roteador e configure as rotas:

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

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

Atualização :

Mova o AppRoutingModule para ser o primeiro nas importações:

imports: [
    AppRoutingModule.
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(), // What is this?
    LayoutModule,
    UsersModule
  ],
Ben Richards
fonte
Isso não resolveu o problema. Você pode verificar minha atualização?
Umair Sarfraz
@Ben - "forRoot ()" significa que você está chamando um método definido em um módulo importado que executa a instalação ou configuração do módulo. Você também pode definir um método como "forChild ()" em um módulo personalizado e chamá-lo, se desejar. Este método é usado para tarefas como configurar um provedor para um serviço. Também é como você obtém um serviço Singleton em Angular. Consulte angular.io/guide/singleton-services
RoboBear
10

Vou adicionar outro caso em que estava recebendo o mesmo erro, mas apenas sendo um manequim. Eu adicionei [routerLinkActiveOptions]="{exact: true}"sem ainda adicionar routerLinkActive="active".

Meu código incorreto era

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

quando deveria ter sido

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

Sem ter routerLinkActive, você não pode terrouterLinkActiveOptions .

cchapman
fonte
3

Quando nada mais funcionar quando deve funcionar, reinicie o serviço. É triste encontrar esse tipo de erro.

tudor
fonte
2
Pode conformar há um erro. Eu apenas continuei excluindo o conteúdo da pasta dist e reconstruindo. Finalmente funcionou. Tente adicionar um link para cada componente em app.component.ts. Se isso não funcionar, sua única opção é oração e jejum.
Sam
1

No meu caso, só preciso importar meu componente recém-criado para o RouterModule

{path: 'newPath', component: newComponent}

Em sua app.moduleimportação, o roteador e configure as rotas:

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

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

Espero que isso ajude alguém !!!

Akitha_MJ
fonte
1

Você precisa adicionar RouterMoudlenas importsseções do módulo que contém o Headercomponente

Hung Vu
fonte