Angular 8:A platform with a different configuration has been created. Please destroy it first

Question

i'm trying to test this simple test service which basically provides the magic number via getMagicNumber api. It's constructor inject a magic Number via Injection Token which is provided at platform level Injector.

But while executing the unit tests against Test Service , i'm getting following error

Chrome 79.0.3945 (Windows 10.0.0) ERROR An error was thrown in afterAll Error: A platform with a different configuration has been created. Please destroy it first. at assertPlatform (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:31506:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:31489:1 at Module../src/main.ts (http://localhost:9876/_karma_webpack_/webpack:/src/main.ts:11:23) at webpack_require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1) at Module../src/app/test.service.ts (http://localhost:9876/_karma_webpack_/main.js:452:66) at webpack_require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1) at Module../src/app/test.service.spec.ts (http://localhost:9876/_karma_webpack_/webpack:/src/app/test.service.spec.ts:1:1)
at webpack_require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1) at webpackContext (http://localhost:9876/_karma_webpack_/webpack:/src sync .spec.ts$:9:1) Chrome 79.0.3945 (Windows 10.0.0): Executed 3 of 3 ERROR (0.146 secs / 0.127 secs)

Here are the unit test from test.service.spec.ts file

    import { TestBed, inject } from "@angular/core/testing";
import { TestService } from "./test.service";
import { MAGIC_NUMBER } from "src/main";

describe("Testing Test Service", () => {
  testService: TestService;
  beforeEach(() => {
    TestBed.configureCompiler({
      providers: [
        {
          provide: MAGIC_NUMBER,
          useValue: 007
        },
        TestService
      ]
    });

    this.testService = TestBed.get(TestService);
  });
  it("Should create TestService", () => {
    expect(this.testService).toBeTruthy();
  });
});

Here is the code of Test Service

import { Injectable, Inject } from "@angular/core";
import { MAGIC_NUMBER } from "src/main";

@Injectable({ providedIn: "root" })
export class TestService {
  constructor(@Inject(MAGIC_NUMBER) private magicNumber) {}
  getMagicNumber() {
    return this.magicNumber;
  }
}

I get above mention error, if i added this line of code in test.service.spec.ts file

 TestBed.configureTestingModule({
      providers: [
        {
          provide: MAGIC_NUMBER,
          useValue: 007
        },
        TestService
      ]
    });

How to fix this issue. Here is the link to the source code.source-code-link

serrulien serrulien · Accepted Answer · 2020-02-02T17:14:31

You import MAGIC_NUMBER from src/main but in src/main, you have the following:

platformBrowserDynamic([
  {
    provide: MAGIC_NUMBER,
    useValue: 111
  }
])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

which configure the platform. Note that when you import a file or a member of it, some side effect can happen. Thus, you are bootstraping your application. But the test environment already do it for you. That's why you have the error. It's not possible to bootstrap the application twice. To solve this, you need to move the token declaration outside of src/main.

For example, you can create src/app/token.ts.

import {InjectionToken} from "@angular/core";

export const MAGIC_NUMBER = new InjectionToken<{}>("MAGIC_NUMBER");

And import it like:

import { MAGIC_NUMBER } from "./token";

Moreover, you want to create a context that will delegate the instantiation of needed classes to Angular. Replace TestBed.configureCompiler by TestBed.configureTestingModule.

 TestBed.configureTestingModule({
  providers: [
    {
      provide: MAGIC_NUMBER,
      useValue: 007
    },
    TestService
  ]
});

I have also noticed some errors in your test file, I'm going to make a PR on your github repository.

Angular 8:A platform with a different configuration has been created. Please destroy it first

2 Answers