title: Angular elements and Internationalization (i18n)
body: <p>I am working in a project that has Angular elements(or Angular web components) and I need do the Internationalization (i18n) in Spanish language following the Angular rules.</p>
  
  <p>my <strong>angular.json</strong> is:</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "my-component": {
        "projectType": "application",
        "schematics": {
          "@schematics/angular:component": {
            "style": "scss"
          },
          "i18n": {
            "sourceLocale": "en",
            "locales": {
              "es": "src/locale/messages.es.xlf"
            }
          }
        },
        "root": "",
        "sourceRoot": "src",
        "prefix": "app",
        "architect": {
          "build": {
            "builder": "ngx-build-plus:build",
            "options": {
              "outputPath": "dist/my-component",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.app.json",
              "aot": true,
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            },
            "configurations": {
              "es": {
                "localize": ["es"]
              },
              "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": "2mb",
                    "maximumError": "5mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "6kb",
                    "maximumError": "10kb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "ngx-build-plus:dev-server",
            "options": {
              "browserTarget": "my-component:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "my-component:build:production"
              },
              "es": {
                "browserTarget": "my-component:build:es"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "my-component:build"
            }
          },
          "test": {
            "builder": "ngx-build-plus:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.spec.json",
              "karmaConfig": "karma.conf.js",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "tsconfig.app.json",
                "tsconfig.spec.json",
                "e2e/tsconfig.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          },
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "my-component:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "my-component:serve:production"
              }
            }
          }
        }
      }
    },
    "defaultProject": "my-component"
  }
  </code></pre>
  
  <p>The problem appears when I try to build the project. When I execute this command <code>ng build --prod --output-hashing none --single-bundle true</code> for build the project(for angular elements) all its fine but when I try to build the translation using this command <code>ng build --configuration=es</code> this error appears in console:</p>
  
  <pre><code>An unhandled exception occurred: Requested locale 'es' is not defined for the project.
  See "/private/var/folders/yx/4vbvv8pd5r17fw8v08kxzt4m0000gq/T/ng-Sd34ew/angular-errors.log" for further details.
  </code></pre>
  
  <p>Any idea of how resolve it?</p>