"has no exported member" Error in my MTL module

Question

:grinning: Anyone to help me with that ? I have a class MDL : MaterialDesignLiteUpgradeElements.ts

import {Directive, AfterViewInit} from 'angular2/core';
declare var componentHandler;
@Directive({
    selector: '[mdl]'
})
export class MDL implements AfterViewInit {
    ngAfterViewInit() {
        componentHandler.upgradeAllRegistered();
    }
}

And Following this stack post : Material Design Lite tooltips not working with Angular 2 I Added this :

 ngAfterViewInit() {
    componentHandler.upgradeDom();
  }

In the class managing the view using MTL But it say :

MaterialDesignLiteUpgradeElements has no exported member "componentHandler"

The console error :

EXCEPTION: TypeError: Cannot read property 'upgradeDom' of undefined

Any ideas ?

score 2 · Accepted Answer · edited May 23 '17 at 12:17

I am not into Angular2 but, I faced the same issue in ReactJS with Material Design Lite (MDL).

The reason why you are getting EXCEPTION: TypeError: Cannot read property 'upgradeDom' of undefined error is MDL does not export any module by default. You can follow the below suggestions to export the module.

Either you have to export componentHandler manually from material.js file & import/require in your Component file
Or, if you are using any bundler like Webpack, you can make use of exports-loader & then use import/require to export componentHandler

I have given a detailed description here SO/Material Design Lite with ReactJS (import/require Issue)

Hope it helps!

"has no exported member" Error in my MTL module

1 Answers1