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 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"
  ],

forkJoin - параллельные запросы, mergeMap - последовательные запросы

Представлена реализация взаимной подписки без генерации событий.

Для решения проблемы существует 2 подхода:

Способ с использованием Map (ключи -параметры запроса) и rxjs операторов publishReplay(1), refCount()

deployUrl - задаёт путь для статических (js, css) файлов в index.html.
baseHref - определяет base, используется в ссылках и маршрутизации (routing) Angular