CODEWITHSUNDEEP
angularlocalizationinternationalizationnrwlnomachine-nx
Grzegorz Kniażuk
Grzegorz Kniażuk

Reputation: 169

Angular library, Cannot find name $localize

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

Upvotes: 8

Views: 11417

Answers (4)

Wilt
Wilt

Reputation: 44413

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.

Upvotes: 6

Jules
Jules

Reputation: 385

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

Upvotes: 5

PaulBunion
PaulBunion

Reputation: 405

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.

Upvotes: 4

Padmapriya Vishnuvardhan
Padmapriya Vishnuvardhan

Reputation: 2166

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

Upvotes: 1

Related Questions