Angular-cli: registerLocaleData in prod mode causes runtime error with angular 6.0.0-rc.4 and angular-cli 6.0.0-rc.4

[jnizet]

Versions

Angular CLI: 6.0.0-rc.4
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.6
@angular-devkit/build-angular     0.5.6
@angular-devkit/build-optimizer   0.5.6
@angular-devkit/core              0.5.6
@angular-devkit/schematics        0.5.6
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.4
@schematics/angular               0.5.6
@schematics/update                0.5.6
rxjs                              6.0.0-turbo-rc.4
typescript                        2.7.2
webpack                           4.5.0

Repro steps

• create a new project with ng new, and make sure to use angular 6.0.0-rc.4 and angular-cli 6.0.0-rc.4 (see versions above)
• Replace app.module.ts by the following file, registering locale data:

import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

import { AppComponent } from './app.component';

registerLocaleData(localeFr);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'fr' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Run ng serve --prod
• Open a browser at http://localhost:4200

You can also directly use the repro project at https://github.com/jnizet/clibug.

Observed behavior

White page, with an error in the console:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.zUnb (main.ef58e17b9c50a35d8c7e.js:1)
    at p (runtime.5f9d33fb31487f0fdbf1.js:1)
    at Object.3 (main.ef58e17b9c50a35d8c7e.js:1)
    at p (runtime.5f9d33fb31487f0fdbf1.js:1)
    at n (runtime.5f9d33fb31487f0fdbf1.js:1)
    at Array.e [as push] (runtime.5f9d33fb31487f0fdbf1.js:1)
    at main.ef58e17b9c50a35d8c7e.js:1

Desired behavior

The page should work fine

Mention any other details that might be useful (optional)

• It works fine when not using --prod.
• It works fine with version 1.7.4 of the CLI.

[ocombe]

I can confirm that the imported locale data from '@angular/common/locales/fr'; is an empty object when we use --prod, that's why it generates an error in the function registerLocaleData. I'm not sure why it's an empty object though, it's probably something in the build optimizer or webpack

[sylvaindumont]

It seems to be the build optimizer, with "buildOptimizer": false and "optimization": true it works fine, but with "buildOptimizer": true we get an undefined locale object.

[ocombe]

Ok so we've tested multiple scenarii:
Angular v5 + any version of cli (1.7 or 6) works
Angular v6 + cli 1.7 works
Angular v6 (any rc) + cli 6 (any rc) doesn't work unless buildOptimizer is set to false (which is why it works when you don't use --prod).
What has changed from Angular v5 to v6 is that we no longer output es6 files for the locales, we've used commonjs in rc0 and umd in rc4, and apparently the build optimizer breaks the default export in both of those formats for some reason.
I've tried Angular v5 and cli 1.7 with the locale in commonjs or umd format, and it works fine.
Angular cli v1.7 uses build optimizer 0.3.2, while Angular cli v6 rc0 uses build optimizer 0.4.9 and Angular cli v6 rc4 uses build optimizer 0.5.6.
So the issue is in build optimizer between 0.3.2 and 0.4.9.

[filipesilva]

https://github.com/angular/angular/pull/23366 together with https://github.com/angular/devkit/pull/694 should fix this problem.

[filipesilva]

Should be fixed in the next RC of CLI together with Angular.

[jnizet]

@filipesilva I upgraded angular and angular-cli to 6.0.0-rc.5, and the bug is still present.

Angular CLI: 6.0.0-rc.5
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.7
@angular-devkit/build-angular     0.5.7
@angular-devkit/build-optimizer   0.5.7
@angular-devkit/core              0.5.7
@angular-devkit/schematics        0.5.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.5
@schematics/angular               0.5.7
@schematics/update                0.5.7
rxjs                              6.0.0-turbo-rc.4
typescript                        2.7.2
webpack                           4.5.0

Repro project: https://github.com/jnizet/clibug

• clone
• execute yarn
• execute ng serve --prod
• go to localhost:4200 -> blank page, and still the same error message in the console:

main.c57a882a83ec061d784a.js:1 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.zUnb (main.c57a882a83ec061d784a.js:1)
    at p (runtime.5f9d33fb31487f0fdbf1.js:1)
    at Object.3 (main.c57a882a83ec061d784a.js:1)
    at p (runtime.5f9d33fb31487f0fdbf1.js:1)
    at n (runtime.5f9d33fb31487f0fdbf1.js:1)
    at Array.e [as push] (runtime.5f9d33fb31487f0fdbf1.js:1)
    at main.c57a882a83ec061d784a.js:1

[filipesilva]

Reopened to investigate, thanks for the repro @jnizet !

[elvisbegovic]

@filipesilva im not sur if it is related but in 6rc6 and 6rc7, I get:

here's my angular.json:

              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true

problem's here even if i set buildOptimzier to false.

BUT when I set "optimization" to false and (buildOptimizer true or false) it works! My app run!

here is my command: node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod --base-href /fr/ --i18nFile=src/locale/fr.xtb --outputPath=dist/fr --i18nFormat=xtb --i18nLocale=fr --i18nMissingTranslation=ignore

[ocombe]

@istiti make sure that you update angular to RC6 as well, and clean your node_modules folder first because I've noticed that sometimes the @angular-devkit/build-angular dependency is not properly updated (and it has to be version ^0.5.7).
I've just tested with CLI RC6 and Angular RC6 and it's fixed for me

[elvisbegovic]

@ocombe im already on angular rc6 after running ng update --next --all --force but I follow your advice, I remove node_modules folder, this is my version now :

Angular CLI: 6.0.0-rc.7
Node: 10.0.0
OS: win32 x64
Angular: 6.0.0-rc.6
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.10
@angular-devkit/build-angular     0.5.10
@angular-devkit/build-optimizer   0.5.10
@angular-devkit/core              0.5.10
@angular-devkit/schematics        0.5.10
@angular/cli                      6.0.0-rc.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.8
@schematics/angular               0.5.10
@schematics/update                0.5.10
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

and I confirm it works !

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}