Reputation: 143
An unhandled exception occurred: The development server only supports localizing a single locale per build
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"
}
}
}
Upvotes: 8
Views: 10388
Answers (6)
Reputation: 13
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",
...
},
...
Upvotes: 1
Reputation: 59
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"
},
Upvotes: 1
Reputation: 1227
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
}
}
Upvotes: 13
Reputation: 73
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
Upvotes: 2
Reputation: 6768
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.
Upvotes: 5
Related Questions
- Angular production build with localize
- Missing locale data for the locale "XXX" with angular
- Angular 10.2 build: Localized bundle generation failed: Cannot read property 'value' of undefined
- Angular App not running because of localization
- Angular 9 Locale data for 'en-US' cannot be found. No locale data will be included for this locale
- Angular npm run build - Locale data for 'fr-FR' cannot be found
- Angular "InvalidPipeArgument: Missing locale data" when build or serve with optimization=true (--prod option)
- Angular 9 Internationalization - Requested locale Error
- An unhandled exception occurred: Missing required <target> element
- Two language angular builds, one ok one with error