本文介绍了路由器插座不是已知元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下代码有效:

/*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();

这篇关于路由器插座不是已知元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 16:27
查看更多