deklarieren Variable werfen nicht definierte Ausnahme zur Laufzeit in Typoskript

Question

Ich entwickle eine Angular 2-Anwendung mit MDL (https://getmdl.io/components/#menus-section). Da bei Seite nach AJAX geladen wird, funktionieren Aufrufmenüs von MDL aufgrund der späten Injektion in DOM nicht. Ich habe etwas recherchiert und herausgefunden, dass ich

ausführen musste, nachdem AJAX-Aufruf beendet ist. Ich folgte Material Design Lite JS not applied to dynamically loaded html file SO Frage. Jetzt musste ich Js-Code von Ts-Code ausführen. Ich fand heraus, ich kann etwas tun, wie Angular 2 typescript invoke javascript function

Auszug von oben Frage SO:

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(); 
    } 
} 

ich den obigen Ansatz gefolgt und hat folgende:

export interface Mdl { 
    componentHandler: ComponentHandler; 
} 

export interface ComponentHandler { 
    upgradeAllRegistered : Function; 
} 

In Hauptkomponente:

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); 
      }); 
    } 
.... 

} 

Ausnahme zur Laufzeit:

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) 

Was mache ich falsch?

Answer 1

ReferenceError: mdl is not defined

wenn nichts mdl in Ihrem Modul zuweist, dann wird es nicht auf magische Weise arbeiten.

Mehr

declare var mdl: Mdl; 

ist falsch. Sie sollten eine tatsächliche Variable bekommen, nicht nur seine dort (magisch) deklarieren.