Angular-cli: can't get i18n to work, System is not defined

[ishehata]

i have just updated my package.json to use angular 4, and then i said let's dumb ng2-translate and use angular default i18n instead. i have been following this guide:

https://angular.io/docs/ts/latest/cookbook/i18n.html

but i am stuck with two errors:

ReferenceError: System is not defined[Learn More]  localhost:8080:25:5

Error: Cannot find module './locale/messages.ar.xlf!text'.

here is my pacjage.json

{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "build": "ng build --prod",
    "build-aot": "ng build --prod --aot",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",

     "systemjs": "0.19.40",
    "angular2-jwt": "^0.1.28",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng2-charts": "^1.4.1",
    "ng2-facebook-sdk": "^1.2.0",
    "rxjs": "^5.1.0",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0-rc.5",
    "@types/facebook-js-sdk": "^2.8.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.46",
    "codelyzer": "~2.0.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.1.1",
    "webdriver-manager": "10.2.5"
  }
}

and i have this code in "index.html":

document.locale = 'ar';
    // Map to the text plugin
    System.config({
      map: {
        text: 'systemjs-text-plugin.js'
      }
    });

that's where it says System is not defined.

my main.ts:

import './polyfills';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import { getTranslationProviders } from './app/i18n-providers';

if (environment.production == false) {

} else {
  enableProdMode();
}

// platformBrowserDynamic().bootstrapModule(AppModule)
//     .then(success => null)
//       .catch(err => console.error(err));

getTranslationProviders().then(providers => {
  const options = { providers };
  platformBrowserDynamic().bootstrapModule(AppModule, options);
});

src/app/i18n-providers.ts

import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

export function getTranslationProviders(): Promise<Object[]> {
  // Get the locale id from the global
  const locale = document['locale'] as string;
  // return no providers if fail to get translation file for locale
  const noProviders: Object[] = [];
  // No locale or U.S. English: no translation providers
  if (!locale || locale === 'en-US') {
    return Promise.resolve(noProviders);
  }
  // Ex: 'locale/messages.es.xlf`
  const translationFile = `./locale/messages.${locale}.xlf`;
  return getTranslationsWithSystemJs(translationFile)
    .then( (translations: string ) => [
      { provide: TRANSLATIONS, useValue: translations },
      { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
      { provide: LOCALE_ID, useValue: locale }
    ])
    .catch(() => noProviders); // ignore if file not found
}
declare var System: any;
function getTranslationsWithSystemJs(file: string) {
  return System.import(file + '!text'); // relies on text plugin
}

[filipesilva]

Heya, the i18n instructions shown at https://angular.io/docs/ts/latest/cookbook/i18n.html is meant to be used with the SystemJS setup shown on the docs overall, and not the CLI.

The CLI has a specific i18n commands that should make it easier: https://github.com/angular/angular-cli/wiki/stories-internationalization

[ishehata]

thanks, totally didn't notice at first that i can run --aot in development environment. i18n is working for me now (Y)

[nmcclay]

Can somebody clarify if this means AOT is the only way to provide localization if you are using Angular-CLI? Is there any support for JIT translations with Angular-CLI?

[jignesh-parekh-roche]

Dude! You saved my day. It really helps !! I was getting the exact same error mentioned above and after following the post, it worked for me! 👍

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}