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

Posted 2023-02-26

【中文标题】Angular 4 - 失败：无法解析 ActivatedRoute 的所有参数：(?, ?, ?, ?, ?, ?, ?, ?)

【英文标题】：Angular 4 - Failed: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

【发布时间】：2018-06-13 03:33:25

【问题描述】：

我已参考以下链接来获得答案，但我找不到适合我的方案的任何有效解决方案。 Error: (SystemJS) Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

因此，我一直在尝试从提供程序中删除已激活的路由，但测试台仍然没有通过。它显示

错误：ActivatedRoute 没有提供程序！

这是我的代码，我想在使用 Jasmine 的 Angular 应用程序中运行我的测试平台。

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

获取错误

【问题讨论】：

ActivatedRoute 是RouterModule 已经定义的提供者之一，您不应再次包含它。另请注意，RouterTestingModule 可能更适合您的需求。

【参考方案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();
  ));
);

【讨论】：

问题是，如何填充快照对象以使其工作？

为什么我必须伪造它？互联网上是否有我实际模拟阅读 URL 的示例？

【参考方案2】：

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

【参考方案3】：

这是 Angular 7 的解决方案

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