ng build with i18n creates extra layer of lang folders

[spock123]

🐞 Bug report

Command (mark with an x)

• new
• [X ] build

Is this a regression?

<
!-- Did this behavior use to work in the previous version? -->

Yes, the previous version in which this bug was not present was: ....

Description

My application supports 3 locals: da, sv and en. When using CLI v.8.x it works as expected, creating a folder for each language build in the dist folder (see attached image)

When using latest CLI v.9-rc.5 , the build creates double folders, so /dist/da becomes /dist/da/da etc.. (see attached image)

🌍 Your Environment

Angular CLI: 9.0.0-rc.5
Node: 12.13.1
OS: darwin x64

Angular: 9.0.0-rc.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.5
@angular-devkit/build-angular     0.900.0-rc.5
@angular-devkit/build-optimizer   0.900.0-rc.5
@angular-devkit/build-webpack     0.900.0-rc.5
@angular-devkit/core              8.3.20
@angular-devkit/schematics        8.3.20
@angular/fire                     5.2.3
@ngtools/webpack                  9.0.0-rc.5
@schematics/angular               9.0.0-rc.5 (cli-only)
@schematics/update                0.900.0-rc.5
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

[spock123]

Attached 8.x vs 9.x dist folder layout

[elvisbegovic]

Hi there, you don’t provide step/command you use to get this result. Can you provide your angular.json and how your build your app? Even better if you can make a quick repro.

[spock123]

@elvisbegovic I know, our project is pretty large. I'll try and see if I can create a small repo, but just the fact that there is this difference between 8.x and 9.x builds should mean something.

I'll attach our angular.json but it's pretty large... We have 3 different build targets: test, staging and production.

The issue is with all targets.

Thank you

I should note that ng serve works perfectly , it's only ng build that acts weird :)

[spock123]

Angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "selfservice": {
      "i18n": {
        "locales": {
          "da": "src/locale/messages.da.xlf",
          "sv": "src/locale/messages.sv.xlf",
          "en": "src/locale/messages.en.xlf"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "sass"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/robots.txt",
              "src/favicon.png",
              "src/assets",
              "src/browserconfig.xml",
              "src/manifest.json",
              {
                "glob": "**/*",
                "input": "./assets",
                "output": "assets/"
              }
            ],
            "styles": [
              "./node_modules/material-icons/iconfont/material-icons.scss",
              "src/styles/index.scss"
            ],
            "scripts": [
              "./node_modules/file-saver/dist/FileSaver.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true
            },
            "da": {
              "aot": true,
              "localize": [
                "da"
              ],
              "outputPath": "dist/da"
            },
            "sv": {
              "aot": true,
              "localize": [
                "sv"
              ],
              "outputPath": "dist/sv"
            },
            "en": {
              "aot": true,
              "localize": [
                "en"
              ],
              "outputPath": "dist/en"
            },
            "beta-da": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.beta.ts"
                }
              ],
              "localize": [
                "da"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/da"
            },
            "beta-sv": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.beta.ts"
                }
              ],
              "localize": [
                "sv"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/sv"
            },
            "beta-en": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.beta.ts"
                }
              ],
              "localize": [
                "en"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/en"
            },
            "staging-da": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "localize": [
                "da"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/da"
            },
            "staging-sv": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "localize": [
                "sv"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/sv"
            },
            "staging-en": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "localize": [
                "en"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/en"
            },
            "prod-da": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "localize": [
                "da"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/da"
            },
            "prod-sv": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "localize": [
                "sv"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/sv"
            },
            "prod-en": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "localize": [
                "en"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/en"
            },
            "test-da": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "localize": [
                "da"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/da"
            },
            "test-sv": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "localize": [
                "sv"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/sv"
            },
            "test-en": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "localize": [
                "en"
              ],
              "optimization": true,
              "outputHashing": "bundles",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "outputPath": "dist/en"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "selfservice:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "selfservice:build:production"
            },
            "da": {
              "browserTarget": "selfservice:build:da"
            },
            "sv": {
              "browserTarget": "selfservice:build:sv"
            },
            "en": {
              "browserTarget": "selfservice:build:en"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "selfservice:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.sass"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "selfservice-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "selfservice:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "selfservice:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "selfservice",
  "cli": {
    "analytics": "d20e149a-65c6-41d3-b62d-1d97b478f808"
  }
}

[elvisbegovic]

Hmm thank you (you should use markdown to print your json human readable :))
But i think I get your problem.
With v9 you don’t need config for each locale.

You can remove all command like:

"da": {
"aot": true,
"localize": [
"da"
],
"outputPath": "dist/da"
},
"sv": {
"aot": true,
"localize": [
"sv"
],
"outputPath": "dist/sv"
},
"en": {
"aot": true,
"localize": [
"en"
],
"outputPath": "dist/en"
},

And to get all locale, add in your production config:
localize:['da','sv','en'] and when run ng build —prod —localize it will output your project in your dist.

[elvisbegovic]

Additionally in your i18n object sourceLocale option is interesting. Then you don’t need locale file for language your are working on by default

[spock123]

@elvisbegovic thank you for your insight - I'll try & modify my angular.json. I was aware of the improvements in the syntax ,but I didn't think there were supposed to be breaking changes.

In any case, I'll try and modify my code, you can close this issue (or I will soonish).

Is there by chance any documentation of these changes to angular.json available already? I haven't been able to find any... cheers

[elvisbegovic]

I think you don’t provide enough informations about steps you follow to update from 8 to 9 by ex is it manual or schematics(@clydin can help to say if i18n migration is missing something)
Post your angular.json before migration to v9. It should not break you code.

Ps: if it can help check this PR angular/angular#34053

[spock123]

@elvisbegovic I used the guide: https://update.angular.io/#8.2:9.0