Angular2 Docs not providing webpack + i18n solution (for aot)

[emreavsar]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior The current docs[1] (and provided plunkr [2] example) shows a systemjs solution for i18n and not webpack.

Expected behavior Since angular moved to webpack, this doc should be updated to use webpack instead of systemjs for i18n.

Minimal reproduction of the problem with instructions Not needed. Go to the docs page [1].

• Angular version: All versions until now (2.4.x)

• Browser: all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TS

• References: [1] i18n docs: https://angular.io/docs/ts/latest/cookbook/i18n.html

Since i18n is a big part of enterprise applications, this should be working out of the box with the provided toolbox.

The only thing I found was this unofficial guide: https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.mqatiqpol

[Foxandxss]

There is nothing on the docs about the subject just yet. We are bringing our Webpack documentation back to the game. So we need to bring AoT, lazy and of course i18n.

That is my next task :)

[emreavsar]

Any prediction when this will be done?

[DanPride]

I don't think the viewpoint of the average grunt developer is making up to the powers that be on this process. It would have taken maybe an hour or two of staff effort to at least put a red star and a note on the main documentation pages regarding the now erroneous documentation (at least erroneous for web-pack users), and its been erroneous for months now, instead hundreds of developers wind up casting around, collectively wasting thousands of hours, and eventually wind up here or in the chapter "additional documentation", not exactly the first thing newbies read. Great product but PLEASE PLEASE PLEASE increase the budget for documentation to keep it current and valid at all times (and more plain spoken and briefer), asking developers to bear this disproportionate inconvenience for the minimal effort to provide valid info at all times seems just good business for us all.

[wardbell]

We'd like to publish information about this too. We regret that we do not have that information at the moment and we do not have a predicted delivery date for it either.

It is not correct to say that "angular moved to webpack". Angular has no commitment to a particular module loader. Our examples continue to demonstrate both systemjs and webpack modalities.

[chpoit]

Any updates on this? I would like to know if it's even possible/simple to use Webpack (With htmlWebpackplugin) +aot + i18n. I figured out the Webpack + aot part, but I can'T find anything that throws i18n in there too. Maybe I just can't find it, but it would be nice for it to be clearly explained in the docs.

[emreavsar]

if you're using angular-cli, check this: https://github.com/angular/angular-cli/wiki/stories-internationalization

[michahell]

Any updates? this is still very unclear. Without using @angular/CLI, one runs into all sorts of problems extracting translation requirements using either ./node_modules/.bin/ng-xi18n or ng xi18n...

[Foxandxss]

Yes sorry. We are currently migrating all examples to use the CLI and also update the prose. The current plan for the i18n chapter is to change the systemjs instructions at the end for CLI instructions.

There is no plan for webpack instructions per se.

[michahell]

@Foxandxss Unrelated to either JIT or AOT compilation, is there a way to only specify .HTML files to the xi18n tool? Instead of it actually trying to compile and find templates itself (which, for us, does not work, because we use webpack and require() calls to template paths instead of directly using template paths.) ?

[Foxandxss]

Let's summon the man who knows @ocombe

[ocombe]

There is no way to do that outside of using the cli, or at least using the webpack plugin developed for the cli: https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/extract_i18n_plugin.ts which is defined like this: https://github.com/angular/angular-cli/blob/d52d290c80dc06b9f9c42797aceeebe678231fc7/packages/%40angular/cli/models/webpack-configs/xi18n.ts

I've never tried to add it manually to a webpack project outside of the cli though, but I guess that it'll extract the translation files during the compilation ?

[michahell]

Thank you for your fast reply @ocombe ! Yes, that is how it should work ideally but I can not even get it to work using the command line (ng-xi18n cannot resolve template paths), because of the way we reference template paths in our component definitions:

@Component({
    selector: 'attach-files',
    styles: [require('./attach-files.scss')],
    template: require('./attach-files.html')
})

Hence, I went looking for an Angular webpack xi18n plugin. But by looking at the source, here: https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/extract_i18n_plugin.ts#L172 I get the idea that the Angular webpack xi18n plugin is just a wrapper around ng-xi18n.

If that is correct, then I still need a way to resolve the template paths for ng-xi18n to be able to find the templates :/ I have not sufficient webpack knowledge yet, but this is the problem i'm struggling with.

[ocombe]

Yes it's a wrapper. But what it does is that it runs all the other webpack plugins first to resolve the files, transform them if necessary (for sass files, requires, etc...) so that the ngc compiler can understand the files as if they were regular ts files. It's the same thing that the AoTPlugin does.

the i18n extraction is very similar to the aot compilation, it compiles the application but instead of transforming the templates to js code, it extracts the i18n messages. I'll try to create a small demo project that uses the extraction without the cli

[michahell]

Ah, great! I was hoping that was the case. I should be able to trial and error my way through webpack and Angular xi18n then, with the help of the webpack (wrapper) plugin!

[ocombe]

Ok I've tested to use the plugin on its own with an ejected cli application and it works, you just need to add it to your webpack plugins after the AoTPlugin:

"plugins": [
  // ...
  new AotPlugin({
    "mainPath": "main.ts",
    "i18nFile": "src/i18n/messages.fr.xlf",
    "i18nFormat": "xlf",
    "locale": "fr",
    "replaceExport": false,
    "missingTranslation": "error",
    "hostReplacementPaths": {
      "environments\\environment.ts": "environments\\environment.ts"
    },
    "exclude": [],
    "tsConfigPath": "src\\tsconfig.app.json"
  }),
  new ExtractI18nPlugin({
    "tsConfigPath": "src\\tsconfig.app.json",
    "exclude": [],
    "i18nFormat": "xlf",
    "locale": "fr",
    "outFile": "i18n/test.xlf",
  })
  // ...
]

It will extract the messages when you run the webpack dev server or when you build (in this case it'll extract it into src/i18n/test.xlf). I advise you to create a special configuration for the extraction based on your build script, but without all of the optimizations since you don't need the generated files. Also be aware that it'll build your files and probably overwrite your dist folder content.

[michahell]

Ah, that was fast! I've failed to mention again that in my case, for reasons, we use JIT compilation. That should pose no problem, right? we just don't use the AotPlugin at all.

[ocombe]

I guess yeah, the important part is to add the ExtractI18nPlugin at the end of your plugins list

[michahell]

Great! Thanks for the help and the quick responses @ocombe !

[michahell]

@ocombe I'm back to trying to get this to work. However, I'm getting the following error when I try to require the Extract I18n Plugin in our webpack.config.js, like so:

const ExtractI18nPlugin = require('@ngtools/webpack/src/extract_i18n_plugin');

error:

Uncaught TypeError: ExtractI18nPlugin is not a constructor
    at eval (eval at <anonymous> (/Users/michahell/ZIVVER/zivver-owa/webpack.config.js:10:1), <anonymous>:1:9)
    at Object.<anonymous> (/Users/michahell/ZIVVER/zivver-owa/webpack.config.js:10:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at requireConfig (/Users/michahell/ZIVVER/zivver-owa/node_modules/webpack/bin/convert-argv.js:97:18)
    at /Users/michahell/ZIVVER/zivver-owa/node_modules/webpack/bin/convert-argv.js:104:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/michahell/ZIVVER/zivver-owa/node_modules/webpack/bin/convert-argv.js:102:15)
    at yargs.parse (/Users/michahell/ZIVVER/zivver-owa/node_modules/webpack/bin/webpack.js:171:41)
    at Object.Yargs.self.parse (/Users/michahell/ZIVVER/zivver-owa/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/Users/michahell/ZIVVER/zivver-owa/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:621:14)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)

We know that node can find the file, as we placed a debugger; statement right below the require and when it triggered and we checked out what ExtractI18nPlugin actually contained, it contained the plugin source code.

[ocombe]

You should import it like this: const { ExtractI18nPlugin } = require('@ngtools/webpack');

[michahell]

Thanks! But now I'm running into this error:

Error: An @ngtools/webpack aot plugin does not exists for this compilation

So I guess it doesn't work without AOT :/ I'll try to use it with AOT, and then ignore that plugin's output

[ocombe]

Apparently, sorry :-/

[epot]

On my side I am getting the same error whether I try to call ng-xi18n or if I use the AotPlugin:

Error: No template specified for component MainComponent

It seems AOT does not like the require('./bla.html') I use as template.

[ocombe]

no, require is not valid ESx without webpack to transpile it

[epot]

Sorry for the dummy question, but does that mean I cannot have webpack bundling the htmls if I want to have internationalization?

[ocombe]

no, I meant that you need webpack if you want to use require

[epot]

Ok then it's just I do not know how to use ngx-i18n and with require as it seems it enforces aot.

[dholovin]

Hi guys, I hope I found appropriate thread and people Is there proven approach + guide to make Angular i18n translate work for Angular 4.4.4 + Webpack? I tried to follow official cookbook but as mentioned here it is for SystemJS

Made working prototype with ng-translate but this is a different story - we would like to follow an 'official' way to do it

Thanks in advance

[ocombe]

@dholovin is your application using JIT or AOT ?

[epot]

I am very interested in that as well. On my side I temporarily forgot about bundling the htmls to be able to use the official internationalization, but I would love to do that again once I find a guide explaining how to do that.

[dholovin]

@ocombe we started with Visual Studio Angular template, so during the development is is JIT. However, when we will be deploying (publish) it is going to be AOT, same as if we used CLI approach. So, the answer is we are using both

[ocombe]

Ok, I'll see if I can speed things up

[dholovin]

appreciate!

[rocketkittens]

@combe Also using both JIT and AOT here and would tremendously appreciate something official for WebPack+AngularAOT+i18n

[ocombe]

The updated guide will be ready in about 2 week, but it will only cover an application that uses the cli. I'll work today on a demo app that you can use to see the setup for i18n with webpack but without the cli

[ocombe]

Here is the demo: https://github.com/ocombe/i18n-demo-no-cli

Let me know if you need more things in this repo. PRs appreciated.

[Brampage]

@ocombe Thanks for your demo, really useful 👍

When will this become available in the next version of Angular? Right now I managed to dynamically load the default language and another lanuage.

How do I add this to an existing webpack product? -> Right now I think I can't because of Angular's decision on overridable webpack configruations.

Should I make a pull request or is this already work in progress?

[ocombe]

I'm not sure if I understood you questions correctly @Brampage.

When will this become available in the next version of Angular?

Dynamic loading of the translations is only possible with JIT, and you can only load one language fixed at bootstrap. If you use AOT, you need one build / language for now (we're working on a single bundle for all languages, but it won't be in v5.0, most likely 5.1 or 5.2). And wether you use JIT or AOT, you cannot change the language without reloading the app (since it's fixed at bootstrap).

How do I add this to an existing webpack product?

The demo is an app without the cli. If you use the cli it's easier to setup because the webpack config is handled by the cli. You can use the environment files to achieve a similar result.