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

Sulphuryl

How did you resolve this issue? The below solution didn't work for me. – Pram

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. – Sassafras

Answer 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://mcmap.net/q/470164/-how-can-i-localize-my-angular-11-library

Pie

Answer 2

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.

Dominicdominica

Answer 3

Simply use the Angular CLI for adding the dependency

To add this dependency properly to your project simply adding the dependency to your package.json is not sufficient. You will need to run the following command with the angular CLI to add the library correctly to your application:

ng add @angular/localize

I had the same problem and running this command resolved these typescript typing issues.

It seems to add the @angular/localize type definitions to your tsconfig file as follows:

"types": [
  "@angular/localize"
],

After rerunning your application (ng serve) all typing issues will be resolved.

Hillard

Answer 4

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)$" } ]

Chamois