3

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?

Real World
  • 1,593
  • 1
  • 21
  • 46

1 Answers1

16

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

Real World
  • 1,593
  • 1
  • 21
  • 46
  • can confirm this. should be an accepted answer. also if you have this import it won't throw you any error when run locally. – Mr. L Jun 23 '21 at 08:01
  • I've tried everything on the internet and this finally got my "lint": "npx eslint src/**/*.{js,jsx,ts,tsx,html} --quiet --fix" to work – Lauri Elias Nov 22 '22 at 21:55