xi18n should parse index.html and build should fill in the translated texts in index.html

[areijngoudt]

Versions

Angular CLI: 1.6.0
Node: 8.9.1
OS: darwin x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
... service-worker

@angular/cdk: 5.0.0
@angular/cli: 1.6.0
@angular/material: 5.0.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

Repro steps

• in index.html, use the i18n marker like

  please wait...

• run ng xi18n
• the 'please wait' does not popup in the gererated .xlf files
• run ng build ng build -prod --aot --output-path=dist/de --base-href /de/ --i18n-file=src/i18n/messages.de.xlf --i18n-format=xlf --locale=de;

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

Desired behavior

[filipesilva]

ng xi18n operates over components of your Angular application, but index.html is not part of it actually. It's not a component template.

I don't think this is functionality we can provide but @ocombe might know more.

[areijngoudt]

wel, the entry and name index.html are in the .angular-cli.json. Also, the cli can inject the base href using the --base-href switch

[ocombe]

it will be possible as part of universal (it's on the roadmap)

[rmedaer]

If I can't use server-side rendering, is there a plan to inject translated string in index.html or other static file ?

[bettysteger]

if parsing the index.html would be possible, we could also set the right language attribute in the HTML-tag.

[luchillo17]

What's the status on this? I'm trying to set up locale-specific index.html to change some tags specific to the locale, like the title, the HTML lang attribute, canonical link, and others, but can't rely on the i18n translation.

Was trying to make multiple index.html files, 1 per locale, but when I run with --localize flag it ignores the angular.json config about which index.html to use.

Looks like this, building with --configuration=es-CO works, but using --localize to build all locales at once doesn't work:

I filed a bug for this: #17684

[luchillo17]

17684 was closed because including the index.html in the localization process would be a better solution than providing a way to compile multiple configurations at once, or providing the i18n a way to configure the index.html to use for each locale.

For now, working around it by creating a configuration for each locale and building all of them through gulp script in series.

[Amthieu]

Has there been any updates regarding this issue? It would be a great improvement being able to translate the index.html

[Dikman]

Yes, I also have such wish in a project on Angular 11. Is it exists a solving way?

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[timothyBrake]

We need this feature to specify i18n og-meta tags in index.html. Use case would be a customer application where customers must always log in BUT can receive e.g. an invoice link using WhatsApp that goes to the page that displays the invoice for the user. Company would send a link using WhatsApp and user would

1. click on the link in WhatsApp
2. log in (if not already)
3. Web application opens the page and users can see the invoice

A very basic use case in 2022 and we of course need this to be language specific to have a nice description, title and icon in WhatsApp

Angular should have a feature for this use case in 2022: <meta property="og:description" i18n-content="@@og.description" content="Welcome to the customer application of AweSomeCompany. " />

As others have stated: seems like the Angular CLI could easily process the index.html and put the correct value in there as its a valid uses case using i18n. Is there an Angular way, an official Angular workaround way of doing this or is this use case not going to be recognised?

Adding @AndrewKushnir as he seems to be in charge of i18n at Angular.

Thanks.

[bartcorremans]

Would also like to see this so we can translate our noscript message.

[xanderknol]

Can this feature request be re-evaluated?

For us this would be really useful so we can set different script url's for different languages. Currently there is no proper way of doing this.

[zajm]

I also just stumbled over this and would greatly appreciate a fix.

[csisy]

I think the i18n configuration of the angular.json should be extended. Consider the following use-case:

We're building a website which is targeted for a specific country. It has some features that only make sense for people who can speak the language of that country. So we'd like to drop some functionality (at compile-time!) from the other localized versions of the app. This would be possible with an environment-like setup (with file replacements) and use a compile-time constant to conditionally import that module.

However, as it was discussed before, the current localization process is not designed in a way that it can re-build the app for different locales. (Technically this issue is similar to https://github.com/angular/angular-cli/issues/17684)

We've tried the configuration-way: instead of providing the --localize flag in the CLI, we created multiple configurations that set the appropriate locale. However, when the build starts, the output directory is cleared which makes this approach uncomfortable (the built version for locale A must be copied somewhere else before the build is started for locale B).

Is there any plan to extend the i18n system?

[timothyBrake]

We need this feature to specify i18n og-meta tags in index.html. Use case would be a customer application where customers must always log in BUT can receive e.g. an invoice link using WhatsApp that goes to the page that displays the invoice for the user. Company would send a link using WhatsApp and user would

1. click on the link in WhatsApp
2. log in (if not already)
3. Web application opens the page and users can see the invoice

A very basic use case in 2022 and we of course need this to be language specific to have a nice description, title and icon in WhatsApp

Angular should have a feature for this use case in 2022: <meta property="og:description" i18n-content="@@og.description" content="Welcome to the customer application of AweSomeCompany. " />

As others have stated: seems like the Angular CLI could easily process the index.html and put the correct value in there as its a valid uses case using i18n. Is there an Angular way, an official Angular workaround way of doing this or is this use case not going to be recognised?

Adding @AndrewKushnir as he seems to be in charge of i18n at Angular.

Thanks.

For our use cases, we ended up using Angular Universal and prerender certain pages. It’s not ideal as we now no longer are able to deploy on Tomcat but need to use Node Express server with accompanied environment + custom setup for locale specific config. Seems like there is still a lot of work to do in documenting Angular Universal combined with localization + pre-rendering + Node Express server setup as it’s too painful and no official documentation available. For basic usage without Angular Universal, index.html should just include i18n.