Bug when generating translation file using ng xi18n

The issue

I'm currently working on making our UI translatable using the ng xi18n --outputPath [path] command. At first it worked, generating a messages.xlf file inside the given [path] until it suddenly stopped doing so. And worst of all: ng xi18n didn't complain why it couldn't generate a messages.xlf file, even though the project built properly.

Going through the issue on video.

Project structure

root
├─dist
├─node_modules
├─src
        ├─api 
        └─frontend (Angular stuff)
                ├─locale (where to put the .xlf files)
                ├─main.ts
                └─tsconfig.app.json
├─.angular-cli.json
├─package.json
└─tsconfig.json

Note: There's of course more to the structure that has been omitted.

Versions

Output from ng -v:

Angular CLI: 1.5.0
Node: 8.9.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Finding the cause of the problem

So after spending hours on end trying to find out why ng xi18n once worked and suddenly didn't, I stumbled on a recent change that was made to our root/tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
+ "allowJs": true, <-----------------   looks like a pretty innocent change
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Now I'll have to ask my teammate the reason for the change, but that was apparently the cause why ng xi18n silently failed. When setting that same property to false in our root/src/frontend/tsconfig.app.json, and running ng build... ng xi18n started working again.

Conlusion

Now whether it is an intentional limitation of ng xi18n or not, to not extract the translation strings from the project when "allowJs" is set to true... Angular CLI should in any case return an error message of what failed.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---