Angular / Ivy error : Error: Token InjectionToken XXXXXXXXX is missing a ɵprov definition

Question

Getting the error after updating to Angular 9 / Ivy compiler

ERROR Error: Token InjectionToken XXXXXXXXX is missing a ɵprov definition.
    at injectableDefOrInjectorDefFactory (vendor.js:47105)
    at providerToFactory (vendor.js:47210)
    at resolveProvider$1 (vendor.js:56430)

Answer 1

This can occur if you try to explicitly override an inherited injectable with undefined or null.

In Angular 8 this was ok

    {
        provide: AMBIENT_CART,
        useExisting: undefined
    }

With Angular 9 it needs to be changed to

    {
        provide: AMBIENT_CART,
        useValue: undefined
    }

If you're curious: In my case I was doing this for safety reasons, to make sure I didn't use this particular injectable by mistake.

Answer 2

I got the same error when running ng test after upgrading from Angular 8 --> 9: "Error: Token InjectionToken apiToken is missing a ɵprov definition."

My solution to this was very simple- there was a typo in the spec file that I guess didn't matter in Angular 8, but does in Angular 9? The last instance of 'useValue' below was incorrectly written 'usevalue'. Such an obscure error!

TestBed.configureTestingModule({ 
    imports: [ HttpClientTestingModule ], 
    providers: [ 
        { provide: ApiService, useValue: apiService }, 
        { provide: ProductsApiService, useValue: productsService }, 
        { provide: apiToken, useValue: mockApiToken } 
    ] 
});

Answer 3

I started receiving this error while running unit tests after upgrading an application from Angular 8 to Angular 10. The issue occurred because the existing spec file was using value instead of useValue in the providers array as shown in the below sample. Fixed the issue by changing it to useValue.

    beforeEach(async(() => {
    void TestBed.configureTestingModule({
        declarations: [
            MockPipe(TranslatePipe),
        ],
        imports: [
            HttpClientTestingModule,
        ],
        providers: [
            FormBuilder,
            MessageService,
            { provide: MESSAGES_TOKEN, value: {} }, //changed to useValue
        ]
    }).compileComponents();
}));

Answer 4

I had the same error when I updated Angular to version >= 9 (Token InjectionToken XxXxXxXx is missing a ɵprov definition), especifically when I ran tests and these tests had providers as MatDialogRef and MAT_DIALOG_DATA from Angular Material.

My solution was replace the providers config in the beforeEach() section. look at:

Before:

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

beforeEach(async(() => {
            TestBed.configureTestingModule({
                    imports : [
                        ...
                    ],
                    declarations: [
                        ...
                    ],
                    providers: [
                        { provide: MatDialogRef },
                        { provide: MAT_DIALOG_DATA }
                    ]
            }).compileComponents();

    })); 

After:

import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';

beforeEach(async(() => {
            TestBed.configureTestingModule({
                    imports : [
                        ...
                    ],
                    declarations: [
                        ...
                    ],
                    providers: [{
                        provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}
                    }]
            }).compileComponents();