declare variable throwing not defined exception at runtime in typescript

Question

I am developing an Angular 2 application using MDL ( https://getmdl.io/components/#menus-section ). Since by page is loaded at after AJAX call menus of MDL are not working because of late injection in DOM. I did some research and found out that I had to execute

if(!(typeof(componentHandler) == 'undefined')){
      componentHandler.upgradeAllRegistered();
  }

after AJAX call is finished. I was following Material Design Lite JS not applied to dynamically loaded html file SO question. Now I had to execute js code from ts code. I found out I can do something like Angular 2 typescript invoke javascript function

excerpt from above SO question:

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

interface MYTHEME {
    documentOnLoad: INIT;
    documentOnReady: INIT;
}
interface INIT {
    init: Function;
}
declare var MYTHEME: MYTHEME;

export class AppComponent implements AfterViewInit {

    constructor() {
    }

    ngAfterViewInit() {
        MYTHEME.documentOnLoad.init(); 
        MYTHEME.documentOnReady.init();
    }
}

I followed the above approach and did following:

export interface  Mdl {
    componentHandler: ComponentHandler;
}

export interface ComponentHandler {
    upgradeAllRegistered : Function;
}

In main component:

import { Mdl, ComponentHandler } from '../../external-declaration/mdl-component-handler';
declare var mdl: Mdl; 

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    providers: [ReleaseService]
})
export class HomeComponent implements OnInit {

....

 getLatestReleaseList(): void {

        this.releaseService.getLatestReleaseList()
            .subscribe(release => {

                var releaseGrp: Map<string, Release[]> = this.groupBy(release, function (r: Release): string {
                    return r.codeFamily;
                });

                this.releaseVm = this.getReleaseList(releaseGrp);
                mdl.componentHandler.upgradeAllRegistered(); <- this line compiles but throws exception at runtime.
            },
            err => {
                console.log(err);
            });
    }
....

}

Exception at runtime :

vendor.js:68951 ReferenceError: mdl is not defined
    at SafeSubscriber._next (http://localhost:2362/dist/0.6b937031dbb59a007082.hot-update.js:41:13)
    at SafeSubscriber.__tryOrUnsub (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11432:16)
    at SafeSubscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11381:22)
    at Subscriber._next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11323:26)
    at Subscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11287:18)
    at CatchSubscriber.Subscriber._next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11323:26)
    at CatchSubscriber.Subscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11287:18)
    at MapSubscriber._next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:36945:26)
    at MapSubscriber.Subscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11287:18)
    at XMLHttpRequest.onLoad (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:71668:38)
    at ZoneDelegate.invokeTask (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:56992:31)

What am I doing wrong?

That's what the error says. `mdl` variable is not defined. What did make you think that it can be used as a global? — Estus Flask, Mar 20 '17 at 14:58

score 0 · Answer 1 · answered Mar 20 '17 at 23:19

0

ReferenceError: mdl is not defined

if nothing assigns to mdl in your module, then it will not magically work.

More

declare var mdl: Mdl;

is wrong. You should get an actual variable not just declare its there (magically).

answered Mar 20 '17 at 23:19

basarat

261,912
58
460
511

declare variable throwing not defined exception at runtime in typescript

1 Answers1

More