Angular项目ng serve启动报错：缺少$localize()全局函数

问题现象 #

• 执行 ng serve --configuration=fr 可正常启动项目并加载法语翻译
• 直接执行 ng serve 启动开发环境时，抛出以下错误：

ERROR Error: Uncaught (in promise): 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 add import '@angular/localize'; to your polyfills.ts file. 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.

当前项目配置（angular.json） #

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fleet-data-frontend": {
  "i18n": {
    "sourceLocale": "en-US",
    "locales": {
      "fr": {
        "translation": "src/locale/messages.fr.xlf",
        "baseHref": ""
      }
    }
  },
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "localize": ["fr"],
        "baseHref": "/app",
        "customWebpackConfig": {
          "path": "./webpack-custom.config.ts",
          "mergeRules": {
            "externals": "replace"
          }
        },
        "outputPath": "dist/my-app",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["src/favicon.ico", "src/assets"],
        "styles": ["src/styles.scss"],
        "scripts": []
      },
      "configurations": {
        "development": {
          "localize": false,
          "buildOptimizer": false,
          "extractLicenses": false,
          "namedChunks": true,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "e2e": {
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true,
          "vendorChunk": true,
          "customWebpackConfig": {
            "path": "./cypress/coverage.webpack.ts"
          },
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.mock.ts"
            }
          ]
        },
        "mock": {
          "buildOptimizer": false,
          "extractLicenses": false,
          "namedChunks": true,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.mock.ts"
            }
          ]
        },
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1.2mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
       "fr": {
        "localize": ["fr"]
       }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "browserTarget": "my-app-frontend:build"
      },
      "configurations": {
        "e2e": {
          "browserTarget": "my-app-frontend:build:e2e",
          "proxyConfig": "proxy.conf.json"
        },
        "mock": {
          "browserTarget": "my-app-frontend:build:mock",
          "proxyConfig": "proxy.conf.json"
        },
        "production": {
          "browserTarget": "my-app-frontend:build:production"
        },
        "development": {
          "browserTarget": "my-app-frontend:build:development",
          "proxyConfig": "proxy.conf.json"
        },
        "fr": {
          "browserTarget": "my-app-frontend:build:development,fr"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "my-app-frontend:build"
      }
    }
  }
    }
  }
 }

解决方案 #

1. 让Angular加载自定义polyfills文件 #

你的angular.json中build.options.polyfills仅配置了["zone.js"]，未包含你创建的polyfills.ts，导致导入的@angular/localize未生效。修改配置：

"polyfills": ["zone.js", "src/polyfills.ts"]

2. 正确编写polyfills.ts内容 #

在src目录下创建或修改polyfills.ts，添加以下内容：

// 基础zone.js polyfill
import 'zone.js';

// 导入Angular本地化全局函数
import '@angular/localize/init';

3. 验证@angular/localize安装 #

如果之前仅用npm install @angular/localize安装，建议改用CLI命令自动配置：

ng add @angular/localize

该命令会自动修改polyfills.ts和angular.json，避免手动配置遗漏。

4. 确认开发环境配置逻辑 #

你的development构建配置中localize设为false，此时模板中的i18n标签仍依赖$localize函数，确保上述polyfill配置生效后即可解决报错。

内容的提问来源于stack exchange，提问作者LaCodeM