`ng serve` is missing `i18n` related options

[smoke]

Versions

@angular/cli@^6.0.0

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.5
Node: 8.11.1
OS: linux x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.5
@angular-devkit/build-angular     0.6.5
@angular-devkit/build-optimizer   0.6.5
@angular-devkit/core              0.6.5
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@ngtools/webpack                  6.0.5
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps

• Have a project using @angular/cli@^6.0.0
• Try serving your app with with AOT translations using e.g. ng serve --aot --i18n-file src/locale/messages.es.xlf --i18n-locale es-ES --i18n-format xlf --i18n-missing-translations warning

Observed behavior

Unknown option: '--i18nFile'

Desired behavior

The ng serve with Angular 6 should have the i18n related options exposed as previously done by https://github.com/angular/angular-cli/pull/3098/files#diff-d0197aa8d6347193c60f14c6a528610f that are the same as ng build

Mention any other details that might be useful (optional)

Given there are no i18n options available for ng serve there is no way for developers to take advantage of both things - AOT translations, live reloading, hmr, etc.

[rhanb]

Hello @smoke ,

You can leverage the new configuration option from the new angular.json architecture, you can see the documentation here:

https://angular.io/guide/i18n#merge-with-the-aot-compiler

Cheers from France 🇫🇷

[smoke]

@rhanb No I can not, as when I try to put the respective options under serve -> configurations it doesn't work and shouts out that the json schema is violated.

[rhanb]

@smoke could you provide your angular.json ? And you have to precise the configuration you want to use when you serve your app with the option --configuration

[phl3x0r]

@smoke those belong in the build configurations, but I agree, the configuration could use an overhaul to allow more flexibility without adding more bloat. Matrix style configurations should be possible at least.

[smoke]

@phl3x0r @rhanb You are not getting the point. The ng build is working perfectly fine with both cli options and configuration in angular.json.

This issue is for the same options and configuration to be available also for ng serve. This was the case in earlier versions of @angular/cli and therefor this issue should be treated as regression or breaking change.

@rhanb although irrelevant here is the angular.json you asked for that I am trying to make it work:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "aur": {
      "root": "",
      "sourceRoot": "src/client",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/client/index.html",
            "main": "src/client/main.ts",
            "tsConfig": "src/client/tsconfig.app.json",
            "polyfills": "src/client/polyfills.ts",
            "assets": [
              "src/client/assets",
              "src/client/favicon.ico"
            ],
            "styles": [
              "src/client/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/client/environments/environment.ts",
                  "with": "src/client/environments/environment.prod.ts"
                }
              ]
            },
            "fr": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/client/environments/environment.ts",
                  "with": "src/client/environments/environment.prod.ts"
                }
              ],
              "i18nFile": "src/client/locale/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "aur:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "aur:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "aur:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/client/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/client/polyfills.ts",
            "tsConfig": "src/client/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/client/styles.scss"
            ],
            "assets": [
              "src/client/assets",
              "src/client/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/client/tsconfig.app.json",
              "src/client/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "aur-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "aur:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "aur",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "aur",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "aur"
    }
  }
}

With the above configuration:

smoke@viper-pc /home/smoke/projects/aur $ ng serve -c fr
Configuration 'fr' could not be found in project 'aur'.
Error: Configuration 'fr' could not be found in project 'aur'.
    at Architect.getBuilderConfiguration (/home/smoke/projects/aur/node_modules/@angular-devkit/architect/src/architect.js:106:23)
    at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (/home/smoke/projects/aur/node_modules/@angular/cli/models/architect-command.js:64:55)
    at MergeMapSubscriber._tryNext (/home/smoke/projects/aur/node_modules/rxjs/internal/operators/mergeMap.js:122:27)
    at MergeMapSubscriber._next (/home/smoke/projects/aur/node_modules/rxjs/internal/operators/mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (/home/smoke/projects/aur/node_modules/rxjs/internal/Subscriber.js:103:18)
    at TapSubscriber._next (/home/smoke/projects/aur/node_modules/rxjs/internal/operators/tap.js:109:26)
    at TapSubscriber.Subscriber.next (/home/smoke/projects/aur/node_modules/rxjs/internal/Subscriber.js:103:18)
    at MergeMapSubscriber.notifyNext (/home/smoke/projects/aur/node_modules/rxjs/internal/operators/mergeMap.js:141:26)
    at InnerSubscriber._next (/home/smoke/projects/aur/node_modules/rxjs/internal/InnerSubscriber.js:30:21)
    at InnerSubscriber.Subscriber.next (/home/smoke/projects/aur/node_modules/rxjs/internal/Subscriber.js:103:18)

smoke@viper-pc /home/smoke/projects/aur $ ng build -c fr
 10% building modules 3/4 modules 1 active …-aurora/frontend/src/client/styles.scssDEPRECATION WARNING on line 7, column 8 of stdin:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

                                                                                          
Date: 2018-05-29T07:51:26.622Z
Hash: ba9323ec556f8561d18c
Time: 83092ms
chunk {0} 0.912dac413eb853c6acb7.js () 400 kB  [rendered]
chunk {1} 1.613aeacc601d7c8fcb20.js () 83.7 kB  [rendered]
chunk {2} runtime.ff938461219d82a823fd.js (runtime) 1.86 kB [entry] [rendered]
chunk {3} styles.3c3d6b45fdf094eef859.css (styles) 189 kB [initial] [rendered]
chunk {4} polyfills.30d1db2b67839e340dfd.js (polyfills) 98.3 kB [initial] [rendered]
chunk {5} main.44c01d9fda73de7b8245.js (main) 2.55 MB [initial] [rendered]

And if I try placing configuration in serve -> configurations -> fr like so:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "aur": {
      "root": "",
      "sourceRoot": "src/client",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/client/index.html",
            "main": "src/client/main.ts",
            "tsConfig": "src/client/tsconfig.app.json",
            "polyfills": "src/client/polyfills.ts",
            "assets": [
              "src/client/assets",
              "src/client/favicon.ico"
            ],
            "styles": [
              "src/client/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/client/environments/environment.ts",
                  "with": "src/client/environments/environment.prod.ts"
                }
              ]
            },
            "fr": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/client/environments/environment.ts",
                  "with": "src/client/environments/environment.prod.ts"
                }
              ],
              "i18nFile": "src/client/locale/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "aur:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "aur:build:production"
            },
            "fr": {
              "aot": true,
              "i18nFile": "src/client/locale/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "aur:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/client/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/client/polyfills.ts",
            "tsConfig": "src/client/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/client/styles.scss"
            ],
            "assets": [
              "src/client/assets",
              "src/client/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/client/tsconfig.app.json",
              "src/client/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "aur-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "aur:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "aur",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "aur",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "aur"
    }
  }
}

It gives me:

smoke@viper-pc /home/smoke/projects/aur $ ng serve -c fr
Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(i18nFile).

[rhanb]

@smoke

Please do the following:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "aur:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "aur:build:production"
            },
            "fr": {
             "browserTarget": "aur:build:fr"
            }
          }
        }

You see outputting your angular.json wasn't that irrelevant.. 😉

[smoke]

@rhanb Thank you this option worked! Sorry if I was a bit too rude :(

Still I think It would really be nice to have the rest of the options available on the cli and as standalone configurations.

Also is there some documentation or explanation how things work with these browserTarget and etc. somewhere?

[rhanb]

@smoke it's ok no worries 👍

I agree on this point. I honestly had to dig into issues to find out about it.. The wiki is good but I think an API Doc should exists.

[phl3x0r]

I think we can all agree that the angular.json format needs more work, but afaik the devs are aware of this and hopefully the future will be brighter. :-)

[MickL]

I wanted to avoid using configuration by angular.json because it blows up so many duplicate configurations, but i18n options that were working on previous Angular CLI version are no more working:

ng serve --i18n-locale de --i18n-format xlf --i18n-file messages.de.xlf

Related issues for improving angular.json configuration: #10612 #11233