'routed-outlet'不是Angular2路徑中的已知元素

Question

我正嘗試在Angular2中使用angular-cli（ng2-book中的「嵌套路由」）創建簡單的子路由應用程序。我有兩個模塊：

1. app.module - 模塊導航和主頁
2. products.module整個應用程序 - 它有不同的路線
下不同的「頁面」，「孩子」模塊

app.module

app.component

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    constructor(private router: Router) { } 
} 

app.component.html

<div class="page-header"> 
    <div class="container"> 
    <h1>Router Sample</h1> 
    <div class="navLinks"> 
     <a [routedLink]="['/home']">Home</a> 
     <a [routedLink]="['/products']">Products</a> 
    </div> 
    </div> 
</div> 

<div id="content"> 
    <div class="container"> 
    <routed-outlet></routed-outlet> 
    </div> 
</div> 

products.module

import { NgModule } from '@angular/core'; 

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

import { ProductsComponent } from './products.component'; 
import { MainComponent } from '../main/main.component'; 
import { ByIdComponent } from '../by-id/by-id.component'; 
import { InterestComponent } from '../interest/interest.component'; 
import { SportifyComponent } from '../sportify/sportify.component'; 


export const routes: Routes = [ 
    { path: '', redirectTo: 'main' }, 
    { path: 'main', component: MainComponent }, 
    { path: ':id', component: ByIdComponent }, 
    { path: 'interest', component: InterestComponent }, 
    { path: 'sportify', component: SportifyComponent }, 
]; 

@NgModule({ 
    declarations: [ 
    ProductsComponent, 
    MainComponent, 
    InterestComponent, 
    SportifyComponent, 
    ByIdComponent 
    ], 
    exports: [ 
    ProductsComponent, 
    MainComponent, 
    InterestComponent, 
    SportifyComponent, 
    ByIdComponent 
    ], 
    imports: [ RouterModule ] 
}) 
export class ProductsComponentModule { } 

products.component

import { Component } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 

import { MainComponent } from '../main/main.component'; 
import { ByIdComponent } from '../by-id/by-id.component'; 
import { InterestComponent } from '../interest/interest.component'; 
import { SportifyComponent } from '../sportify/sportify.component'; 


@Component({ 
    selector: 'products', 
    templateUrl: './products.component.html', 
    styleUrls: ['./products.component.css'] 
}) 
export class ProductsComponent { 

    constructor(private router: Router, private route: ActivatedRoute) { } 

    goToProduct(id: string): void { 
    this.router.navigate(['./', id], { relativeTo: this.route }); 
    } 
} 

products.component.html

<h2>Products</h2> 

<div class="navLinks"> 
    <a [routerLink]="['./main']">Main</a> | 
    <a [routerLink]="['./interest']">Interest</a> | 
    <a [routerLink]="['./sportify']">Sportify</a> 
    Enter id: <input #id size="6"> 
    <button (click)="goToProduct(id.value)">Go</button> 
</div> 

<div class="products-area"> 
    <routed-outlet></routed-outlet> 
</div> 

其他組件與模板佔位符文本並沒有邏輯簡單的組件。當我嘗試運行它，我得到的錯誤：

Unhandled Promise rejection: Template parse errors: 'routed-outlet' is not a known element: 
    1. If 'routed-outlet' is an Angular component, then verify that it is part of this module. 
    2. If 'routed-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
("<div class="products-area"> [ERROR->]<routed-outlet></routed-outlet> </div>") 

所以角不從RouterModule在products.component.html認識路由出口組件。谷歌搜索沒有提供任何信息，因爲常見的問題是，RouterModule不是ProductsComponentModule的一部分，但我已經包含它的導入部分。我怎樣才能解決這個問題？

Answer 1

用途：

<router-outlet></router-outlet> 

因爲你犯了一個錯字你得到一個錯誤：

<routed-outlet></routed-outlet> 

Answer 2

內app.component.html文件，有以下變化::: ---

<div class="page-header"> 
    <div class="container"> 
    <h1>Router Sample</h1> 
    <div class="navLinks"> 
     <a [routerLink]="['/home']">Home</a> 
     <a [routerLink]="['/products']">Products</a> 
    </div> 
    </div> 
</div> 

<div id="content"> 
    <div class="container"> 
    <router-outlet></router-outlet> 
    </div> 
</div>