No provider for Platform

Question

So I have come across this issue making a unit test for an Angular 4 application

What happens is that it keeps giving the error stated here in the question title.

I tried to google it, tried to import a whole bunch of different modules and finally found that a close answer to what this "Platform" is might be the browserModule from @angular/browser Platform.

So in my unit testing, I tried to import it and declare it but it did not help.

Can anyone please help with this as I'm not even sure what this "Platform" is?

Question: what is exactly this "Platform" in the error and how to fix it?

Thanks.

I have attached my code as below:

import { ComponentFixture, TestBed, async} from "@angular/core/testing";
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA, PlatformRef} from 
"@angular/core";
import { TeamCreationAssignmentComponent } from "./team-creation-assignment.component";
import { OdmService } from "../../services/odm/odm.service";
import { UserNotificationService } from "../../services/user/user-notification.service";
import { MatSnackBar } from "@angular/material";
import { OVERLAY_PROVIDERS, ScrollStrategyOptions, ScrollDispatcher} from "@angular/cdk/overlay";

describe('Team creation assignment component', () => {
let comp: TeamCreationAssignmentComponent;
let fixture: ComponentFixture<TeamCreationAssignmentComponent>;

let odmServiceSub = {};


beforeEach(async(() => {
    TestBed.configureTestingModule({

        declarations: [TeamCreationAssignmentComponent],
        //imports: [BrowserModule],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [
            {provide: OdmService, useValue: odmServiceSub}, 
            UserNotificationService, 
            MatSnackBar, 
            OVERLAY_PROVIDERS, 
            ScrollStrategyOptions,
            ScrollDispatcher,
        ],
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(TeamCreationAssignmentComponent);
    comp = fixture.componentInstance;
});

it('should have defined component', () => {
    expect(comp).toBeDefined();
})

});

What is a platform already have answers [here](https://stackoverflow.com/questions/38407604/what-is-angular-platform-browser) and there are more results in Google Search. — sabithpocker, Nov 17 '17 at 07:22
Thanks a lot for the clarification of what "Platform" is. But like I said, I tried browsermodule in my testing code but nothing worked — red_Coder, Nov 17 '17 at 07:39
If you are using `@angular-cli` generate a component using it `ng g c dummy` then check the spec file generated and compare with yours. — sabithpocker, Nov 17 '17 at 07:48
@sabithpocker I compared the dummy test spec with mine, there is literally not much of a difference except that in my spec ts file, I have a lot more providers. But I have to declare the providers otherwise it will throw a bunch of errors to me. I resolved a lot of other "no provider for XXX" errors before I came down here to this "No provider for Platform" — red_Coder, Nov 17 '17 at 08:05

score 5 · Answer 1 · answered Jan 31 '18 at 22:40

5

I ran into a similar problem (in Angular 5) using FocusMonitor and wanting to test the component depending on it. FocusMonitor in turn has a dependency of Platform.

In your case it's the same dependency with ScrollDispatcher.

You'll need to add Platform in your TestBed's providers

import { Platform } from '@angular/cdk/platform';

...

providers: [
  {provide: OdmService, useValue: odmServiceSub}, 
  UserNotificationService, 
  MatSnackBar, 
  OVERLAY_PROVIDERS, 
  ScrollStrategyOptions,
  ScrollDispatcher,
  Platform
]

answered Jan 31 '18 at 22:40

zbateson

1,044
10
11

Unfortunately, I was not part of that project anymore. Let me pass it to my teammate and see if this works. Thanks for your answer. – red_Coder Mar 05 '18 at 06:45
Confirmed that this works. Should be the accepted answer. – yoonjesung May 04 '18 at 16:28

score 0 · Answer 2 · answered Nov 17 '17 at 08:49

Whenever you get a message that there is "No provider for XXX" it generally means that you are missing something from the providers array in the configureTestingModule method. Have you tried adding PlatformRef to the providers array? Like this:

providers: [
    {provide: OdmService, useValue: odmServiceSub}, 
    UserNotificationService, 
    MatSnackBar, 
    OVERLAY_PROVIDERS, 
    ScrollStrategyOptions,
    ScrollDispatcher,
    PlatformRef // <- added here
],

One thing you are missing however is a call to detectChanges in your second beforeEach, it should look like this:

beforeEach(() => {
    fixture = TestBed.createComponent(TeamCreationAssignmentComponent);
    comp = fixture.componentInstance;
    fixture.detectChanges(); // <- this is required
});

One thing I will say is that in my Angular 4 app, there are around 800 unit tests, and not a single one of them uses or requires this PlatformRef. I think the issue is the missing detectChanges rather than anything to do with this "platform".

One thing I forgot to mention is that I used angular material throughout the application, don't know if that could be the cause. But I'll try your suggestion once I get a chance and let you know. Thanks — red_Coder, Nov 17 '17 at 12:56

No provider for Platform

2 Answers2