Providing TRANSLATIONS fails

[bananenklops]

Hello, i have a problem, following the instructions to use this tool.

if I compile the app, i got this error:

ERROR in src\app\app.module.ts(17,7): Error during template compile of 'AppModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'translations' was referenced
    Consider exporting 'translations'.

my app.module.ts looks like following:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material/material.module';
import {I18n} from '@ngx-translate/i18n-polyfill';

import {AppComponent} from './app.component';
import {NavigationComponent} from './navigation/navigation.component';
import {LayoutModule} from '@angular/cdk/layout';
import {DashboardComponent} from './dashboard/dashboard.component';
import {RouterModule, Routes} from '@angular/router';
import {QuestsComponent} from './quests/quests.component';
import {ProfileMenuComponent} from './profile-menu/profile-menu.component';
import {ProfileComponent} from './profile/profile.component';

declare const require;
const translations = require(`raw-loader!../locale/messages.en.xlf`);

const appRoutes: Routes = [
    {path: '', component: DashboardComponent},
    {path: 'dashboard', component: DashboardComponent},
    {path: 'profile', component: ProfileComponent},
    {path: 'quests', component: QuestsComponent}
];

@NgModule({
    declarations: [
        AppComponent,
        NavigationComponent,
        DashboardComponent,
        QuestsComponent,
        ProfileMenuComponent,
        ProfileComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MaterialModule,
        LayoutModule,
        RouterModule.forRoot(
            appRoutes,
            // {enableTracing: true} // <-- debugging purposes only
        ),
    ],
    providers: [
        {provide: TRANSLATIONS, useValue: translations},
        {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
        I18n
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

[florent1933]

I have the same issue.

@bananenklops, did you resolve it?

[florent1933]

@bananenklops , I found how to resolve it:

Remove this line from your code

const translations = require(`raw-loader!../locale/messages.en.xlf`);

and put it directly in the providers field:

  providers: [
    {provide: TRANSLATIONS, useValue: require("raw-loader!../i18n/messages.fr.xlf")},
    I18n
  ],

[dsnoeck]

If you still need to keep the translations variable before @NgModule (ie you are loading dynamically the language), simply add export in front:

const locale = localStorage.getItem('locale');
declare const require;
export const translations = require(`raw-loader!../locale/messages.${locale}.xlf`);

[pwhissell]

official documentation probably needs to be adapted https://angular.io/guide/i18n#merge-with-the-jit-compiler