Posts

Showing posts with the label Angular9

Angular 9 Introduced A Global '$localize()' Function That Needs To Be Loaded

Answer : You need to make sure you have the @angular/localize package first: npm install @angular/localize --save Then, import '@angular/localize/init' in your polyfills.ts file just like the error says The best way if you are using Angular CLI is to run ng add @angular/localize It will take care of it automatically Or else import '@angular/localize/init'; to your polyfills.ts Tested with Angular 9 If you have many angular projects in same workspace, running ng add @angular/localize will add import statement import '@angular/localize/init' to polyfills.ts in default Project only,i think this will be fixed in later updates. so you need to add import '@angular/localize/init' manually to polyfills.ts in other projects.

Angular 9: I18n In TypeScript

Answer : Check this blog https://blog.ninja-squad.com/2019/12/10/angular-localize/ @Component({ template: '{{ title }}' }) export class HomeComponent { title = $localize`You have 10 users`; } And You have to manually add it to your messages.fr.xlf <trans-unit id="6480943972743237078"> <source>You have 10 users</source> <target>Vous avez 10 utilisateurs</target> </trans-unit> don't forgot re serve your angular application. UPDATE FOR ID @Component({ template: '{{ title }}' }) export class HomeComponent { title = $localize`:@@6480943972743237078:`; } https://github.com/angular/angular/blob/252966bcca91ea4deb0e52f1f1d0d3f103f84ccd/packages/localize/init/index.ts#L31 The better way of translationId is: title = $localize`:@@Home.Title:Some title text` and you have to manually add it to your messages.xx.xlf (for example messages.fr.xlf and so on) <trans-unit id="Home.Title...