Core: TranslateStore not providable in test: No provider for TranslateStore

Created on 28 Mar 2017  路  12Comments  路  Source: ngx-translate/core

I'm submitting a ... (check one with "x")

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
After update from ng2-translate 5.0.0 (and following https://github.com/ngx-translate/core/blob/master/MIGRATION_GUIDE.md) a test fails with Error: No provider for TranslateStore! in config/spec-bundle.js (line 124915).

Expected/desired behavior
Test should run successfully.

Reproduction of the problem
Since I'm not able to run a test in a plunkr, I add the code that fails here:

describe('TestComponent', () => {
  beforeEach(() => TestBed.configureTestingModule({
    providers: [
      BaseRequestOptions,
      MockBackend,
      HttpClient,
      TranslateService,
      {
        provide: TranslateLoader,
        useFactory: function (http: Http) {
          return new TranslateHttpLoader(http);
        },
        deps: [ Http ]
      },
      {
        provide: Http,
        useFactory: function (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
          return new Http(backend, defaultOptions);
        },
        deps: [ MockBackend, BaseRequestOptions ]
      },
      {
        provide: Router,
        useClass: class {}
      },
      {
        provide: ActivatedRoute,
        useValue: {
          params: Observable.of({id: 1})
        }
      }
    ]
  }));

  it('should not log ngOnInit', inject([ AbsenceComponent ], (absence: AbsenceComponent) => {
    spyOn(console, 'log');
    expect(console.log).not.toHaveBeenCalled();

    absence.ngOnInit();
    expect(console.log).not.toHaveBeenCalled();
  }));
});

Additional information
So, the TranslateStore is somehow not provided, but when I try to provide it similarly to the MockBackend or the HttpClient, I import it from @ngx-translate/core, but the TranslateStore is not an exported member (https://github.com/ngx-translate/core/blob/master/index.ts, see missing export on the top) and therefore I get the error Error:(8, 10) TS2305:Module '"node_modules/@angular/compiler/index"' has no exported member 'ResourceLoader'. And even when I manually edit the index.ts to add the missing export, I get the error Error: Invalid provider for the NgModule 'DynamicTestModule' - only instances of Provider and Type are allowed, got: [BaseRequestOptions, MockBackend, TranslateService, ?undefined?, ...] in config/spec-bundle.js (line 26501).

Please tell us about your environment:

  • ngx-translate version:
    @ngx-translate/core: 6.0.1
    @ngx-translate/http-loader: 0.0.3

  • Angular version: 2.4.10

Review

Most helpful comment

Possible workaround:

import { TranslateModule, TranslateService, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
....

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        TranslateModule.forRoot({
          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
        })
      ],
      ...

All 12 comments

Same issue. require fix, because i have to add
import { TranslateStore } from "@ngx-translate/core/src/translate.store";
and
providers: [ TranslateStore ],
in AppModule.
I also use forChild in SharedModule

+1

+1. Also will be helpful if somebody add to README.md working unit test example (based on generated angular-cli) for main app module with ngx-translate

Try to import TranslateModule in test it should help you guys.

The same problem here.. Angular 4.1.0, angular-cli 1.0.3 and ngx-translate - latest. and I had to provide TranslateStore

Get "No provider for TranslateStore!" when running karma tests.

"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "0.0.3",
angular : 2.4.1

Here is example of the Test

 beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                TranslateModule,
            ],
            declarations: [
                LoginPageComponent,
                NgForm,
                TranslatePipe,
            ],
            providers: [
                {provide: AuthenticationService, useClass: AuthenticationServiceMock},
                {provide: Router, useClass: RouterMock},
                TranslateService,
                {provide: TranslateHttpLoader, useClass: TranslateLoaderMock},
            ],
            schemas: [NO_ERRORS_SCHEMA],
        });
        TestBed.compileComponents().then(() => {
            fixture = TestBed.createComponent<LoginPageComponent>(LoginPageComponent);
            fixture.detectChanges();
            compiledLoginPage = fixture.nativeElement;
            loginPageComponent = fixture.componentInstance;
        });
    }));

Having the same issue as well.. Angular 4.1.3, Angular-CLI 1.0.6, ngx-translate 6.0.1

Possible workaround:

import { TranslateModule, TranslateService, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
....

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        TranslateModule.forRoot({
          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
        })
      ],
      ...

Same problem here, i am just using the forChild method in a SharedModule and thus getting the same runtime error (no provider for TranslateStore).
I tried all ngx-translate versions but the problem was still there. Currently i am using @RostyslavAH's workaround

Suggestion by @pumano worked for me.

Also noticed that TranslateStore is being exported as ea in core.d.ts in @ngx-translate/core/. Seems like that should be refactored and be part of the main export to permanently fix this.

The workaround (and most of the issues in this thread) seem to stem from unittesting.

I also face a similar problem - I can't mock the TranslateStore anymore because I can't import it properly in my Angular 5 project. I also think @Bjeaurn recommendation would fix this problem

Hello, I'm closing this issue because it's too old.
If you have a similar problem with recent version of the library, please open a new issue.

You can find an example of unit test here: https://github.com/ngx-translate/example/blob/master/src/app/app.component.spec.ts

Was this page helpful?
0 / 5 - 0 ratings

Related issues

egornoveo picture egornoveo  路  4Comments

IterationCorp picture IterationCorp  路  3Comments

louisdoe picture louisdoe  路  3Comments

jellene4eva picture jellene4eva  路  3Comments

madoublet picture madoublet  路  3Comments