Cannot build in --prod mode with registerLocaleData(fr); #21809

adrienboulle · 2018-01-26T20:57:07Z

I'm submitting a...


[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

when building in prod mode with this:

import fr from '@angular/common/locales/fr';
registerLocaleData(fr);

the build whit the --prod option will fail with the stack:


ERROR in chunk main [initial]
[name].[chunkhash:20].bundle.js
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at enterNode (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:146:15)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:125:24)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:134:24)
    at enterNode (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:149:18)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:138:25)
    at enterNode (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:149:18)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:125:24)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:134:24)
    at enterNode (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:149:18)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:125:24)
    at getPathInAst (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:134:24)
    at info.moduleScope.variables.forEach.variable (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:536:23)
    at Array.forEach ()
    at modulesWithInfo.forEach.info (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:524:34)
    at Array.forEach ()
    at ConcatenatedModule.source (/Users/adboul/Documents/repos/test-prod-build/node_modules/webpack/lib/optimize/ConcatenatedModule.js:516:19)

Expected behavior

should build with --prod

Angular version:
@angular/cli: 1.6.6
@angular/*: 5.2.2

Others:
works with @angular/*: 5.2.1

reproduction: https://github.com/adrienboulle/test-prod-build
I have started a new project with the ng cli and I have just added the registerLocaleData(fr) thing.

I've tracked the issue to this commit:
71f9eaa (it works again when I modify juste /common/locales/fr.js to it's previous state)

The text was updated successfully, but these errors were encountered:

adrienboulle · 2018-01-26T21:48:24Z

related: #21595

adrienboulle · 2018-01-26T21:49:45Z

@ocombe I understand undefined is removed for optimization, would't it be safer to at least replace them by null ?

rokerkony · 2018-01-28T17:33:16Z

We have the same problem when we import en version... with de only there is no problem.

It happens only after upgrading from v5.2.1 to v5.2.2

ocombe · 2018-01-29T09:26:47Z

@rokerkony you shouldn't need to import "en" locale, it's included in Angular already.

@adrienboulle thanks for the repro, looking into it.

ocombe · 2018-01-29T09:47:33Z

Ok I found the issue, when you import multiple locale files, they all have a function named "plural", and there's a name collision because of flat modules optimizations that the CLI does.
Now I need to find a way to fix that. The easiest would be to have a different name for each plural function, but it wouldn't fix the real bug which is that FESM optimizations should check for name collisions across different modules that they try to bundle, not just withing each module separately

filipesilva · 2018-01-29T11:53:43Z

This is a bug with Webpack's ModuleConcatenationPlugin that only occurs under very specific circumstances, like the ones we have now with locales. Please see webpack/webpack#6407 for more details.

There is no available workaround in Angular CLI as far as I can tell. I'm not sure if this sort of bug will get a lot attention due to the low frequency, available workaround, and Webpack's focus on getting v4 out.

My recommendation is that Angular replaces the empty array elements with undefined or null for now.

ocombe · 2018-01-29T12:32:06Z

this PR would fix it on our side: #20624

Fixes webpack#6407 Fixes webpack#5415 Ref angular/angular#21809

ocombe · 2018-01-29T21:38:21Z

The fix has been merged into webpack, we need a new version published and then we need to publish a new version of the cli

adrienboulle · 2018-01-29T22:48:31Z

@ocombe Great thx :)
But it my pow the freq1:low is wrong, any project using i18n with the cli will be blocked to 5.2.1 until webpack and cli both update.

ocombe · 2018-01-29T22:50:47Z

true, it won't change anything though, since webpack is the blocker here

adrienboulle · 2018-01-29T23:09:32Z

Reverting your commit until then is not an option ?

ocombe · 2018-01-30T07:51:15Z

we will do something if it turns out that the webpack patch is nowhere close to be released, I've asked them, waiting for the release

adrienboulle · 2018-01-30T08:40:35Z

ok thx !

marcuslind90 · 2018-01-30T12:34:59Z

I'm waiting for this fix as well. I started noticing this error on a project that I run Angular 5.0.3 and Angular CLI 1.5.4, I tried updating to 5.2.1, 5.2.1 and Angular CLI 1.6.6 and still having issues. To me I can't get it working no matter which version I revert back to -- I'm not sure why.

adrienboulle · 2018-01-30T12:36:35Z

@marcuslind90 make sure to delete package-lock.json and to lock version in package.json (remove the ^)

universonic · 2018-02-01T11:42:52Z

Encountered the same problem

ng build --prod --aot --build-optimizer 
 60% building modules 421/422 modules 1 active ...dashboard/src/assets/scss/styles.scssNode#moveTo was deprecated. Use Container#append.
Date: 2018-02-01T11:32:27.812Z - Hash: 7856606af19363e10be5 - Time: 43697ms            
1 unchanged chunks
chunk {0} 0.c8f6eff124420727ff6f.chunk.js () 253 kB  [rendered]
chunk {2} polyfills.763e92f08a39cc21a890.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {3} styles.eba94bebc756cd8b778c.bundle.css (styles) 371 kB [initial] [rendered]
chunk {4} inline.70d7ccdb4a5a6fd6f612.bundle.js (inline) 1.47 kB [entry] [rendered]

ERROR in chunk main [initial]
[name].[chunkhash:20].bundle.js
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at enterNode (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:146:14)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:125:24)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:134:24)
    at enterNode (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:149:18)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:138:25)
    at enterNode (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:149:18)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:125:24)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:134:24)
    at enterNode (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:149:18)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:125:24)
    at getPathInAst (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:134:24)
    at info.moduleScope.variables.forEach.variable (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:536:23)
    at Array.forEach (native)
    at modulesWithInfo.forEach.info (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:524:34)
    at Array.forEach (native)
    at ConcatenatedModule.source (/Users/universonic/Codes/ultrapp-dashboard/node_modules/@angular/cli/node_modules/webpack/lib/optimize/ConcatenatedModule.js:516:19)

on:

Angular CLI: 1.6.7
Node: 6.11.4
OS: darwin x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.1
@angular/cli: 1.6.7
@angular/material: 5.1.1
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0

I have added this to my package.json, but I still have the same problem:

{
  ...
  "devDependencies": {
    ...
    "webpack": "https://github.com/webpack/webpack.git#ddb1fad582bf1621840ae8a6e77488ca081695c4"
  }
}

alexabbott · 2018-02-05T17:46:45Z

@ocombe any update here?

universonic · 2018-02-06T10:36:24Z

@alexabbott , according to ocombe's PR (#20624), you should modify your tsconfig.app.json as:

{
    ...
    "compilerOptions": {
        "module": "commonjs",
        ...
    },
    ...
}

I have tested this on my machine, and it works well.

starksds · 2018-02-06T13:46:31Z

@alexabbott, i also just tried out @universonic suggestion and it worked. The bundle sizes are a bit larger but at least the code will compile in prod mode again.

barretodavid · 2018-02-07T16:26:59Z

the code posted by @universonic fixes the issue but in my case the bundle size increased from 1.8 MB to 2.5 MB I guess due to the impossibility of applying tree shaking with commonjs modules

bokzor · 2018-02-07T21:31:53Z

Reverting to "@angular/common": "5.2.1" solved the problem.

universonic · 2018-02-08T02:50:07Z

@ocombe I would like to know when the fix will be released? Is there a plan?

rekna1 · 2018-02-08T09:23:30Z

Same here ... does not build when registerLocaleData is called. Timeframe for solution ?

candidosales · 2018-02-11T23:57:06Z

I have the same problem =/

fbascheper · 2018-02-12T14:40:19Z

The root issue should be fixed in the latest webpack release https://github.com/webpack/webpack/releases/tag/v3.11.0 .

ocombe · 2018-02-12T17:31:44Z

it will be resolved once the following PR lands in @angular/cli: angular/angular-cli#9604
it will be out this week

trotyl · 2018-04-03T13:50:26Z

Should this be closed?

zbakkali · 2018-04-06T09:51:43Z

I don't have the error anymore with @angular/cli 1.7.4

kavi87 · 2018-04-16T14:49:30Z

I know this will probably get ignored but is there any chance that the "registerLocaleData" api just... disappear ? Seriously, everyone makes mistakes and i think this was a big one.

First of all, why is "english" registered by default ? What kind of message is the framework conveying by this default setting ? That english is somehow more important than klingon ? Maybe, but I still think it is wrong.

Also, about klingon, maybe I got that wrong, but can I load a language with any code I want ? It surely seems to not be the case as only the languages that the framework provide are accepted. I don't know anything about that or CLDR etc but it seems absolutely wrong to me that you need to accept that there is an exhaustive list of languages somewhere and you can only choose those. Why ? What if I want to load blarg of culture blorg 'bl-Blo' ? Don't tell me the language does not exist, why would you even need to know that ? Why do you even "care" ?

This was so simple and convenient to use. Just load your map of keys-translations. Now this. Come on, revert this. It's stupid.

ocombe · 2018-04-16T15:00:18Z

I'm not super happy with the current registerLocaleData api, but I don't have any good alternative right now. If you find one, I'll try to make it work.

English is the default because that's the most commonly used language in the world, and also Google is american. We needed one language by default to make it simpler to use the pipes when you don't care about i18n and just want them to work.

You can use any code that you want, we've added an extra parameter to registerLocaleData that lets you replace the code of a local by your own if you want it. You still need to register something to make it work, but you can create the locale file yourself for Klingon if you want, or use one of the 525 locale files that we provide.

Also don't say that it's stupid if you don't provide an alternative. Be constructive, how would you prefer it to work?

kavi87 · 2018-04-16T15:22:21Z

@ocombe I apologize for the last statement, I've been using angular and ngx-translate for a long time and I have always been very productive with them. I am just frustrated to see that we need to dedicate some time to register the languages dynamically at runtime (our users should be able to register the language they need in their app) and I don't see much value of doing so for something that was perfectly correct and maintainable previously in my opinion.

As for English being the most commonly used language, not to be picky but that's actually wrong, mandarin would be the winner here. And Google being american, so what ? Our users won't even need english but french and spanish so I actually need to remove english from the i18n.

About the alternative i think it is pretty simple. Don't do anything. Allow people to load their keys-translations like before and only propose the i18n files as opt in. I don't even like how the taxonomy of languages is done with "language" and "culture". I think it's great if people want to use it, but why is it forced on users, especially those who started their app a long time ago and just want to upgrade for better performance ? I am not even complaining about the issue that happened in AOT because of this change for which I also needed to make changes (I'm not using the cli we started our app with angular beta a long time ago).

Anyway, now that it is done I would not go against my own complaint and ask to break things again. Especially since other than that i am more than pleased with the great work done by the framework.

rokerkony · 2018-04-16T15:29:43Z

Hey :)
And what about taking LOCALE_ID in account for a default value? It can be still default as en but overwritten with application value and not load en at all...

ocombe · 2018-04-16T15:38:39Z

@kavi87 when you build with the CLI you can do --locale=xxx and it will register that language, but it only works with one locale. We've been thinking about some config for the cli that would just load an array of locales, but it's not a priority since I don't see people complaining about that
That being said, for now you can still use the old i18n pipes if you prefer, they will be there until v7

@rokerkony It's difficult to do because english is loaded at build time, and LOCALE_ID is a provider, it's only registered at runtime.

One thing that I've been thinking of would be to never load english unless the i18n pipes are used and no LOCALE_ID is registered, it should be possible to find that out with the typescript transformers, or when we build with the CLI

kavi87 · 2018-04-16T15:55:28Z

@ocombe Thanks for the pointer. For now i will register the languages we need explicitly as explained in the docs and make something to register additional lang if needed at application init.

Zacknero · 2019-06-13T13:33:34Z

Hi guys how solved this problem with the registerLocaleData in app.module.ts??
I have this version

"dependencies": {
"@angular/animations": "^7.2.6",
"@angular/cdk": "^6.4.2",
"@angular/common": "~7.2.6",
"@angular/compiler": "~7.2.6",
"@angular/core": "~7.2.6",
"@angular/flex-layout": "^7.0.0-beta.24",
"@angular/forms": "~7.2.6",
"@angular/material": "^6.4.2",
"@angular/platform-browser": "~7.2.6",
"@angular/platform-browser-dynamic": "~7.2.6",
"@angular/router": "~7.2.6",
"@ngrx/effects": "^7.2.0",
"@ngrx/router-store": "^7.2.0",
"@ngrx/store": "^7.2.0",
"@ngrx/store-devtools": "^7.2.0",
"@ngx-translate/core": "^11.0.1",
"@types/es6-promise": "^3.3.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"echarts": "^4.2.1",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"ngx-device-detector": "^1.3.5",
"ngx-perfect-scrollbar": "^7.2.0",
"ngx-translate-multi-http-loader": "latest",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "~7.3.3",
"@angular/compiler-cli": "~7.2.6",
"@angular/language-service": "~7.2.6",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}

Zacknero · 2019-06-17T08:48:29Z

Hi guys how solved this problem with the registerLocaleData in app.module.ts??
I have this version

"dependencies": {
"@angular/animations": "^7.2.6",
"@angular/cdk": "^6.4.2",
"@angular/common": "~7.2.6",
"@angular/compiler": "~7.2.6",
"@angular/core": "~7.2.6",
"@angular/flex-layout": "^7.0.0-beta.24",
"@angular/forms": "~7.2.6",
"@angular/material": "^6.4.2",
"@angular/platform-browser": "~7.2.6",
"@angular/platform-browser-dynamic": "~7.2.6",
"@angular/router": "~7.2.6",
"@ngrx/effects": "^7.2.0",
"@ngrx/router-store": "^7.2.0",
"@ngrx/store": "^7.2.0",
"@ngrx/store-devtools": "^7.2.0",
"@ngx-translate/core": "^11.0.1",
"@types/es6-promise": "^3.3.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"echarts": "^4.2.1",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"ngx-device-detector": "^1.3.5",
"ngx-perfect-scrollbar": "^7.2.0",
"ngx-translate-multi-http-loader": "latest",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "~7.3.3",
"@angular/compiler-cli": "~7.2.6",
"@angular/language-service": "~7.2.6",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}

Any solutions?

angular-automatic-lock-bot · 2019-09-15T05:21:37Z

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.}

ocombe self-assigned this Jan 29, 2018

ocombe added area: i18n type: bug/fix workaround4: none regression Indicates than the issue relates to something that worked in a previous version freq1: low labels Jan 29, 2018

ngbot bot added this to the Backlog milestone Jan 29, 2018

filipesilva mentioned this issue Jan 29, 2018

ModuleConcatenationPlugin throws on array default exports with functions webpack/webpack#6407

Closed

ocombe added a commit to ocombe/webpack that referenced this issue Jan 29, 2018

fix(ConcatenatedModule): don't throw on arrays with empty values

2aebfbe

Fixes webpack#6407 Fixes webpack#5415 Ref angular/angular#21809

ocombe mentioned this issue Jan 29, 2018

fix(ConcatenatedModule): don't throw on arrays with empty values webpack/webpack#6408

Merged

ocombe added the state: blocked label Jan 29, 2018

ocombe added freq2: medium and removed freq1: low labels Jan 29, 2018

marcuslind90 mentioned this issue Feb 1, 2018

1.3.0 causes build to fail with - Cannot read property 'range' of null angular/angular-cli#7339

Closed

clydin mentioned this issue Feb 7, 2018

Cannot read property 'range' of null angular/angular-cli#9537

Closed

ocombe removed the state: blocked label Feb 12, 2018

ngbot bot modified the milestones: Backlog, needsTriage Feb 26, 2018

ocombe closed this as completed Apr 6, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 15, 2019

Cannot build in --prod mode with registerLocaleData(fr); #21809

Cannot build in --prod mode with registerLocaleData(fr); #21809

Comments

adrienboulle commented Jan 26, 2018 • edited

I'm submitting a...

Current behavior

Expected behavior

adrienboulle commented Jan 26, 2018

adrienboulle commented Jan 26, 2018 • edited

rokerkony commented Jan 28, 2018

ocombe commented Jan 29, 2018

ocombe commented Jan 29, 2018

filipesilva commented Jan 29, 2018

ocombe commented Jan 29, 2018

ocombe commented Jan 29, 2018 • edited

adrienboulle commented Jan 29, 2018

ocombe commented Jan 29, 2018 • edited

adrienboulle commented Jan 29, 2018

ocombe commented Jan 30, 2018

adrienboulle commented Jan 30, 2018

marcuslind90 commented Jan 30, 2018

adrienboulle commented Jan 30, 2018 • edited

universonic commented Feb 1, 2018

alexabbott commented Feb 5, 2018

universonic commented Feb 6, 2018 • edited

starksds commented Feb 6, 2018

barretodavid commented Feb 7, 2018

bokzor commented Feb 7, 2018

universonic commented Feb 8, 2018

rekna1 commented Feb 8, 2018

candidosales commented Feb 11, 2018

fbascheper commented Feb 12, 2018

ocombe commented Feb 12, 2018 • edited

trotyl commented Apr 3, 2018

zbakkali commented Apr 6, 2018

kavi87 commented Apr 16, 2018

ocombe commented Apr 16, 2018

kavi87 commented Apr 16, 2018

rokerkony commented Apr 16, 2018

ocombe commented Apr 16, 2018

kavi87 commented Apr 16, 2018

Zacknero commented Jun 13, 2019

Zacknero commented Jun 17, 2019

angular-automatic-lock-bot bot commented Sep 15, 2019

adrienboulle commented Jan 26, 2018 •

edited

adrienboulle commented Jan 26, 2018 •

edited

ocombe commented Jan 29, 2018 •

edited

ocombe commented Jan 29, 2018 •

edited

adrienboulle commented Jan 30, 2018 •

edited

universonic commented Feb 6, 2018 •

edited

ocombe commented Feb 12, 2018 •

edited