Update i18n documentation (2.4.x): System is not defined #3279

MickL · 2017-02-19T22:20:22Z

Following the i18n cookbook i get System is not defined.

Im using latest Angular CLI. My index.html looks like this:

<body>
  <app-root>Loading...</app-root>

  <script>
    // Get the locale id somehow
    document.locale = 'de';

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

    // Launch the app
    System.import('app').catch(function(err){ console.error(err); });
  </script>
</body>

The text was updated successfully, but these errors were encountered:

MickL · 2017-02-19T22:21:13Z

Took me ages to figure this out. Documentation should be updated. Probably the problem is that the documentation suggests Angular CLI which is not using system.js. Also System.js has the global namespace "SystemJS" instead of "System".

Download system.js, put it in root (/app) and import it before the script tag.
In index.html remove the System.import('app')
Rename everything from System to SystemJS (index.html, i18n-provides.ts)

Finally it looks like this:

index.html

<body>
  <app-root>Loading...</app-root>

  <script src="system.js"></script>
  <script>
    // Get the locale id somehow
    document.locale = 'es';

    // Map to the text plugin
    SystemJS.config({
      map: {
        text: 'systemjs-text-plugin.js'
      }
    });
  </script>
</body>

i18n-providers.ts

export function getTranslationProviders(): Promise<Object[]> {
   [...]
}

declare let SystemJS: any;

function getTranslationsWithSystemJs(file: string) {
  return SystemJS.import(file + '!text'); // relies on text plugin
}

Foxandxss · 2017-02-20T10:54:03Z

That is not the proper solution for the CLI either.

We are cooking a solution for certain guides to provide alternative solutions for the CLI and webpack.

Closing as duplicated (#3238)

MickL · 2017-02-20T12:19:08Z

At least it is a solution. Someone who reads the cookbook is probably unexperienced like me and ends frustrated there.

Foxandxss · 2017-02-20T12:20:02Z

Believe me, it is not. That will only lead to more grief and pain.

MickL · 2017-02-20T12:23:56Z

Could you please explain why its pain because my project is nearly in production with this. There were no other help, tutorials or answers in the whole www.

Foxandxss · 2017-02-20T12:28:10Z

Because you are mixing different loaders. CLI uses webpack so you need to use a webpack solution. System.JS is another option.

It is like riding a motorbike inside a car because one tire was flat.

@filipesilva do you have any idea in how to do it with the CLI?

MickL · 2017-02-20T12:32:38Z

Ah okay see i didn't know that! Funny to get some light in the dark.

I wouldn't compare it like this. Lets say i drive with a car around the world but to get food i use a motorcycle?

The only need of system.js in my project is to load the translation files. There are probably lighter solutions than 18kb JavaScript + text-plugin.

Thanks for your answer! In my opinion documenation should be updated as fast as possible. At least there should be a warning like "Angular CLI is not using system.js". While we are talking probably more and more users get trapped there.

Foxandxss · 2017-02-20T12:34:59Z

I wouldn't compare it like this. Lets say i drive with a car around the world but to get food i use a motorcycle?

No, you are mixing both together, at the same time.

I bet the CLI can load your translations files without anything extra nor system.js.

Let's see if Filipe has something to say or I will try later myself.

MickL · 2017-02-20T12:36:51Z

I guess its good like this because i use AOT-compilation while he grabs translations with system.js JIT. (AOT translation-documentation is missing some extra work which is not covered on official documentation nor anywhere i found)

filipesilva · 2017-02-20T12:58:17Z

Heya @MickL, I have good news and bad news.

Good news is that i18n use/extract functionality is present in the CLI. Bad news is that it's fairly new it's not well documented.

We have an issue to track documentation for this, but it hasn't been documented yet: angular/angular-cli#2711

The best I can do right now is to point you to the tests to see how we test it's working. The gist of it is that you can extract the messages using ng xi18n and use files with ng build --aot --i18n-file.

Translation usage test: https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/aot/aot-i18n.ts
Extraction tests: https://github.com/angular/angular-cli/tree/master/tests/e2e/tests/i18n

MichaelBitard · 2017-03-02T16:11:05Z

Correct me if I'm wrong, from what I see in the tests, it seems the i18n is static? You cant have a multi-lang application? You have to build one application for each language?

MickL · 2017-03-02T16:34:03Z

The documentation shows the JIT method where you have only one build. Actually i use a single AOT prebuild app with JIT translations. You could improve performance by prebuild every language separate which is barely covered in documentation.

MichaelBitard · 2017-03-02T16:46:14Z

Yes but as @Foxandxss said the JIT method use SystemJS, it's not a viable option.

MickL · 2017-03-02T16:52:42Z

@filipesilva Does it create a single index.html and a separate build for every language? Would be awesome! (Looking forward for the documentation. Wiki looks great already!)

MeMeMax · 2017-03-09T07:42:00Z

So is a JIT version for i18n translations in CLI coming or will there only be AOT support?

MickL mentioned this issue Feb 19, 2017

Update i18n documentation: System is not defined angular/angular#14169

Closed

Foxandxss closed this as completed Feb 20, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update i18n documentation (2.4.x): System is not defined #3279

Update i18n documentation (2.4.x): System is not defined #3279

MickL commented Feb 19, 2017

MickL commented Feb 19, 2017 •

edited

Loading

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017 •

edited

Loading

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017 •

edited

Loading

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017

filipesilva commented Feb 20, 2017

MichaelBitard commented Mar 2, 2017

MickL commented Mar 2, 2017 •

edited

Loading

MichaelBitard commented Mar 2, 2017

MickL commented Mar 2, 2017 •

edited

Loading

MeMeMax commented Mar 9, 2017

Update i18n documentation (2.4.x): System is not defined #3279

Update i18n documentation (2.4.x): System is not defined #3279

Comments

MickL commented Feb 19, 2017

MickL commented Feb 19, 2017 • edited Loading

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017 • edited Loading

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017 • edited Loading

Foxandxss commented Feb 20, 2017

MickL commented Feb 20, 2017

filipesilva commented Feb 20, 2017

MichaelBitard commented Mar 2, 2017

MickL commented Mar 2, 2017 • edited Loading

MichaelBitard commented Mar 2, 2017

MickL commented Mar 2, 2017 • edited Loading

MeMeMax commented Mar 9, 2017

MickL commented Feb 19, 2017 •

edited

Loading

MickL commented Feb 20, 2017 •

edited

Loading

MickL commented Feb 20, 2017 •

edited

Loading

MickL commented Mar 2, 2017 •

edited

Loading

MickL commented Mar 2, 2017 •

edited

Loading