Search code examples
angulartypescriptpugmaterial-design-liteangular2-mdl

Template parse errors: There is no directive with "exportAs" set to "mdlButton"

I'm building an application using angular2-mdl. Everything works just fine except that all animations won't work.

After looking the documentation available at the following link, I noticed that, for instance, if I want to toggle a specific menu after a click on a button I have to use a syntax like the following:

<button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button>
<mdl-menu #m1="mdlMenu" mdl-menu-position="bottom-left">
   <mdl-menu-item mdl-ripple (click)="action()">Some Action</mdl-menu-item>
   <mdl-menu-item mdl-ripple mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
   <mdl-menu-item mdl-ripple disabled>Disabled Action</mdl-menu-item>
   <mdl-menu-item>Yet Another Action</mdl-menu-item>
</mdl-menu>

Menu's documentation is available here.

Unfortunately, when I try to replicate the same behavior with the following code:

button(mdl-button, mdl-button-type='icon', '#morebtn'="mdlButton" '(click)'="moremenu.toggle($event, morebtn)")
    mdl-icon more_vert
mdl-menu(mdl-menu-position='bottom-right', '#moremenu'="mdlMenu")
    mdl-menu-item About
    mdl-menu-item Contact
    mdl-menu-item Legal Information

That gets compiled to:

<button mdl-button="mdl-button" mdl-button-type="icon" #morebtn="mdlButton" (click)="moremenu.toggle($event, morebtn)">
    <mdl-icon>more_vert</mdl-icon>
</button>
<mdl-menu mdl-menu-position="bottom-right" #moremenu="mdlMenu">
    <mdl-menu-item>About</mdl-menu-item>
    <mdl-menu-item>Contact</mdl-menu-item>
    <mdl-menu-item>Legal Information</mdl-menu-item>
</mdl-menu>

I get the error I mentioned in the title. A full error trace is available at the following pasted.co log.

I experienced a similar issue in past with ngForm using #f="ngForm" and I solved by importing import { NgForm } from '@angular/forms'; on the component that threw that error.

So I've been scratching my head for a while trying to import mdlButton and mdlMenu like

import { MdlButtonComponent } from '@angular-mdl/core/components/button/mdl-button.component';
import { MdlMenuComponent } from '@angular-mdl/core/components/menu/mdl-menu.component';

But the error persists.

I have two modules:

  • app.module.ts : where I import MdlModule to make it available to the whole application
  • pages.module.ts : where I import all the components needed in pages

Why am I getting this even though I'm following the documentation? How can I fix this?

Solution

  • Directives, components, and pipes from one module, used in another module must be added to imports (@NgModule({ imports: [MdlModule], ...})) of every module where they are used.
    Adding it to imports of AppModule doesn't make them globally available.

    So, you'll have to remove MdlModule import from app.module.ts and import it into pages.module.ts.

    Here's a related answer as you mentioned and here's a related issue on angular/material2.