角度"InvalidPipeArgument:缺少语言环境数据"使用优化= true构建或投放时(--prod选项) [英] Angular "InvalidPipeArgument: Missing locale data" when build or serve with optimization=true (--prod option)
问题描述
我用法语构建了一个Angular应用程序.
I build an Angular app in french.
我使用本地日期管道 |日期，还有日期选择器组件( @ danielmoncada/angular-datetime-picker ).
I use the native date pipe | date and also a datepicker component (@danielmoncada/angular-datetime-picker).
我想以法语显示日期，并且datepicker组件以法语(月份名称，...)进行本地化
I'd like to display dates in french style and that the datepicker component is localized in french (months names, ...)
代码示例:
<p>raw: {{today}}</p>
<p>date pipe: {{today | date}}</p>
<p>date pipe 'dd/MM/yyyy': {{today | date:'dd/MM/yyyy'}}</p>
<p>
date picker:
<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">
<owl-date-time [firstDayOfWeek]="1" [pickerType]="'calendar'" #dt1></owl-date-time>
</p>
未设置任何语言环境的结果
与预期的一样，该语言为英语.
现在，我将按照我对角度定位的了解，并使用 registerLocaleData 将法语语言环境导入我的AppModule中，并相应地设置 LOCALE_ID :
Now I follow what I understood about localization in angular and I import in my AppModule the french locale with registerLocaleData and set the LOCALE_ID accordingly:
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr, 'fr');
@NgModule({
declarations: [],
imports : [],
providers : [
{ provide: LOCALE_ID, useValue: 'fr'}
]
})
此法语语言环境设置的结果
与预期的一样，它位于法语中.
好的，很好！
我不得不说，这里我要使用经典的 ng serve angular-cli命令启动开发中的应用程序.
I have to say that here I'm launching the app in development using the classic ng serve angular-cli command.
但是，当将应用程序部署到测试环境中时，由于浏览器控制台中的javascript错误，这些与日期相关的操作将无法正常工作并破坏应用程序:
But when deploying the app to a test environment, these date-related things doesn't work and break the app because of a javascript error in the browser's console :
ERROR Error: InvalidPipeArgument: 'Missing locale data for the locale "fr".' for pipe 'e'
使用此法语语言环境设置的结果，并使用--prod/Optimization = true
进行投放
由于控制台错误导致页面生成中断，因此无法显示日期和日期选择器.
The dates and datepicker are not displayed because of the console error breaking the page generation...
我们猜测这是因为在为生产环境构建时使用的是 optimization = true (在 angular.json 文件中设置的参数)
We guess this is because we are using optimization=true when building for production environment (parameter set in the angular.json file)
此参数位于 angular.json 中的 architect.build.configurations.production :
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {...},
"configurations": {
"production": {
"fileReplacements": [...],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
...
确实，如果将其设置为 false ，问题就解决了！
Indeed, if we set it to false, the problem goes!
但这不能禁止在生产中禁用优化.
我使用命令 ng serve --prod 在本地启动了我的应用，该命令将使用上述生产版本，且优化设置为true.
I launched my app locally using the command ng serve --prod, that will use the production build described above, with optimization set to true.
>>我会重现错误！
然后我尝试在 angular.json 中的 architect.serve.configurations.production 位置使用 optimization:false 覆盖:
Then I tried to override with optimization: false at the architect.serve.configurations.production location in angular.json:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "dpe-front:build"
},
"configurations": {
"production": {
"browserTarget": "dpe-front:build:production",
"optimization": false
}
}
},
>>我不会重现错误！
该问题似乎与优化"有关.
设置为true时，我的LOCALE定义不起作用，并且破坏了应用程序...
When set to true, my LOCALE definition doesn't works and it breaks the app...
为什么在这种情况下无法进行区域设置?我想念什么吗?
推荐答案
我找到了问题的根源！
这似乎是Angular 10.x中的错误，是由于在构建生产模式下期间过于激进的树摇动引起的您的项目配置有角度严格模式.
It seems to be a bug in Angular 10.x caused by too agressive tree shaking during the build when in production mode and if your project is configured with angular strict mode.
- 升级到angular 11.x可以解决问题
或
- 在应用程序的
package.json文件中将sideEffects设置为true即可解决问题
- Setting
sideEffectstotruein app'spackage.jsonfile solved the problem
以 strict 模式启动新项目时，将在项目的 src/app 目录中创建一个 package.json 文件.
When starting a new project in strict mode, a package.json file is created in project's src/app directory.
{
"name": "myproject",
"private": true,
"description_1": "This is a special package.json file that is not used by package managers.",
"description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will result in unnecessary increased payload size.",
"description_3": "It should be safe to set this option to 'false' for new applications, but existing code bases could be broken when built with the production config if the application code does contain non-local side-effects that the application depends on.",
"description_4": "To learn more about this file see: https://angular.io/config/app-package-json.",
"sideEffects": false
}
它具有 sideEffects 选项，用于通知webpack捆绑程序它可以对该目录下的所有文件进行更多激进的树震动，因为它们纯"，.我们的目标是在文件末尾提供较小的文件.
It has the sideEffects option to tell to the webpack bundler that it can do more agressive tree shaking for all files under this directory, as they are "pure". The goal is to have smaller files at the end.
此处有更多详细信息: https://webpack.js.org/guides/tree-shaking/
More details here: https://webpack.js.org/guides/tree-shaking/
因此，当 sideEffects 设置为 false (默认设置)时，它表明所有文件都可用于更积极的摇树".
So when sideEffects is set to false (the default), it tells that all files can be used for "more agressive tree shaking".
将其设置为 true 或删除此 package.json 文件解决了我的问题.
Setting it to true or removing this package.json file solved my problem.
但是，在全新的测试项目中执行相同的操作不会导致相同的问题...
However, doing the same thing in a brand new test project doesn't leads to the same problem...
区别在于，这个新项目是在angular v11中创建的，而我的项目是使用angular v10开始的.
The difference is that this new project is in angular v11, whereas my project was started using angular v10.
所以这个错误似乎已经通过angular 11版本解决了.
So this bug seems to have been solved with angular 11 release.
我在使用 DatePipe 时遇到了问题，但是显然其他管道(例如 AsyncPipe )可能会导致相同的过于激进的树抖动问题"，例如这个例子:
I had the problem using the DatePipe, but apparently other pipes (like AsyncPipe) can lead to same kind of "too agressive tree shaking problems", as in this example:
Angular 10的摇树使用sideEffects时摇晃AsyncPipe:false
希望这对其他人有帮助！
I hope this will help other people!
这篇关于角度"InvalidPipeArgument:缺少语言环境数据"使用优化= true构建或投放时(--prod选项)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
