How to import 3rd party js libraries into angular with the aot compiler

Question

I am currently using an opaque token. I first define an opaque token in the common section of the project as follows:

import { InjectionToken } from '@angular/core';
export let JQ_TOKEN = new InjectionToken<any>('jQuery');

I then import this as follows into the :

import { JQ_TOKEN } from './common/index'; // (I'm using barrels for this import)

// I then define jquery to be the $ window object:

let jQuery: Object = window['$'];

// and then in the app providers, I have the following:

{ provide: JQ_TOKEN, useValue: jQuery },

// Then, I import the token into the component:

import { JQ_TOKEN } from '../jQuery.service';

// and inject it as follows

constructor(@Inject(JQ_TOKEN) private $: any) {}

This has allowed me to define interfaces with intellisense, for example:

import { OpaqueToken } from '@angular/core';

export let TOASTR_TOKEN = new InjectionToken('toastr');

export interface Toastr {
  success (msg: string, title?: string): void;
  info (msg: string, title?: string): void;
  warning (msg: string, title?: string): void;
  error (msg: string, title?: string): void;
}

The above solution works really well, except when I want to do a production build with aot. Is there a way around this? That is, the following works:

ng build --prod --aot false

but this has runtime errors:

ng build --prod

I am using angular 4.3.4 with 1.2.8 of the cli.

I'm aware that I could probably use a plugin, but I would rather not do this, because it will mean a lot of changes to the project and may have it's own errors. I looked into the toastr plugin for angular and found that it kept vanishing when a page navigation was called, despite it being called after the page navigation. The same problem does not occur, if I use an OpaqueToken.

How to import 3rd party js libraries into angular with the aot compiler

0 Answers0