问题描述
以下代码有效:
/*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>
此时我收到以下错误:
"未处理的 Promise 拒绝:模板解析错误:'router-outlet'不是已知元素:1. 如果 'router-outlet' 是一个 Angular 组件,那么验证它是否是这个模块的一部分.……"
我正在使用以下版本:
"@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();
这篇关于路由器插座不是已知元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!