angular - 'routed-outlet' is not a known element in Angular2 Routes -

i'm trying create simple application children routes in angular2 angular-cli ("nested routes" ng2-book). have 2 modules:

1. app.module - module whole app navigation , home page
2. products.module - "children" module has different "pages" under different routes

app.module

import { browsermodule } '@angular/platform-browser'; import { ngmodule } '@angular/core'; import { routes, routermodule } '@angular/router';  import { appcomponent } './app.component'; import { productscomponent } './products/products.component'; import { productscomponentmodule, routes childroutes } './products/products.module' import { homecomponent } './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 } '@angular/core'; import { router } '@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 } '@angular/core';  import { routermodule, routes } '@angular/router';  import { productscomponent } './products.component'; import { maincomponent } '../main/main.component'; import { byidcomponent } '../by-id/by-id.component'; import { interestcomponent } '../interest/interest.component'; import { sportifycomponent } '../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 } '@angular/core'; import { activatedroute, router } '@angular/router';  import { maincomponent } '../main/main.component'; import { byidcomponent } '../by-id/by-id.component'; import { interestcomponent } '../interest/interest.component'; import { sportifycomponent } '../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> 

other components simple components placeholder text in template , no logic. when try run this, error:

unhandled promise rejection: template parse errors: 'routed-outlet' not known element:     1. if 'routed-outlet' angular component, verify part of module.     2. if 'routed-outlet' web component add "custom_elements_schema" '@ngmodule.schemas' of component suppress message.  ("<div class="products-area">   [error->]<routed-outlet></routed-outlet> </div>") 

so angular doesn't recognize routed-outlet component routermodule in products.component.html. googling gives nothing, because common problem routermodule not part of productscomponentmodule, i've included import section. how can fix this?

use :

<router-outlet></router-outlet> 

you error because made typo:

<routed-outlet></routed-outlet>