Search code examples
angularmonoreponrwl-nxnrwlangular-localize

NX Monorepo (14.3.6) no support for $localize (Angular localize)

Here is the case I have installed latest version of nx monorepo (npx create-nx-workspace@latest). Currently latest version of nx is (14.3.6). After this I have added angular localization package (npm install @angular/localize). At this point now adding i18n attribute (<title i18n>Title</title>) works fine and the translation key is extracted into messages.xlf file.

The problem is if I try to use $localize inside a component in this case no error is reported but when I try to generate messages.xlf with ng extract-i18n test-app. An empty messages.xlf is generated.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = $localize`my-app`;
}

messages.xlf

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
    </body>
  </file>
</xliff>

So the question is there support for $localize inside NX Monorepo? Maybe some configuration is missing in the project.json?

I am adding here a link to the github (https://github.com/hivaga/nx-localization-support) were current nx setup can be found.

PS I have tried latest vanilla angular application setup there $localize works as expected so obviously the problem is only on NX side!

Solution

  • I have found the 2 reasons for the generation of empty messages.xlf without in the same time reporting any errors:

    1. Missing import statment in application's polifills.js

      // polifills.js  
import '@angular/localize/init';

    2. Wrong import inside the component's *.ts. file. Basically $localize should be used without any reference to it inside the import statements. This is rather weird but it is how it works.

      // this import has to be removed    
import {$localize} from "@angular/localize/init";