3rd party library (declare var XYZ: any) + lazy loading = ERROR


#1

Im transitioned to Ionic 3.1.1 and converted my component to a lazy loaded component. Im using 3rd party JS library - Google Places API for which I need to have google variable declared like this.

declare var google: any;  <-- Throws run-time error when component is lazy loaded

@IonicPage()
@Component({
  selector: 'page-user-profile-page',
  templateUrl: 'user-profile-page.html',
})
export class UserProfilePage implements OnInit, AfterViewInit{

The above code works fine for a regular component but if it is lazy loaded, I get following run-time error:

ERROR ReferenceError: google is not defined
    at UserProfilePage.webpackJsonp.326.UserProfilePage.ionViewWillEnter (user-profile-page.ts:55)
    at ModalImpl.ViewController._lifecycle (view-controller.js:564)
    at ModalImpl.ViewController._willEnter (view-controller.js:452)
    at OverlayPortal.NavControllerBase._willEnter (nav-controller-base.js:960)
    at nav-controller-base.js:825
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:4125)
    at t.invoke (polyfills.js:3)
    at n.run (polyfills.js:3)
    at NgZone.run (core.es5.js:3994)
    at OverlayPortal.NavControllerBase._viewsWillLifecycles (nav-controller-base.js:822)
    at ModalMDSlideIn.Animation._fireBeforeReadFunc (animation.js:825)
    at ModalMDSlideIn.Animation._beforeAnimation (animation.js:752)
    at ModalMDSlideIn.Animation._playDomInspect (animation.js:418)

How do I solve this? I tried to add the google variable to declarations.d.ts file but that didnt solve the issue either.

Thanks in advance.


#2

Perhaps related to app-scripts #936.


#3

Just tried disabling ionic_manual_treeshaking – didnt work :frowning:


#4

Figured it out, kinda silly - I had missed adding imports to index.html :tired_face: