You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Angular 19.1.2 搭配高版本Kendo-Angular-Charts 加载失败及$localize未定义错误求助

Angular 19.1.2 搭配高版本Kendo-Angular-Charts 加载失败及$localize未定义错误求助

我之前在项目升级时也碰到过一模一样的问题——Angular 19.1.2搭配Kendo-Angular-Charts 16.1.0完全正常,但升到17.0.0或19.1.2版本后,明明构建成功了,一打开页面就弹出$localize is not defined at AppPieChartComponent的错误。折腾了好一阵才搞定,给你分享几个亲测有效的解决思路:

1. 手动引入Angular本地化初始化脚本

高版本的Kendo Charts默认依赖了Angular的$localize国际化API,但Angular 19不会自动帮你全局引入这个模块。你只需要在项目的根模块(比如app.module.ts)最顶部添加一行导入:

import '@angular/localize/init';

这样就能全局注册$localize变量,直接解决未定义的核心问题。

2. 配置Kendo的国际化模块

高版本Kendo组件对国际化的依赖更严格,记得在你的模块中导入并声明Kendo的国际化基础模块:

import { IntlModule } from '@progress/kendo-angular-intl';

@NgModule({
  imports: [
    // 其他业务模块...
    IntlModule
  ]
})
export class AppModule { }

这个模块是Kendo组件处理本地化逻辑的基础,缺失的话很容易引发连锁的依赖报错。

3. 调整Angular构建配置

有时候构建流程没有正确打包本地化相关代码,你可以在angular.jsonbuild.options中添加本地化配置:

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          // 其他构建配置...
          "localize": ["en"] // 替换成你项目实际使用的语言代码,比如zh-CN
        }
      }
    }
  }
}

同时检查tsconfig.jsoncompilerOptions.types数组,确保包含@angular/localize

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

4. 清理缓存并重新构建

缓存导致的依赖加载异常也很常见,执行以下命令彻底清理后重新安装构建:

# 清理Angular CLI缓存
ng cache clean
# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新构建项目
ng build

Windows用户可以把rm -rf换成rd /s /q node_modules package-lock.json

如果以上方法都没解决,建议查看Kendo-Angular-Charts 17.0.0及以上版本的版本变更说明,确认是否有针对Angular 19的特殊适配要求,毕竟跨了好几个大版本,可能存在一些破坏性变更需要额外处理。

内容来源于stack exchange

火山引擎 最新活动