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]

angular/angular#23366 together with angular/devkit#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 !