Невозможно связать с 'routerLink', так как это не известное свойство

Question

В последнее время я начал играть с угловым 2. Это потрясающе до сих пор. Итак, я начал демонстрационный личный проект ради обучения, используя angular-cli.

С базовой настройкой маршрутизации я теперь хочу перейти к некоторым маршрутам из заголовка, но поскольку мой заголовок является родителем для router-outlet, я получаю эту ошибку.

app.component.html

<app-header></app-header> // Trying to navigate from this component 
    <router-outlet></router-outlet> 
<app-footer></app-footer> 

header.component.html

Теперь я отчасти понимаю, что я предполагаю, что, поскольку этот компонент является оберткой router-outlet не будет таким образом можно получить доступ к router. Итак, есть ли возможность доступа к навигации извне для такого сценария?

Я был бы очень рад добавить любую информацию в случае необходимости. Заранее спасибо.

Update

1- Мои package.json уже имеет стабильную @angular/router 3.3.1 версию. 2- В моем основном app модуле, я импортировал routing-module. См. Ниже.

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

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

Маршрут Я пытаюсь получить доступ делегирован из другого module, который является UsersModule

пользователь-rou ting.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 { } 

В то время как я пытаюсь перейти от компонента, который является частью Layout модуля, но не имеет понятия модуля маршрутизатора. Это то, что вызывает ошибку.

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

Я пытаюсь перейти от HeaderComponent. Я был бы рад предоставить дополнительную информацию, если это необходимо.

Answer 1

Вам нужно добавить RouterModule к imports из каждой @NgModule(), где компоненты используют любой компонент или директиву (в данном случае routerLink и <router-outlet>.

declarations: [] состоит в том, чтобы составлять компоненты, директивы, трубы, известные внутри текущего модуля.

exports: [] состоит в том, чтобы составлять компоненты, директивы, трубы, доступные для импорта модулей. То, что добавлено к declarations, является частным для модуля. exports делает их общедоступными.

Answer 2

Вам не хватает либо включения пакета маршрута, либо модуля маршрутизатора в основной модуль приложения.

Убедитесь, что ваш package.config имеет это:

"@angular/router": "^3.3.1" 

Тогда в вашем приложении.импорта модуль маршрутизатора и настроить маршруты:

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

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

Update:

Перемещение AppRoutingModule быть первым в импорте:

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