Angular. Подключение внешних библиотек

Опубликовано в Angular • 19 ноября 2019 г. • 1 мин. на чтение

Внедрение библиотеки через механизм внедрения зависимостей позволяет сделать нормальные тесты на компонент.

Подключение
Объявление

declare const gapi: GoogleApi;

export const GOOGLE_API = new InjectionToken('GOOGLE_API', {
  providedIn: 'root',
  factory: () => gapi
});

или

export const GOOGLE_API = new InjectionToken('GOOGLE_API', {
  providedIn: 'root',
  factory: () => window['gapi']
});

Использование

constructor(
   private readonly _changeDetectorRef: ChangeDetectorRef,
   @Inject(GOOGLE_API) private readonly _gapi: GoogleApi,
) {}

Похожие записи

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

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

Error: Cannot find module '@angular-devkit/core' - after clean install

Решение проблемы - установка новой версии @angular/cli

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

@ViewChild
@ViewChildren

Переменные окружения для Angular приложения

Использование переменных окружения Docker контейнера в Angular environment.

Аналог Jasmine createSpyObj в Jest

// Jest
const serviceMock = {
 methods: jest.fn(),
 you: jest.fn(),
 want: jest.fn(),
 to: jest.fn(),
 mock: jest.fn()
};

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.