GeezerVison is showing github.com — xi18n should parse index.html and build should fill in the translated texts in index.html · Issue #8947 · angular/angular-cli
xi18n should parse index.html and build should fill in the translated texts in index.html #8947Description
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
Reacted by Nathanael CHERRIER, Carlos Esteban Lopez Jaramillo, Filipi Zimermann, Alex Art, Roopan Vijayanarayanan, fwiesweg, Bytesizeweezy, Dominik Kus, muehlberg, Eero Pihelgas and 8 more Reacted by Betty Steger, Carlos Esteban Lopez Jaramillo, Roopan Vijayanarayanan, Tomasz Iwaszko and Aurélien Dussauge Activityfilipesilva commented on Dec 21, 2017 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 commented on Dec 21, 2017 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 commented on Dec 21, 2017 it will be possible as part of universal (it's on the roadmap) Reacted by Nathanael CHERRIER rmedaer commented on Aug 16, 2018 If I can't use server-side rendering, is there a plan to inject translated string in index.html or other static file ? Reacted by Nathanael CHERRIER bettysteger commented on Apr 11, 2019 if parsing the index.html would be possible, we could also set the right language attribute in the HTML-tag. Reacted by Nathanael CHERRIER and Mehdi Salmi luchillo17 commented on May 10, 2020 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 commented on May 11, 2020 #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 commented on Oct 25, 2020 Has there been any updates regarding this issue? It would be a great improvement being able to translate the index.html Dikman commented on Mar 26, 2021 Yes, I also have such wish in a project on Angular 11. Is it exists a solving way? Reacted by Mathieu Pelletier, Othman Fayed, Alex Art, Louis Poirier, Dominik Kus and Timothy angular-robot commented on Feb 1, 2022
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 commented on Feb 21, 2022
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. timothyTheCoder commented on Jul 19, 2022 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
- click on the link in WhatsApp
- log in (if not already)
- 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. Reacted by Andrei, Pavel Nikitaev, Lukas Mohs and Gerd Reifenauer bartcorremans commented on Sep 21, 2022 Would also like to see this so we can translate our noscript message. xanderknol commented on Dec 28, 2022 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 commented on Mar 23, 2023 I also just stumbled over this and would greatly appreciate a fix. csisy commented on Jul 12, 2023 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 #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? timothyTheCoder commented on Jul 13, 2023
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
- click on the link in WhatsApp
- log in (if not already)
- 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.
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|
