Angular i18n and Server Side Rendering LOCALE_DATA is not populated

Versions

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

Create new project CLI
Follow the Universal guides at https://github.com/angular/angular-cli/wiki/stories-universal-rendering
Build universal server for fr-FR locale

"build:client-and-server-bundles": "ng build --prod --locale=fr-FR && ng build --locale=fr-FR --app 1 --output-hashing=false"

I have put this in a minimal repo which reproduces the problem:

git clone https://github.com/martinmcwhorter/ssr-i18n-missing-locales.git
cd ssr-i18n-missing-locales
npm install

npm run build:ssr
npm run serve:ssr

Observed behavior

In the console where npm run server:ssr was run:

ERROR Error: Missing locale data for the locale "fr-FR".
    at findLocaleData (D:\projects\ssr-i18n-missing-locales\dist\server.js:29460:11)
    at getLocaleId (D:\projects\ssr-i18n-missing-locales\dist\server.js:29069:12)
    at getNamedFormat (D:\projects\ssr-i18n-missing-locales\dist\server.js:31664:37)
    at formatDate (D:\projects\ssr-i18n-missing-locales\dist\server.js:31625:40)
    at DatePipe.transform (D:\projects\ssr-i18n-missing-locales\dist\server.js:32415:16)
    at checkAndUpdatePureExpressionInline (D:\projects\ssr-i18n-missing-locales\dist\server.js:14760:38)
    at checkAndUpdateNodeInline (D:\projects\ssr-i18n-missing-locales\dist\server.js:15476:20)
    at checkAndUpdateNode (D:\projects\ssr-i18n-missing-locales\dist\server.js:15415:16)
    at prodCheckAndUpdateNode (D:\projects\ssr-i18n-missing-locales\dist\server.js:16139:5)
    at Object.updateRenderer (D:\projects\ssr-i18n-missing-locales\dist\server.js:134994:7131)

View Source of the pre-rendered HTML is missing the interpolations that use the i18n pipe.

If you run with the default ‘en’ locale data you will not see these two issues:

npm run build:ssr:en
npm run serve:ssr

Desired behavior

At https://angular.io/guide/i18n#i18n-pipes states

"The CLI imports the locale data for you when you use the parameter --locale with ng serve and ng build."

I would expect that the fr-FR locale be imported into the server bundles built with the --locale=fr-FR argument.

Mention any other details that might be useful (optional)

Opened a ticket at the Angular repo, @ocombe suggested opening a ticket here. https://github.com/angular/angular/issues/22793

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:7 (1 by maintainers)

Top GitHub Comments

8reactions

martinmcwhortercommented, Mar 16, 2018

I have a workaround for this issue.

In your server.ts add:

// workaround for https://github.com/angular/angular-cli/issues/9975
const languages = ['de-AT', 'de-CH', 'de', 'en-AU', 'en-CA', 'en-GB', 'en-IE', 'en-NZ', 'en', 'es-CL', 'es', 'es-MX', 'fr-BE', 'fr-CA', 'fr', 'it', 'nl-BE', 'nl', 'pl', 'pt'];
languages.forEach(lang => {
  const locale = require(`@angular/common/locales/${defaultLang}`).default;
  registerLocaleData(locale, lang);
});
// end workaround

In your webpack.server.config.js add

    // workaround for https://github.com/angular/angular-cli/issues/9975
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)common(\\|\/)locales/,
      /(de-AT|de-CH|de|en-AU|en-CA|en-GB|en-IE|en-NZ|en|es-CL|es|es-MX|fr-BE|fr-CA|fr|it|nl-BE|nl|pl|pt)$/
    ),

4reactions

martinmcwhortercommented, Aug 14, 2018

Just want to follow up that this is still and issue with angular cli 6 – though the workaround still works.