Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ng build for i18n - set document locale

See original GitHub issue

Bug Report or Feature Request (mark with an `x`)

- [] bug report
- [x] feature request

Versions.

@angular/cli: 1.4.4 node: 8.5.0 os: win32 x64 @angular/animations: 4.4.4 @angular/cdk: 2.0.0-beta.12 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/core: 4.4.4 @angular/forms: 4.4.4 @angular/http: 4.4.4 @angular/material: 2.0.0-beta.12 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/cli: 1.4.4 @angular/compiler-cli: 4.4.4 @angular/language-service: 4.4.4 typescript: 2.3.4

Repro steps.

Run a i18n build including the locale flag:

ng build --locale de.......

Then have a look at the index.html inside dist folder. The document’s locale is still set to <html lang="en"> when you build a locale “de”.

This causes some browsers to suggest a translated version of the site and breaks built in spellcheckers.

The log given by the failure.

No log

Desired functionality.

The index.html in build results should contain a correct lang attribute.

<html lang="en">

Mention any other details that might be useful.

Nothing

Issue Analytics

State:
Created 6 years ago
Reactions:14
Comments:16 (8 by maintainers)

Top GitHub Comments

2reactions

ocombecommented, Sep 2, 2019

since the cli injects the script files into the index, it would make sense if it could change the locale as well at the same time 😃

2reactions

ocombecommented, Oct 25, 2017

It is not, I’ve actually asked this a few days ago. The answer that I was given was:

You can use DOCUMENT to easily handle that, it works both on Universal and in browser without issue

documentElement is the <html> tag as an Element which means you can use all the normal methods like (get|remove|set)Attribute()

I would add that you should probably use Renderer2 to set the attribute on the documentElement. Here is how I would do it, on the main component:

export class AppComponent {
  constructor(@Inject(DOCUMENT) doc: Document, @Inject(LOCALE_ID) locale: string, renderer: Renderer2) {
    renderer.setAttribute(doc.documentElement, 'lang', locale);
  }
}