Как я могу локализовать свою библиотеку Angular 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
Источник

5 ответов

Во-первых : установить @angular/localize упаковка.

      npm i @angular/localize -D

Во-вторых : найдите в своем ng-package.json файл, в моем случае 

      {
  "$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';
Источник

Вы должны поставить 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, и я удалил эту зависимость в пользу использования этого - атрибутов элемента Mark для переводов. Обратите внимание на атрибут 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" и все отлично работает.

Источник

Не уверен, попробуйте добавить это в свой входной файл:

import '@angular/localize/init';
Источник

Решено:

  1. Создание typings.d.tsрядом с папкой src библиотеки .
  2. Положить внутрь: declare function $localize(messageParts: TemplateStringsArray, ...expressions: readonly any[]): string;

Ошибка исчезнет, ​​и компилятор без проблем найдет части перевода.

Источник

Попробуйте установить @angular/localize пакет сначала

      npm install @angular/localize

Затем попробуйте импортировать @angular/localize/init в твоей polyfills.ts файл

      import @angular/localize/init
Источник
Другие вопросы по тегам