`ng serve` is missing `i18n` related options #11039

smoke · 2018-05-28T12:12:26Z

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.

The text was updated successfully, but these errors were encountered:

rhanb · 2018-05-28T13:45:19Z

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 · 2018-05-28T14:21:09Z

@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 · 2018-05-28T16:32:49Z

@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 · 2018-05-29T07:04:30Z

@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 · 2018-05-29T08:01:03Z

@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 · 2018-05-29T08:20:19Z

@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 · 2018-05-29T09:01:12Z

@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 · 2018-05-29T10:02:03Z

@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 · 2018-05-29T11:57:08Z

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 · 2018-06-18T15:41:48Z

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

filipesilva · 2019-01-29T14:39:07Z

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 #10612 issue.

angular-automatic-lock-bot · 2019-09-09T06:41:10Z

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

clydin added the comp: cli/serve label May 29, 2018

filipesilva added area: @angular-devkit/build-angular and removed area: @angular-devkit/build-angular comp: cli/serve labels Jun 8, 2018

jrolheiser mentioned this issue Aug 27, 2018

staticInjectorError[InjectionToken TranslationsFormat] when building with AOT ngx-translate/i18n-polyfill#4

Closed

ngbot bot added this to the needsTriage milestone Jan 24, 2019

filipesilva closed this as completed Jan 29, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`ng serve` is missing `i18n` related options #11039

`ng serve` is missing `i18n` related options #11039

smoke commented May 28, 2018

rhanb commented May 28, 2018

smoke commented May 28, 2018

rhanb commented May 28, 2018

phl3x0r commented May 29, 2018

smoke commented May 29, 2018 •

edited

Loading

rhanb commented May 29, 2018

smoke commented May 29, 2018

rhanb commented May 29, 2018

phl3x0r commented May 29, 2018

MickL commented Jun 18, 2018 •

edited

Loading

filipesilva commented Jan 29, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

ng serve is missing i18n related options #11039

ng serve is missing i18n related options #11039

Comments

smoke commented May 28, 2018

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

rhanb commented May 28, 2018

smoke commented May 28, 2018

rhanb commented May 28, 2018

phl3x0r commented May 29, 2018

smoke commented May 29, 2018 • edited Loading

rhanb commented May 29, 2018

smoke commented May 29, 2018

rhanb commented May 29, 2018

phl3x0r commented May 29, 2018

MickL commented Jun 18, 2018 • edited Loading

filipesilva commented Jan 29, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

`ng serve` is missing `i18n` related options #11039

`ng serve` is missing `i18n` related options #11039

smoke commented May 29, 2018 •

edited

Loading

MickL commented Jun 18, 2018 •

edited

Loading