Menu
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.
214
Router outlet is a dynamic component that the router uses to display in this case either the Home or the AllLessons components.
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>
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.
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();
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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
