Angular 4 - 失败：无法解析 ActivatedRoute 的所有参数：(?, ?, ?, ?, ?, ?, ?, ?)

Question

我已参考以下链接来获取答案，但我找不到适合我的场景的任何可行解决方案。 错误：（SystemJS）无法解析ActivatedRoute的所有参数：（？，？，？，？，？，？，？，？）

因此，我一直在尝试从提供商处删除激活的路由，但测试床仍然没有通过。显示

错误：没有ActivatedRoute的提供者！

这是我的代码，我想在使用 Jasmine 的角度应用程序中运行我的测试床。

import { ActivatedRoute } from '@angular/router';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterModule, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

describe('SomeComponent', () => {
  let component: SomeComponent;
  let fixture: ComponentFixture<SomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [ RouterModule, RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [ ActivatedRoute ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

获取错误

Answer 1

您想向您的组件注入一个假的ActivatedRoute，因为您在测试中自己创建了它，因此路由器不会为您创建它并注入一个ActivatedRoute。所以你可以使用这样的东西：

describe('SomeComponent', () => {

  const fakeActivatedRoute = {
    snapshot: { data: { ... } }
  } as ActivatedRoute;

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [ RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [ {provide: ActivatedRoute, useValue: fakeActivatedRoute} ],
    })
    .compileComponents();
  }));
});

Answer 2

这是角度 7 的解决方案

{
    provide: ActivatedRoute,
    useValue: {
        snapshot: {
            paramMap: {
                get(): string {
                    return '123';
                },
            },
        },
    },
},

Answer 3

我只是通过将

RouterTestingModule

添加到 imports 而不是将

ActivatedRoute

添加到 Providers

来解决此问题

Answer 4

{
  provide: ActivatedRoute,
  useValue: {
    snapshot: {
      queryParamMap: {
        get(): number {
          return 6;
        }
      }
    }
  }
}

Answer 5

删除ActivatedRoute，这不需要测试

Answer 6

使用 RouterTestingModule 如 @Aydin 答案所示有效。然而，这已被弃用。因此，在装饰器下使用 applicationConfig({providers: [provideRouter(routes)] }) 也可以完美地工作。请参阅下面的示例：

const meta: Meta<MyComponent> = {
  title: 'My Component',
  component: MyComponent,
  decorators: [
    applicationConfig({
      providers: [provideRouter(routes)],
    }),
  ]
};