11

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

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

{
  "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"
  }
}

$localize但是编译器报告说当我尝试做时它找不到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在我的库中使用该指令？

>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
4

5 回答 5

4

首先：安装@angular/localize包。

npm i @angular/localize -D

第二entryFile：在我的情况下，在您的ng-package.json文件中查找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

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';
于 2021-07-11T08:26:36.457 回答
2

你必须把import '@angular/localize/init';里面src/polyfills.ts的主项目。还必须angular.json为您的主项目（而不是库）配置才能使用本地化。

您必须angular.json根据您的语言环境进行类似的配置：

"projects": {
    "the-name-of-your-project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": "fr-messages.xlf"
        }
      },
      ...
      "architect": {
        ...
        "configurations": {
            "fr": { "localize": ["fr"] },
            ...
         }
      },
      "serve": {
          ...
          "configurations": {
            "fr": {
                "browserTarget": "angular-material-timepicker:build:fr"
              }
           }
           ...
       }

}

您可以通过单击以下链接查看我在项目中的不同部分以及一切正常的部分：1、2、3或查看整个文件。

这种方法的问题在于，如果您将其作为依赖项，则库的所有用户都必须手动安装并放置和配置它，即使他们不需要它。

我正在管理这个angular material timepicker 模块，我删除了这个依赖项，转而使用this - Mark element attributes for translations。注意i18n-title属性：

<img [src]="logo" i18n-title title="Angular logo" />

因此，现在所有用户只需使用i18n-<name_of_input>，一切正常，您无需费心处理localize.

因此，如果您的库组件/指令有输入，可以说您想要翻译的标题，您可以输入i18n-title="some title|An introduction title for this sample@@introductionComponent"并且一切正常。

于 2020-11-30T22:34:57.247 回答
1

通过以下方式解决了它：

  1. 在库的srctypings.d.ts文件夹旁边创建一个文件。
  2. 放进去：declare function $localize(messageParts: TemplateStringsArray, ...expressions: readonly any[]): string;

错误消失，编译器发现翻译部分没有问题。

于 2021-06-03T15:32:20.620 回答
1

不确定，尝试将其添加到您的条目文件中：

import '@angular/localize/init';
于 2020-11-30T22:13:44.140 回答
0

先试试安装@angular/localize包

npm install @angular/localize

然后，尝试@angular/localize/init在您的polyfills.ts文件中导入

import @angular/localize/init
于 2021-06-03T17:35:49.130 回答