路由器插座不是已知元素 [英] router-outlet is not a known element
问题描述
以下代码有效:
/*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>
在此处遵循Angular路由教程: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
我将代码修改为:
/*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>
这时出现以下错误:
"未处理的承诺拒绝:模板解析错误:路由器出口" 不是已知的元素: 1.如果"router-outlet"是Angular组件，则请验证它是否是此模块的一部分. ....."
"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. ....."
我正在使用以下版本:
"@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"
SO上的所有其他答案都表明我需要导入RouterModule，但是正如您在上面看到的那样，我正在按照教程中的说明进行操作.
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.
关于在哪里可以找到此错误源的任何建议?我开始在PluralSight上使用John Papa的First Look教程，但现在看来该代码有点旧了.那时我将所有内容都剥离了，并在本教程中进行了粗略的处理，但出现此错误...我不确定下一步该怎么做.
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.
推荐答案
像Erion所说:就我而言，我在app.component.spec.ts中做了两件事:
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();
这篇关于路由器插座不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
