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

Question

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?

I guess above code is in a different module than where you added `MdlModule` to `imports: [...]`. You need to add the module to imports in any module where you are using MDL directives. — Günter Zöchbauer, Sep 06 '17 at 11:24
I'm importing `MdlModule` on `app.module.ts`, thus is available to that component. Honestly I have no idea of where and what I should import such directives. — AndreaM16, Sep 06 '17 at 11:59
Yes, I have a `pages.module.ts` where I import all the components I need. I tried to import `MdlModule` there and now everything works. Thanks for the hint, I also got it from [this answer](https://stackoverflow.com/questions/39159792/angular2-app-module-with-root-level-imports/39186107#39186107). I edited my question to highlight that. If you want to post the answer you are welcome. — AndreaM16, Sep 06 '17 at 12:30

score 1 · Accepted Answer · edited Sep 06 '17 at 12:46

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.

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

1 Answers1