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

Question

我正在尝试使用 angular-cli（来自 ng2-book 的“嵌套路由”）在 Angular2 中创建带有子路由的简单应用程序。我有两个模块：

1. app.module - 带有导航和主页的整个应用的模块
2. products.module - “children”模块，在不同的路由下有不同的“pages”

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductsComponent } from './products/products.component';
import { ProductsComponentModule, routes as childRoutes } from './products/products.module'
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'products', component: ProductsComponent, children: childRoutes }
]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    ProductsComponentModule
  ],
  bootstrap: [ AppComponent ],
  providers: []
})
export class AppModule { }

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

所以 Angular 无法识别 products.component.html 中 RouterModule 中的 routed-outlet 组件。谷歌搜索什么也没有，因为常见的问题是 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>