Components: md-menu template parsing fail while unit testing

[pmizio]

Hi I get following errors when run unit tests over my app.

Failed: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "mdMenu" ("
more_vert

]#menu="mdMenu">

html@16:15
Error: Template parse errors:
There is no directive with "exportAs" set to "mdMenu" ("
more_vert

]#menu="mdMenu">

@16:15
at syntaxError (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:70128:34) [ProxyZone]
at TemplateParser.Array.concat.TemplateParser.parse (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:80137:19) [ProxyZone]
at JitCompiler.Array.concat.JitCompiler._compileTemplate (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:93855:39) [ProxyZone]
at http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:93779:62 [ProxyZone]
at Set.forEach (native) [ProxyZone]
at JitCompiler.Array.concat.JitCompiler._compileComponents (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:93779:19) [ProxyZone]
at createResult (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:93685:19) [ProxyZone]
at AsyncTestZoneSpec.Array.concat.AsyncTestZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:109785:39) [ProxyZone]
at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?8d1ba52812650382cd7f0349bc1feca9cb737803:110473:39) [ProxyZone]
at Zone.run (http://localhost:9876/base/src/polyfills.ts?6dd69ab1084abad31e0abe73491868deaff381a9:1280:43) [ProxyZone => ProxyZone]
at http://localhost:9876/base/src/polyfills.ts?6dd69ab1084abad31e0abe73491868deaff381a9:1915:57 [ProxyZone]

Angular: 4.0.1
Angular Material: 2.0.0-beta.3
OS: Win7 x64
Browser: latest stable Chrome

[crisbeto]

Can you post the unit test? This seems like you might have a syntax error in your own code.

[pmizio]

It fail in - on create test so if it is syntax error something must change in beta3 cause before my test passing without any problems.

My menu which I'm creating:

      <button md-icon-button [mdMenuTriggerFor]="menu">
        <md-icon>more_vert</md-icon>
      </button>
      <md-menu #menu="mdMenu">
        <button id="edit" md-menu-item routerLink="edit/{{user.id}}">
          <md-icon>edit</md-icon>
          <span>Edit</span>
        </button>
        <button id="account" md-menu-item routerLink="/accounts/{{user.id}}">
          <md-icon>account_balance_wallet</md-icon>
          <span>Account</span>
        </button>
      </md-menu>

Failing unit test(btw it's from parent component):

  it('should create', () => {
    expect(component).toBeTruthy();
  });

In regards thanks for help!

[crisbeto]

The menu hasn't really changed in beta 3. My guess is that it might be down to the update to Angular 4. I tried out your template and it seems fine, though.

Another cause could be that you haven't imported the MdMenuModule into your test module.

[jelbourn]

Closing this since we can't reproduce it; feel free to re-open if you have more information.

[tmburnell]

@jelbourn, I want to confirm:
should imports be done like this:

import { MaterialModule} from '@angular/material';

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
        MaterialModule
    ]
  })
}));

or do all components need to be imported like this:

import { MdProgressSpinnerModule} from '@angular/material';

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
        MdProgressSpinnerModule
    ]
  })
}));

Either case all my test seem to fail when they use material components.

[Splaktar]

@tmburnell the second option.

[danieldflrss]

Hi I get following error
There is no directive with "exportAs" set to "mdMenu"
2.0.0-beta.11

[raghavendar-ts]

@danieldflrss updating the angular version to 4.4.3 solved the issue for me.

[danieldflrss]

tanks @raghavendar-ts

[sdanieru]

@raghavendar-ts which angular package did you update to 4.4.3? angular/core, angular/common, or?

[Stelyus]

@sdanieru npm update -D && npm update -S solve my problems

[raghavendar-ts]

I updated the following angular modules to 4.4.3 which solved the issue.

"@angular/animations": "4.4.3",
"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"@angular/router": "4.4.3",
"@angular/upgrade": "4.4.3"

Checkout the change log
https://github.com/angular/material2/blob/master/CHANGELOG.md

• Angular Material now requires Angular 4.4.3 or greater

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
Virus-free.
www.avast.com
https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On Thu, Sep 28, 2017 at 8:48 PM, Franck [e-mail] wrote:

@sdanieru https://github.com/sdanieru npm update -D && npm update -S
solve my problems

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/4050#issuecomment-332869906,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE3YQxF4a09eQwZ0WIW5RXn4yrzdvizjks5sm7jbgaJpZM4M7Jc5
.

--
Raghavendar T S
www.teknosrc.com

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}