如何本地化我的 Angular 11 库?

问题描述

我正在将我的 Angular 11 应用程序重构为库.我的常规应用程序使用 @angular/localize 作为开发依赖项进行本地化，因此我在我的部分代码中使用了 $localize 指令.我需要将带有此指令的代码移动到库中，但我不知道如何执行此操作.

I'm refactoring my Angular 11 application into libraries. My regular application is localized using @angular/localize as a dev dependency, so I have made use of the $localize directive in part of my code. I need to move this code with this directive into a library, but I can't figure out how to do this.

在我的库的 package.json 文件中，我在 @angular/localize 上添加了一个对等依赖项以匹配我的应用程序中的 devDependency:

In my library's package.json file, I've added a peer-dependency on @angular/localize to match the devDependency in my application:

{
  "name": "example",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^11.0.0",
    "@angular/core": "^11.0.0",
    "@angular/localize": "~11.0.0"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

然而，当我尝试执行 ng build 时，编译器报告它找不到 $localize.

However the compiler reports that it can't find $localize when I try to do ng build <library name>.

× Compiling TypeScript sources through NGC
ERROR: projects/example/src/lib/example.service.ts:52:23 - error TS2304: Cannot find name '$localize'.

52         description = $localize `example localized text`;
                         ~~~~~~~~~

如何在我的库中使用 $localize 指令?

How can I use the $localize directive in my library?

>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.1
Node: 12.18.3
OS: win32 x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
ng-packagr                      11.0.3
rxjs                            6.6.3
typescript                      4.0.5

推荐答案

第一:安装@angular/localize包.

npm i @angular/localize -D

第二:在您的 ng-package.json 文件中找到 entryFile，在我的例子中是 public-api.ts

Second: Find entryFile in your ng-package.json file, in my case public-api.ts

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ngx-my-lib",
  "lib": {
    "entryFile": "src/public-api.ts" // <=== this line
  }
}

第三:将 import '@angular/localize/init'; 添加到您的 entryFile，在我的例子中是 public-api.ts

Third: add import '@angular/localize/init'; to your entryFile, in my case public-api.ts

import '@angular/localize/init'; // <=== this line

export * from './lib/ngx-my-lib.service';
export * from './lib/ngx-my-lib.component';
export * from './lib/ngx-my-lib.module';

这篇关于如何本地化我的 Angular 11 库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！