Uncaught (in promise): Error: It looks like your application or one of its dependencies is using i18n. Angular 9 introduced a global $localize()

Question

I would like to localize my application, my code is working my application is compiling . When I start my application with command ng serve --configuration=fr it works just fine and it's serving my french translation. When I want to start my application with only ng serve I get this error

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.

Here is my 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"

      }

    }

  }

    }

  }

 }

,,,

I have tried all the solutions from this answer:

Angular 9 introduced a global '$localize()' function that needs to be loaded

and this one:

Error: It looks like your application or one of its dependencies is using i18n after recompile angular 13.1

I have made sure ng add @angular/localize is installed and my project root doesn't have polyfills.ts file (I have tried to create it and to import localize but this didn't work'

Answer 1

After some time I have figured that problem is present only in recent versions of Angular (15). I found this answer : Angular $localize error after updating from version 14 to 15 and after adding

 @angular/ localize

to tsconfig.json and tsconfig.app.json everything worked fine...