router-outlet 不是已知元素答案

【问题标题】：router-outlet is not a known elementrouter-outlet 不是已知元素
【发布时间】：2016-12-20 22:54:07
【问题描述】：

以下代码有效：

/*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>

此时我收到以下错误：

“未处理的承诺拒绝：模板解析错误：'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，但正如您在上面看到的，我正在按照教程中的规定执行此操作。

关于我在哪里可以找到这个错误的来源有什么建议吗？我开始在 PluralSight 上使用 John Papa 的 First Look 教程，但现在看起来该代码有点旧了。就在那时，我剥离了所有这些内容并通过教程进行了简单的操作，我得到了这个错误......我不确定下一步该转向哪里。

【问题讨论】：

尝试导入router的所有依赖。
所以我隐藏了那个分支并重新开始。唯一的变化（我能找到的）是我将 zone.js 的版本从 0.6.23 更新到了 0.7.2。我不认为这是相关的，但......它现在有效。我可能会回到那个藏匿处并尝试你的建议，但在这一点上，我想我可能会把这个归咎于小精灵。
你也可以在这里查看angular.io/guide/testing 以获取更多关于为 Angular 设置测试环境的信息

标签： angular2-routing

【解决方案1】：

就像 Erion 所说：就我而言，我在 app.component.spec.ts 中做了（添加）两件事：

import { RouterTestingModule } from '@angular/router/testing';
...
TestBed.configureTestingModule({ 
  imports: [ RouterTestingModule ],
  declarations: [
    AppComponent
  ],
}).compileComponents();

【讨论】：

【解决方案2】：

可能我在这里迟到了，但是因为我遇到了完全相同的问题并在这里找到了答案。

你在使用 angular-cli 吗？ https://github.com/angular/angular-cli/pull/3252/files#diff-badc0de0550cb14f40374a6074eb2a8b

就我而言，我只需要在 app.component.spec.ts 中导入我的新路由器模块 js导入和NgModule导入。

然后重启测试服务器。

【讨论】：

我做了同样的事情，但是浏览器控制台仍然显示错误。请帮帮我。

【解决方案3】：

角度路由器指令是 lib 的一部分：@angular/router，它充当由角度状态填充的占位符。

这里我将两个文件分开，即 app.module.ts 和 app.router.ts

这里是app.router.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './components/main/main.component';
import { AppComponent } from './app.component';

const appRoutes: Routes = [
  { path: 'main', component: MainComponent },
  { path: '', redirectTo: '/main', pathMatch: 'full' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRouter { }

这里是 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRouter } from './app.router';
import { AppComponent } from './app.component';
import { MainComponent } from './components/main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRouter
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在您可以在 app.component.ts 文件中使用 <router-outlet></router-outlet> 并且不会显示任何错误

【讨论】：