Angular2 Routesの 'routed-outlet'は既知の要素ではありません

Question

angular2でangular2の子ルートを持つ単純なアプリケーションをangi-cli（ng2-bookの "Nested Routes"）で作成しようとしています。 - モジュールのナビゲーションやホームページ

products.moduleと全体のアプリのために - 異なる「ページ」を持つ「子」モジュールの異なるルートの下

1. app.module：私は2つのモジュールを持っています

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>") 

ので、角度はproducts.component.htmlにRouterModuleからルーティング・アウトレットコンポーネントを認識しません。一般的な問題は、RouterModuleがProductsComponentModuleの一部ではないということだが、私はすでにimportセクションを含んでいるので、グーグルは何もしていない。これをどうすれば解決できますか？

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>