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

Answer 1

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.

Answer 2

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

Answer 3

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. Do note that this will make an update to .vscode/settings.json, which may not be desirable, especially if you have that as a tracked file. I'm able to switch the TS version and remove that line from the file and everything continues to work fine.

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