angular - por - No se puede vincular a ''routerLink'' ya que no es una propiedad conocida

rutas angular

Question

Recientemente, comencé a jugar con angular 2. Hasta ahora es increíble. Entonces, comencé un proyecto personal de demostración por el bien de aprender usando angular-cli .

Con la configuración básica de enrutamiento, ahora quiero navegar a algunas rutas desde el encabezado, pero dado que mi encabezado es un padre para la router-outlet del router-outlet , recibo este error.

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>

Ahora entiendo parcialmente, supongo que dado que ese componente es una envoltura alrededor router-outlet , no sería posible acceder al router esta manera. Entonces, ¿existe la posibilidad de acceder a la navegación desde el exterior para un escenario como este?

Me encantaría agregar más información si fuera necesario. Gracias de antemano.

Actualizar

1- My package.json ya tiene la versión estable @angular/router 3.3.1 . 2- En mi módulo de app principal, he importado el routing-module . Por favor ver más abajo.

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 ruta a la que estoy intentando acceder está delegada desde otro module que es el UsersModule

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

Mientras intento navegar desde un componente que forma parte del módulo de Layout , pero no tiene noción del módulo de enrutador. Es eso lo que está causando el error.

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

Estoy intentando navegar desde HeaderComponent . Estaré encantado de proporcionar más información si es necesario.

Answer 1

Agregaré otro caso en el que recibí el mismo error pero solo siendo un tonto. [routerLinkActiveOptions]="{exact: true}" sin agregar routerLinkActive="active" .

Mi código incorrecto fue

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

cuando debería haber sido

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

Sin tener routerLinkActive , no puede tener routerLinkActiveOptions .

Answer 2

Le falta la inclusión del paquete de ruta o la inclusión del módulo de enrutador en su módulo de aplicación principal.

Asegúrese de que su package.config tenga esto:

"@angular/router": "^3.3.1"

Luego, en su app.module, importe el enrutador y configure las rutas:

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

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

Actualización :

Mueva el AppRoutingModule para ser el primero en las importaciones:

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

Answer 3

RouterModule agregar RouterModule a las imports de cada @NgModule() donde los componentes usan cualquier componente o directiva de (en este caso routerLink y <router-outlet> .

declarations: [] es hacer componentes, directivas, tuberías, conocidos dentro del módulo actual.

exports: [] es hacer componentes, directivas, tuberías, disponibles para importar módulos. Lo que se agrega a las declarations solo es privado para el módulo. exports hacen públicas.