Angular internationalization serve in development mode

Question

I would like to get experience with the angular i18n (https://angular.io/guide/i18n#build-from-the-command-line). I can serve my application with one locale, it's okay. But I can't debug the application, because this is bundled.

I am using Angular 12

Question How can I use internationalization (i18n) with normal developer mode (without bundled application)? Or maybe there is an option to have configuration without i18n, and use i18n only to build application in production mode?

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "pomodoro-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "pom",

      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "pl": {
            "translation": "src/locale/messages.pl.xlf"
          },
          "en": {
            "translation": "src/locale/messages.en.xlf"
          }
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "localize": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles/styles.scss"],
            "scripts": [],
            "aot": true,
            "optimization": {
              "fonts": false
            }
          },
          "configurations": {
            "production": {
              "optimization": true,
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {...},
                {...}
              ],
              "fileReplacements": [...],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "en": {
              "localize": ["en"],
              "baseHref": "/en/"
            },
            "pl": {
              "localize": ["pl"],
              "baseHref": "/pl/"
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "pomodoro-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "pomodoro-app:build:production"
            },
            "en": {
              "browserTarget": "pomodoro-app:build:en"
            },
            "pl": {
              "browserTarget": "pomodoro-app:build:pl"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "pomodoro-app:build"
          }
        },
        "test": {...}
        }
      }
    }
  },
  "defaultProject": "pomodoro-app",
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  }
}

P.S. I've checked documentation and live example (https://angular.io/generated/live-examples/i18n/stackblitz.html) and I can't find out something that will help me with that question.

Answer 1

I have found a solution, there was a problem with build and serve section in angular.json configuration:

here is the diff

...
    "build": {
          "configurations": {
            "development-en": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": false,
              "extractLicenses": false,
              "sourceMap": true,
              "localize": ["en"],
              "baseHref": "/en/"
            },
            "development-pl": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": false,
              "extractLicenses": false,
              "sourceMap": true,
              "localize": ["pl"],
              "baseHref": "/pl/"
            },
           ... 
      },
...
    "serve": {
        ...
        "configurations": {
              "development-en": {
                  "buildOptimizer": false,
                  "optimization": false,
                  "vendorChunk": false,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "localize": ["en"],
                  "baseHref": "/en/"
                },
               "development-pl": {
                  "buildOptimizer": false,
                  "optimization": false,
                  "vendorChunk": false,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "localize": ["pl"],
                  "baseHref": "/pl/"
            },
        }