Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 214
Matt S Avatar asked Dec 20 '16 22:12

Matt S


People also ask

Is router outlet a component?

Router outlet is a dynamic component that the router uses to display in this case either the Home or the AllLessons components.

What are router outlets?

Router-Outlet is an Angular directive from the router library that is used to insert the component matched by routes to be displayed on the screen. It's exported by the RouterModule and added to the template as shown below: <router-outlet></router-outlet>

How do I fix error code ng8001?

Debugging the errorlinkUse the element name in the error to find the file(s) where the element is being used. Check that the name and selector are correct. Make sure that the component is correctly imported inside your NgModule or standalone component, by checking its presence in the imports field.


2 Answers

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();
like image 94
Gerard Avatar answered Sep 28 '22 09:09

Gerard


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.

like image 24
Erion .Dreyer Avatar answered Sep 28 '22 10:09

Erion .Dreyer