角度 4 ng 测试失败：模板解析错误：'router-outlet' 不是已知元素：答案

【问题标题】：angular 4 ng test Failed: Template parse errors: 'router-outlet' is not a known element:角度 4 ng 测试失败：模板解析错误：'router-outlet' 不是已知元素：
【发布时间】：2018-03-05 08:29:08
【问题描述】：

失败：模板解析错误： 'router-outlet' 不是已知元素：

如果 'router-outlet' 是 Angular 组件，则验证它是该模块的一部分。
If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/***.html@0:0

angular 4 ng 测试失败：模板解析错误：'router-outlet' 不是已知元素

【问题讨论】：

您是否导入了RouterModule？请提供允许重现问题的代码。
是的，已经导入了 RouterModule。但不工作
请出示代码
@HemantVishwakarma 你能解决你的问题吗？

标签： angular jasmine

【解决方案1】：

试试这个：在 (app.component.spec.ts) 将 imports:[RouterTestingModule], 从 @angular/router/testing 添加到您的 TestBed 中，如下所示：

import { RouterTestingModule } from '@angular/router/testing'; // <= here
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule], // <= and here
        declarations: [
            AppComponent,

        ],
    }).compileComponents();
  }));
});

或有时，只需一行代码即可解决此问题。添加： 出口：[ RouterModule ], 进入你的 routing.module.ts 的 @NgModule ，它会解决这个问题。这是我的 routing.module.ts，我必须手动添加它，因为当我执行 ng g m routing 时，Angular CLI 没有添加它。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = 
[
    // Your paths to the components
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),

  ],
  declarations: [],
  exports: [ RouterModule ], // <= Add this line 
})
export class ComponentRoutingModule { }

将 RoutingModule 导入您的 app.module.ts。

希望对您有所帮助。

【讨论】：

【解决方案2】：

请检查此问题的答案是否适用于您的场景 SO Link

重要...打开NG Test Guide，然后单击“测试”的链接。这将打开测试样本。将文件 "Testing\activated-route-stub.ts" 和 "Testing\router-link-directive-stub.ts" 复制到您的项目中（最好单独文件夹）。

现在移动到“app.component.spec.ts”，注意这两个文件是如何作为每个测试模块的声明添加的...还要注意路由器选项的 @Component 声明，没有它，存根将无法工作。

规范还说明了如何使用存根来实际测试路由器链接..

做同样的事情并享受......如果有帮助，请告诉我:) 如果有任何错误，请确保您正在导入所有项目

（我的spec文件如下）

从'../router-stubs.module'导入{RouterLinkDirectiveStub}；

@Component({ selector: 'router-outlet', template: '' })

类RouterOutletStubComponent { }

...

声明：[
我的组件，
RouterLinkDirectiveStub，我们在这里添加我们的组件和存根 RouterOutletStubComponent
],

【讨论】：