4

Please advise how this error can be fixed, I'm trying to implement localization but having this issue. Guide I used: https://angular.io/guide/i18n#merge-translations-into-the-app If it will help, I was able to run using ng serve --configuration=ru --open and app was localized, but after I used _build.bat it broke my app and I cannot run it anymore at all. If I specify different port it throws an error "NGCC failed". Here's example of my code from angular.json file:

"projects": {
"operator": {
   "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "ru": "src/locale/messages.ru.xlf"
        }
   },
  "projectType": "application",
  "schematics": {},
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/operator",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "localize": true,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": ["src/version.js"]
      },
      "configurations": {
        "ru": {
            "localize": ["ru"]
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "3mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "operator:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "operator:build:production"
        },
        "ru": {
            "browserTarget": "operator:build:ru"
        }
      }
    }
urasavidi
  • 103
  • 1
  • 6

6 Answers6

5

After I removed "localize": true, error never showed up.

urasavidi
  • 103
  • 1
  • 6
  • While this works, it's not the proper solution. Check this answer for the proper solution. https://stackoverflow.com/a/67669667/6716264 – squirtgun Apr 18 '22 at 20:05
  • It is the correct answer, as long as the "serve > configurations" section of angular.json is also correctly structured. The section "projects > i18n > sourcelocale" should point to the default language, while the "locales" paragraph beneath will contain additional locales. With this ng serve without a config argument will use the default build language in development. – Rin and Len Sep 09 '22 at 12:18
4

It is because you are missing the locale configuration to start the application.

You should add --configuration=en after ng serve. Don't forget to replace en with the desired language.

Jöcker
  • 5,281
  • 2
  • 38
  • 44
  • 1
    Just so people know. You have to add the en configuration to your angular.json manually. See this answer for how to do it. https://stackoverflow.com/a/67669667/6716264 – squirtgun Apr 18 '22 at 20:07
  • That gave me different error: `An unhandled exception occurred: Configuration 'nb' is not set in the workspace.` when it was set, and was I was able to build using it the day before. – Rin and Len Sep 09 '22 at 12:07
4

Also, I run into the same problem when trying to deploy the application locally for a specific language.

My requirements were (Angular 15):

  • Production build: build all languages.
  • Local development: be able to serve a selected language.

Remove "localize": true, from build:options and put it in build:configurations:production.

Then set "localize": false in build:configurations:development.

In addition, set up new configurations for the languages (e.g. "en" and "it") build:configurations:en with "localize": ["en"] and build:configurations:it with "localize": ["it"].

Include the following configurations in the serve section: serve:configurations:en with "browserTarget": "MyApp:build:development,en" and serve:configurations:itwith"browserTarget": "MyApp:build:development,it`.

!!!Be sure to use a comma before the language and not colon!!!

Then run ng serve --configuration=it to start the application in Italian.

Here is the complete angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myProject": {
      "projectType": "application",
      "i18n": {
        "sourceLocale": "en",
        "locales": {
          "it": {
            "translation": "./src/locale/messages.it.json",
            "baseHref": ""
          }
        }
      },
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/App",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "localize": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "localize": false,
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "en": {
              "localize": ["en"]
            },
            "it": {
              "localize": ["it"]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "MyApp:build:production"
            },
            "development": {
              "browserTarget": "MyApp:build:development"
            },
            "en": {
              "browserTarget": "MyApp:build:development,en"
            },
            "it": {
              "browserTarget": "MyApp:build:development,it"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MyApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@angular-eslint/schematics"
    ],
    "analytics": false
  }
}
riorudo
  • 977
  • 7
  • 14
2

From Angular official documentation:

Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time. Setting the "localize" option to true will cause an error when using ng serve if more than one locale is defined. Setting the option to a specific locale, such as "localize": ["fr"], can work if you want to develop against a specific locale (such as fr)

Please refer to this link to know more: Angular i18n localize-config

Kobe Brilliant
  • 53
  • 8
0

I'm using Angular 15 and I had the same problem, but I solved it by using a comma instead of a colon inside browserTarget just as insisted by @riorudo in his answer. I didn't even change localize to false and after running ng serve --configuration=en-US and ng serve --configuration=fr they both worked like a charm !

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "fr": {
          "browserTarget": "myApp:build:development,fr"
        },
        "en-US": {
          "browserTarget": "myApp:build:development,en-US"
        },
        "production": {
          "browserTarget": "myApp:build:production"
        },
        "development": {
          "browserTarget": "myApp:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
Samuel
  • 31
  • 4
0

As clearly stated in the documents (https://angular.io/guide/i18n-common-merge)

Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing ONE SINGLE locale at a time.

On purpose, leaving the "localize" option to true, and have simply defined more than one locale, using basic 'ng serve', the error occurs (as per design)!

Solution use a modified 'ng serve --configuration:en-US' or if wanted to develop against a specific locale (e.g. 'nl') 'ng serve --configuration:nl'

Study the 'angular.json'

angular.json

  ...
  "projects": {
    "<your-project-name>": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf"
          }
        }
      },
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "localize": [
              "en-Us"
            ],
            "aot": true,
            "i18nMissingTranslation": "error",
            "outputPath": "dist/your-project-name",
            ...
          },
          "configurations": {
            "production": {
              ...
            },
            "development": {
              ...
            },
            "en-US": {
              "localize": [
                "en-US"
              ]
            },
            "nl": {
              "localize": [
                "nl"
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "<your-project-name>:build:production"
            },
            "development": {
              "browserTarget": "<your-project-name>:build:development"
            },
            "en-US": {
              "browserTarget": "<your-project-name>:build:development,en-US"
            },
            "nl": {
              "browserTarget": "<your-project-name>:build:development,nl"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "<your-project-name>:build",
            "format": "xlf",
            "outputPath": "src/locale"
          }
        },
        ...
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "prerender": false,
            "ssr": false,
            "browserTarget": "<your-project-name>:build:production",
            "firebaseProject": "<your-project-name>-i18n",
            "firebaseHostingSite": "<your-project-name>-i18n"
          }
        }
      }
    }
  },

...execute, during the development, your 'default' at one terminal (if needed your desired language at another...)

package.json

 ...
 "scripts": {
    ...
    "start": "ng serve --configuration=en-US",
    "start:en": "ng serve --configuration=en-US",
    "start:nl": "ng serve --configuration=nl",
    ...
  },
  ...
KWHJ
  • 3
  • 6