Error on bootstrap with TRANSLATE_PROVIDERS

[svenloe]

Hello,

I use ng2-translate in my app version 2.1.0. After the update to Rc1 translate causes this error message:

system-polyfills.js:4 Error: Error: Invalid provider - only instances of Provider and Type are allowed, got: [object Object] at InvalidProviderError.BaseException [as constructor] (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/facade/exceptions.js:17:23) at new InvalidProviderError (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/di/reflective_exceptions.js:180:16) at eval (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/di/reflective_provider.js:162:19) at Array.forEach (native) at _normalizeProviders (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/di/reflective_provider.js:145:15) at eval (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/di/reflective_provider.js:156:13) at Array.forEach (native) at _normalizeProviders (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/di/reflective_provider.js:145:15) at eval (http://localhost:8080/ravgruppe-web/node_modules/@angular/core/src/di/reflective_provider.js:156:13) at Array.forEach
The translate.service is not provided. The typecheck fails.
The reflect-metadata version of Angular rc1 is 0.1.3 and the one of ng2-translate is 0.1.2.

main.ts file:
import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS} from '@angular/http'; import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate'; import 'rxjs/Rx'; import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router'; import {AppComponent} from './ravgruppe/app.component'; bootstrap(AppComponent, [HTTP_PROVIDERS,TRANSLATE_PROVIDERS, ROUTER_PROVIDERS]); //bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);

If I remove TRANSLATE_PROVIDERS bootstrap works but the pipes fail.

systemjs.config.js:
var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular', 'ng2-translate': 'node_modules/ng2-translate', 'angular2': 'node_modules/angular2' }; var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' }, 'ng2-translate': { defaultExtension: 'js' }, 'angular2': { defaultExtension: 'js' } };

Do you have an idea how I can fix the issue?

Yours
Sven

[svenloe]

I found a Solution:

const TRANSLATE_PROVIDERS2: any = [
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http),
deps: [Http]
}),
provide(TranslateService, {
useFactory: (http: Http, translateLoader: TranslateLoader) => new TranslateService(http, translateLoader, null),
deps: [Http, TranslateLoader]})
];

This constant works for me.

[matthieubouvier]

The solution provided by @svenloe worked for me: no more error bootstrapping the application.

But I got another error in the application main component constructor: the injected TranslateService is undefined.

So the browser console shows:

EXCEPTION: TypeError: Cannot read property 'query' of null
browser_adapter.js:77 EXCEPTION: TypeError: Cannot read property 'query' of nullBrowserDomAdapter.logError @ browser_adapter.js:77
browser_adapter.js:86 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of nullBrowserDomAdapter.logError @ browser_adapter.js:77
browser_adapter.js:77 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77
browser_adapter.js:77 Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
at resolvePromise (zone.js:538)
at PromiseCompleter.reject (zone.js:515)
at eval (application_ref.js:295)
at ZoneDelegate.invoke (zone.js:323)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:45)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)BrowserDomAdapter.logError @ browser_adapter.js:77
zone.js:461 Unhandled Promise rejection: Cannot read property 'query' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'query' of null(…)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null(…)consoleError @ zone.js:463

Two questions:

• The @svenloe solution is a workaround or the way to use providers ?
• Am I the only one to have these problems (providers/injection undefined at runtime) since the update to RC1 ?

Thanks in advance !

[svenloe]

Hello @matthieubouvierthales

for me ng2-translate works now with RC1. I have my constant in my main.ts and a constructor(private _translate: TranslateService). A Pipe: pipes: [TranslatePipe]. I set the _translate.setDefaultLang('en') and _translate.use('en').
Then it works for me.

My solution is a workaround ng2-translate should fix its constant.

Your stacktrace complains about 'query'. I do not see a connection to ng2-translate in the stacktrace. Perhaps it is an other part of your app that does not work.

[matthieubouvier]

Hello @svenloe,

The query is a service property, and the "null" service here is the TranslateService (seen with breakpoints).

[vmasek]

Possible solution:
I am at RC1 with angular-cli, had same problem and manged to get translate work. These are code parts that might be useful to locate yours problems.

System config: (notice format: 'cjs' at pacages config, without this option TranslateService was undefined )

System.config({
  map: {
    /* ... */
    'ng2-translate': 'vendor/ng2-translate',
    /* ... */
  },
  packages: {
   /* ... */
   'ng2-translate': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'ng2-translate'
    },
   /* ... */
  }
})

to vendor folder i am copying as 'ng2-translate/**/*.js' so 'ng2-translate/ng2-translate.js' and also 'ng2-translate/src/*.js' are copied

[svenloe]

I have moved to Angular-Cli and it works fine.