Angular-cli: `ng serve` is missing `i18n` related options

Created on 28 May 2018  ·  12Comments  ·  Source: angular/angular-cli

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.

devkibuild-angular
Source
picture smoke
👍4

Most helpful comment

@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.. 😉

picture rhanb on 29 May 2018
👍7

All 12 comments

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 :fr:

rhanb picture rhanb on 28 May 2018

@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.

smoke picture smoke on 28 May 2018

@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

rhanb picture rhanb on 28 May 2018

@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.

phl3x0r picture phl3x0r on 29 May 2018

@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).
smoke picture smoke on 29 May 2018
👍1

@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.. 😉

rhanb picture rhanb on 29 May 2018
👍7

@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?

smoke picture smoke on 29 May 2018

@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.

rhanb picture rhanb on 29 May 2018

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. :-)

phl3x0r picture phl3x0r on 29 May 2018
👍3

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

MickL picture MickL on 18 Jun 2018
👍5 👎1

It is true that the i18n options are now exclusively in the build. This is mostly because they are not related to serve at all. The existing options are documented in https://angular.io/cli/build and https://angular.io/cli/serve. Anything that you can set with a flag, you should be able to set in angular.json.

Now the problem with that approach and i18n in general is the explosive grown of combinations. The best place to discuss that problem is the existing https://github.com/angular/angular-cli/issues/10612 issue.

filipesilva picture filipesilva on 29 Jan 2019
👍2

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sysmat picture sysmat  ·  3Comments
ericel picture ericel  ·  3Comments
naveedahmed1 picture naveedahmed1  ·  3Comments
JanStureNielsen picture JanStureNielsen  ·  3Comments
jbeckton picture jbeckton  ·  3Comments