typescript 从版本14更新到15后出现Angular $localize错误

piztneat  于 2023-02-13  发布在  TypeScript
关注(0)|答案(2)|浏览(189)

将Angular应用程序从版本14.0.4更新为版本15.1.3(之前也尝试过15.1.2)后,我们在尝试访问应用程序时收到以下错误:

Uncaught Error: It looks like your application or one of its dependencies is using i18n. 
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)

所以问题是,我们已经做了这些步骤很多更新之前。你也可以看到,从描述,这是一些介绍了版本9。但我们正在运行版本14(和更早)没有任何此类问题。应用程序编译没有错误,这是一个运行时错误。
我还尝试在版本更新后重新运行上面提到的命令ng add @angular/localize,它只是将@angular/localize添加到tsconfig中的types数组,但仍然失败,并出现相同的错误。
我按照推荐的Angular 更新网站(https://update.angular.io/?l=3&v=14.0-15.0)进行了更新,并将所有其他相关项更新为最新版本(如材质、NgRx、 typescript 等)
我们可以直接在组件中使用$localize,例如:

private readonly onLabel = $localize`:@@common_onLabel:`;

或者也可以这样分享:

export const i18nD = $localize`:@@components_timeDisplay_shortDaysFormat:` as 'd';

我会很感激任何想法或步骤,我可以尝试,因为我运行的想法下一步该尝试什么。

htrmnn0y

htrmnn0y1#

看起来在最近的版本中,他们使用了不同的系统来包括全局$localize函数。
它不再依赖于多边形填充,而是在TS编译器配置types数组的项中查找@angular/localize的存在。
https://github.com/angular/angular-cli/pull/24032
尝试重新发布逻辑示意图以添加$localize

ng add @angular/localize

或者在tsconfig.json或项目使用的任何TS配置文件中手动添加类型路径。

{
  "compilerOptions": {
    ...
    "types": ["@angular/localize"]  
  }
  ...
}
jaql4c8m

jaql4c8m2#

我终于找到了问题所在:这是一个过时的browserslist配置,几年没碰过了,看起来是这样的:

"browserslist": [
  "> 1%",
  "last 1 version",
  "not ie > 0",
  "not ie_mob > 0",
  "safari >= 10",
  "not dead"
]

完全删除它已经解决了这个问题。我仍然在评估我是否应该设置为这个"defaults and supports es6-module"或Angular 15默认值:两者https://angular.io/guide/build#configuring-browser-compatibility似乎都能正常工作,不会导致我的问题中提到的错误。

相关问题