angularinternationalizationangular-i18n

Angular $localize is not a function

I've got a strange error trying to use $localize in my ts files. I am getting this error

Error: Uncaught (in promise): TypeError: angular_localize_init__WEBPACK_IMPORTED_MODULE_3_.$localize is not a function TypeError: angular_localize_init__WEBPACK_IMPORTED_MODULE_3_.$localize is not a function

I have localisation working in my template files and there are no errors calling ng build. The error is at runtime when the component containing the $localize method is called. My ts code is

  private handleServerErrors(error: HttpErrorResponse): void {
    // Handle errors
    this.complete = true;
    switch (error.status) {

      ...

      case 500:
      default:
        // Could not update user
        this.errorMessage = $localize`:@@CalmBreathing_Desc_Short:Cobblers`;
        break;
    }
    console.error(error);
  }

The polyfills.ts file has this at the top

/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';

This is Angular 11.2.8 with nodejs 12. Any ideas?

Solution

  • So this was WebStorm trying to be helpful. It had added the following line to the top of my ts file

    import { $localize } from '@angular/localize/init';

    which caused it not to work