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