Error encountered resolving symbol values statically

[mveroukis]

I'm new to npm, angular2 & angular-cli. I simply created a new app using "ng new" and then added angular-translator with npm - exactly as described in the docs. And here's my setup:

@angular/cli: 1.0.0 node: 7.8.0 os: win32 x64 @angular/common: 4.0.1 @angular/compiler: 4.0.1 @angular/core: 4.0.1 @angular/forms: 4.0.1 @angular/http: 4.0.1 @angular/platform-browser: 4.0.1 @angular/platform-browser-dynamic: 4.0.1 @angular/router: 4.0.1 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.1

In my package.json I have:

"angular2-translator": "^1.4.2",

And when I do ng build, I get this:

ERROR in Error encountered resolving symbol values statically. Calling function 'TranslateConfig', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol TranslatorModule in C:/Users/michaelv/Dev/TestSite4/node_modules/angular2-translator/src/TranslatorModule.ts, resolving symbol TranslatorModule in C:/Users/michaelv/Dev/TestSite4/node_modules/angular2-translator/src/TranslatorModule.ts

Not sure what I'm doing wrong. I see that there have been similar issues reported recently but also that v1.4 should have addressed that. Am I doing something wrong or does angular-translator simply not work with the latest angular-cli?

[tflori]

yes, that is a known bug from angular cli or angular compiler:

• https://github.com/angular/angular/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20resolving%20symbol%20values%20statically
• https://github.com/angular/angular/issues/15287

This is the reason the module is currently not working. you have two options: for development you can start with ng serve and when it is startet you can modify a file from another terminal / window. like touch app.module.ts.

The second option is to declare everything by your own:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
  TranslateLoader,
  TranslateLogHandler,
  TranslateLoaderJson,
  TranslateLoaderJsonConfig,
  TranslateConfig,
  TranslateService,
  TranslatePipe,
  TranslateComponent
} from 'angular2-translator';

import { AppComponent } from './app.component';

export class MyTranslateConfig extends TranslateConfig {
  constructor() {
    super({
      defaultLang: 'de',
      providedLangs: ['de', 'en'],
    });
  }
}

@NgModule({
  declarations: [
    AppComponent,
    TranslatePipe,
    TranslateComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    { provide: TranslateConfig, useClass: MyTranslateConfig },
    { provide: TranslateLoaderJsonConfig, useClass: TranslateLoaderJsonConfig },
    { provide: TranslateLoader, useClass: TranslateLoaderJson },
    { provide: TranslateLogHandler, useClass: TranslateLogHandler },
    TranslateService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

[mveroukis]

Ok thanks for the speedy response, I'll take a look at that.

[tflori]

there is a new version (1.4.3) that makes it somebit easier for angular cli:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TranslateComponent, TranslatePipe, TRANSLATE_PROVIDERS} from 'angular2-translator';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    TranslatePipe,
    TranslateComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  providers: [
    TRANSLATE_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

You just can't use the translator module at the moment. I hope they will fix it because in version 2 there are no TRANSLATE_PROVIDER anymore...