How to import a third-party library supplied via CDN into Angular / Typescript using Angular -CLI without using declare var?

Question

I am using Angular -CLI (Angular 4, Typescript, Webpack) to create an Excel add-in using Office-js. The add-in works fine, but due to the fact that Microsoft is moving to the need to receive Office-js via CDN, it is difficult for me to understand how to import Excel into the application.

The Excel object is loaded into the global namespace, and I can access it with declare var Excel: any. Unfortunately, this method resets my autocomplete. Other third-party libraries allow things like import * as _ from 'lodash', but I don’t know how to follow this pattern when a file is delivered via CDN using the script tag in index.html.

I have npm @ types / office-js installed, and when I uninstall declare var Excel: any;My editor autofills creatures to work as expected. Unfortunately, the typescript compiler is not compiling at the moment. If I explicitly include /// <reference types="office-js"/>at the beginning of the file, everything works as expected, but I feel like this is a clumsy solution.

How to import Excel using import { Excel } from '@microsoft/office-js'or syntax import * as Excel from 'office-js'?

Answer 1

I don’t know if I had the same problem that I had with iziToast (which does not have built-in Angular support), but I hope it helps you. In this way,

instead of importing lib as' import * like iziToast from 'iziToast', I did this:

import { Injectable } from '@angular/core'

let iziToast = require('assets/js/iziToast.min.js')

@Injectable()
export class NotificationService {
  sucess(message?: string) {
    iziToast.success(......)
  }
}