Использование опубликованных библиотек

Последнее обновление 17 июля 2019 08:10:56 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

При создании приложений Angular вы можете воспользоваться сложными сторонними библиотеками, такими как Angular Material, а также богатой экосистемой сторонних библиотек.

Установка библиотек

Библиотеки публикуются в виде пакетов npm, обычно вместе со схемами, которые интегрируют их с Angular CLI. Чтобы интегрировать повторно используемый библиотечный код в приложение, вам необходимо установить пакет и импортировать предоставленную функциональность там, где вы будете его использовать. Для большинства опубликованных библиотек Angular вы можете использовать команду Angular CLI «ng add <lib_name>».

Команда ng add использует менеджер пакетов npm или yarn для установки пакета библиотеки и вызывает схемы, включенные в пакет, для других скаффолдингов в коде проекта, таких как добавление операторов импорта, шрифтов, тем и т. Д.

Опубликованная библиотека обычно содержит README или другую документацию о том, как добавить эту библиотеку в ваше приложение.

Типы библиотек

Библиотечные пакеты часто включают в себя наборы в файлах «.d.ts». Например, откройте node_modules / @ angular / материал вашего обычного углового приложения, чтобы проверить это.

Если в пакет вашей библиотеки не входит набор текста и ваша IDE жалуется, вам может потребоваться установить связанный с библиотекой пакет @ types / <lib_name> библиотеки.

Например, предположим, у вас есть библиотека с именем vitaAngular:

npm install vitaAngular -save
npm install @types/vitaAngular --save-dev

Демонстрация в реальном времени:

См. Установка пакета пера от w3resource ( @ w3resource ) на CodePen .

Типы, определенные в пакете @ types / для библиотеки, установленной в рабочей области, автоматически добавляются в конфигурацию TypeScript для проекта, использующего эту библиотеку. TypeScript ищет типы в папке node_modules / @ types по умолчанию, поэтому вам не нужно добавлять каждый пакет типов отдельно.

Если в библиотеке нет доступных типов в @ types /, вы все равно можете использовать ее, вручную добавив для нее наборы. Сделать это:

1. Создайте файл typings.d.ts в вашей папке src /. Этот файл автоматически включается в определение глобального типа.

2. Добавьте следующий код в src / typings.d.ts

declare module 'host' {	
  export interface Host {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }
  export function parse(url: string, queryString?: string): Host;
}

Демонстрация в реальном времени:

Посмотрите, как печатает Pen по w3resource ( @ w3resource ) на CodePen .

3. В компонент или файл, который использует библиотеку, добавьте следующий код.

import * as host from 'host';
const parsedUrl = host.parse('https://angular.io');
console.log(parsedUrl.hostname);

Демонстрация в реальном времени:

Смотрите файл пакета Pen от w3resource ( @ w3resource ) на CodePen .

Вы можете определить столько вводов, сколько необходимо.

Обновление библиотек

Библиотеки могут обновляться их издателями, а также иметь свои собственные зависимости, которые необходимо поддерживать в актуальном состоянии. Чтобы проверить наличие обновлений в установленных библиотеках, используйте команду ng update.

Использовать нг обновление обновить отдельные версии библиотеки. Angular CLI проверяет последний опубликованный выпуск библиотеки и, если последняя версия новее установленной версии, загружает ее и обновляет файл package.json в соответствии с последней версией.

Когда вы обновляете Angular до новой версии, вам необходимо убедиться, что все используемые вами библиотеки являются актуальными. Если у библиотек есть взаимозависимости, вам, возможно, придется обновить их в определенном порядке.

Добавление библиотеки в глобальную область выполнения

Устаревшие библиотеки JavaScript, которые не импортируются в приложение, можно добавить в глобальную область выполнения и загрузить, как если бы они были в теге сценария. Сконфигурируйте CLI, чтобы сделать это во время сборки, используя опции «scripts» и «styles» целевого объекта сборки в файле конфигурации CLI angular.json.

Например, чтобы использовать библиотеку Bootstrap 4, сначала установите библиотеку и ее зависимости с помощью менеджера пакетов npm:

npm install jquery --save
		npm install popper.js --save
		npm install bootstrap --save

Демонстрация в реальном времени:

Посмотрите глобальную область Pen от w3resource ( @ w3resource ) на CodePen .

В файле конфигурации angular.json добавьте связанные файлы сценариев в массив «scripts»:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],

Демонстрация в реальном времени:

Смотрите массив сценариев Pen от w3resource ( @ w3resource ) в CodePen .

Добавьте CSS-файл Bootstrap в массив «styles»:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

Демонстрация в реальном времени:

Посмотрите массив стилей Pen по w3resource ( @ w3resource ) на CodePen .

Запустите или перезапустите ng serve, чтобы увидеть, как Bootstrap 4 работает в вашем приложении.

Использование глобальных библиотек времени выполнения внутри вашего приложения

После того, как вы импортируете библиотеку, используя массив «scripts», вы не должны импортировать ее, используя инструкцию import в вашем коде TypeScript (например, import * как $ from 'jquery';). Если вы это сделаете, вы получите две разные копии библиотеки: одну импортированную как глобальную библиотеку, а другую как модуль. Это особенно плохо для библиотек с плагинами, таких как JQuery, потому что у каждой копии будут разные плагины.

Вместо этого загрузите наборы для своей библиотеки (npm install @ types / jquery) и следуйте инструкциям по установке библиотеки. Это дает вам доступ к глобальным переменным, предоставляемым этой библиотекой.

Определение типов для глобальных библиотек времени выполнения

Если используемая вами глобальная библиотека не имеет глобальных типизаций, вы можете объявить их вручную как любую в src / typings.d.ts. Например:

declare var libraryName: any;

Демонстрация в реальном времени:

См. Pen, определяющий наборы по w3resource ( @ w3resource ) в CodePen .

Некоторые сценарии расширяют другие библиотеки; например с плагинами JQuery:

$('.test').myPlugin();

Демонстрация в реальном времени:

Посмотрите, как Pen расширяет библиотеки с помощью w3resource ( @ w3resource ) на CodePen .

В этом случае установленный @ types / jquery не включает myPlugin, поэтому вам нужно добавить интерфейс в src / typings.d.ts. Например:

interface JQuery {
  myPlugin(options?: any): any;
}

Демонстрация в реальном времени:

Смотрите интерфейс Pen от w3resource ( @ w3resource ) на CodePen .

Если вы не добавили интерфейс для расширения, определенного сценарием, в вашей среде IDE появляется ошибка:

[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'

Демонстрация в реальном времени:

См. Ошибка пера от w3resource ( @ w3resource ) на CodePen .

Предыдущая: Создание библиотек
Далее: Структурные директивы