router-outlet is not a known element

The following code works:

/*app.module.ts*/
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LetterRecall } from './letterRecall/letterRecall.component';

@NgModule({
    imports:      [BrowserModule, HttpModule],
    declarations: [AppComponent, LetterRecall],
    bootstrap:    [AppComponent],
})
export class AppModule {}

/*app.component.ts*/
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent { }

/*app.component.html*/
<h3>Title</h3>
<letter-recall></letter-recall>

Following the Angular Routing Tutorial here: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

I modified my code to:

/*index.html*/
<head>
   <base href="/">

/*app.module.ts*/
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LetterRecall } from './letterRecall/letterRecall.component';

@NgModule({
    imports:      [BrowserModule, 
                   HttpModule,
                   RouterModule.forRoot([
                       { path: 'letters', component: LetterRecall }
                   ])],
    declarations: [AppComponent, LetterRecall],
    bootstrap:    [AppComponent],
})
export class AppModule {}

/*app.component.ts*/
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent { }

/*app.component.html*/
<h3>Title</h3>
<a routerLink="/letters">Letters</a>
<router-outlet></router-outlet>

At this point I get the following error:

"Unhandled Promise rejection: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. ....."

I am using the following versions:

    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0"

All of the other answers on SO indicate I need to import RouterModule but as you can see above, I am doing this as prescribed in the tutorial.

Any suggestions on where I can look for the source of this error? I started off using John Papa's First Look tutorial on PluralSight but it looks like that code is a little old now. That's when I stripped all of that out and went bare-bones through the tutorial and I get this error... I am not sure where to turn next.

Gerard

Like Erion said: In my case I did (added) two things in app.component.spec.ts:

import { RouterTestingModule } from '@angular/router/testing';
...
TestBed.configureTestingModule({ 
  imports: [ RouterTestingModule ],
  declarations: [
    AppComponent
  ],
}).compileComponents();

Erion .Dreyer

Probably I'm late here, but since I got the exaclty same issue and found an answer here.

Are you using angular-cli? https://github.com/angular/angular-cli/pull/3252/files#diff-badc0de0550cb14f40374a6074eb2a8b

In my case I just had to import my new router module in the app.component.spec.ts The js import and NgModule import.

Then restart the test server.

The angular router directive is part of part of lib: @angular/router and it acts a placeholder which is filled up by angular state.

Here I am dividing two file separately i.e. app.module.ts and app.router.ts

Here app.router.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './components/main/main.component';
import { AppComponent } from './app.component';

const appRoutes: Routes = [
  { path: 'main', component: MainComponent },
  { path: '', redirectTo: '/main', pathMatch: 'full' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRouter { }

Here app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRouter } from './app.router';
import { AppComponent } from './app.component';
import { MainComponent } from './components/main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRouter
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use <router-outlet></router-outlet> in your app.component.ts file and won't show any error

来源：https://stackoverflow.com/questions/41252496/router-outlet-is-not-a-known-element

标签

angular2-routing