i18n-polyfill
i18n-polyfill copied to clipboard
Providing TRANSLATIONS fails
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 {
}
I have the same issue.
@bananenklops, did you resolve it?
@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
],
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`);
official documentation probably needs to be adapted https://angular.io/guide/i18n#merge-with-the-jit-compiler