javascript - Angular 7 Test: NullInjectorError: No provider for ActivatedRoute - Stack Overflow

admin管理员组

文章数量:1134241

Hi have some error with testing my App made with Angular 7. I do not have much experience in angular, so I would need your help+

Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!

the testing code is like this:

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { BeerDetailsComponent } from './beer-detailsponent';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [ BeerDetailsComponent ]
    })
    pileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BeerDetailsComponent);
    component = fixtureponentInstance;
    fixture.detectChanges();
  });

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

I really can't find any solution.

Daniele

Hi have some error with testing my App made with Angular 7. I do not have much experience in angular, so I would need your help+

Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!

the testing code is like this:

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { BeerDetailsComponent } from './beer-details.component';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [ BeerDetailsComponent ]
    })
    .compileComponents();
  }));

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

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

I really can't find any solution.

Daniele

• javascript
• angular
• typescript
• testing
• jasmine

Share Improve this question Follow edited Nov 20, 2022 at 15:19 Sachila Ranawaka 41.3k88 gold badges6161 silver badges8787 bronze badges asked Dec 6, 2018 at 15:10 DanielDaniel 1,14922 gold badges77 silver badges88 bronze badges

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 155

You have to import RouterTestingModule

import { RouterTestingModule } from "@angular/router/testing";

imports: [
    ...
    RouterTestingModule
    ...
]

Add the following import

  imports: [ 
    RouterModule.forRoot([]),
    ...
  ],

I had this error for some time as well while testing, and none of these answers really helped me. What fixed it for me was importing both the RouterTestingModule and the HttpClientTestingModule.

So essentially it would look like this in your whatever.component.spec.ts file.

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProductComponent],
      imports: [RouterTestingModule, HttpClientTestingModule],
    }).compileComponents();
  }));

You can get the imports from

import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";

I dont know if this is the best solution, but this worked for me.

This issue can be fixed as follows:

1. In your corresponding spec.ts file import RouterTestingModule

   import { RouterTestingModule } from '@angular/router/testing';

2. In the same file add RouterTestingModule as one of the imports

    beforeEach(() => {
       TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       providers: [Service]
     });
    });
   

RouterTestingModule is deprecated. Use providerRouter or RouterModule.forRoot instead. The accepted answer uses RouterModule.forRoot. If you want to use providerRouter instead, add providers: [provideRouter([])] below imports

import { provideRouter } from '@angular/router';

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ AppComponent ],
      providers: [provideRouter([])],
    }).compileComponents();
  }

Example of a simple test using the service and ActivatedRoute! Good luck!

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { HttpClientModule } from '@angular/common/http';
    import { MyComponent } from './my.component';
    import { ActivatedRoute } from '@angular/router';
    import { MyService } from '../../core/services/my.service';


    describe('MyComponent class test', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let teste: MyComponent;
    let route: ActivatedRoute;
    let myService: MyService;

    beforeEach(async(() => {
        teste = new MyComponent(route, myService);
        TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        imports: [
            RouterTestingModule,
            HttpClientModule
        ],
        providers: [MyService]
        })
        .compileComponents();
    }));

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

    it('Checks if the class was created', () => {
        expect(component).toBeTruthy();
    });

    });

July 2024

Adding RouterModule to the imports worked for me:

await TestBed.configureTestingModule({
      declarations: [TestComponent],
      providers: [
        ...
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: of({ param1: 'value1'}),
          },
        },
      ],
  imports: [RouterModule],
}).compileComponents();

本文标签： javascriptAngular 7 Test NullInjectorError No provider for ActivatedRouteStack Overflow