Angular library, Cannot find name $localize

Question

I'm refactoring my Angular 11 application into libraries using Nx tool. My main app have @angular/localize as dependency and @angular/localize import in polyfills.ts. Every usage of $localize in my library code generates Typescript error TS2304: Cannot find name '$localize'. My libraries don't have their own package.json file. Application build works without error. It's looks like Typescript typings problem. Any ideas?

library tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ],
  "include": [
    "**/*.ts"
  ]
}

tsconfig.json in library

{
  "extends": "../../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

angular version

Angular CLI: 11.1.1
Node: 14.15.4
OS: win32 x64

Angular: 11.1.0
... animations, cdk, common, compiler, compiler-cli, core
... elements, forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            10.2.1
@angular-devkit/schematics      11.0.7
@angular/cli                    11.1.1
@schematics/angular             11.0.7
@schematics/update              0.1101.1
rxjs                            6.6.3
typescript                      4.1.3

How did you resolve this issue? The below solution didn't work for me. — Hasan Can Saral, Feb 24 '21 at 13:02
I had to add `import '@angular/localize/init';` in my `test-setup.ts` file to get the tests running. The build ran after importing `import './polyfills';` in my `index.ts`. Maybe this helps you finding a solution to your problem even if my issue was not exactly the same as yours. — ABCoder, Mar 23 '21 at 08:19

score 4 · Answer 1 · answered Feb 02 '22 at 21:44

I came here looking for an answer, but somehow stumbled upon a solution on my way. In my project, the workspace/projects TS version is slightly different than VS Code's version (4.4.4 vs 4.5.4) which will sometimes cause these non-issues.

Background aside, in my scenario, all I had to do was pull up the command palette, type in/select "TypeScript: Select TypeScript Version..." and set it back to reference the workspace version.

score 1 · Answer 2 · answered Jan 27 '21 at 08:35

The import of @angular/localize/init may cause a tslint error for no-import-side-effect because it adds to the global context (that is, a side effect). To fix this error, add the following to your tslint.config

"no-import-side-effect": [ true, { "ignore-module": "(core-js/.|zone\.js/.|@angular/localize/init)$" } ]

score 1 · Answer 3 · answered Feb 07 '23 at 12:31

1

I tried adding i18n support to my library when I stumbled on this problem. Adding import '@angular/localize/init'; public-api.ts instead of pollyfill.ts did the trick for me.

Based on this answer: https://stackoverflow.com/a/68334503/10031161

answered Feb 07 '23 at 12:31

Jules

323
2
11

Angular library, Cannot find name $localize

3 Answers3