@ionic/angular MenuController can't open menu in my Angular app.

[everythingbytesnz]

Stencil version:

 @stencil/core@2.4.0

I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
@ionic/angular MenuController commands can't find any ionic menu programmatically when I add defineCustomElements(); to my main.ts.

The menu can be opened if I add an ion-menu-button element to the UI. https://ionicframework.com/docs/api/menu-button.

I didn't use this solution because we have 3 menus and we have a lot of code to programmatically hide and show them using menuController.open() menuController.close() etc.

Expected behavior:
MenuController should be able to open a ion-menu component in my angular app with this.menuController.open().

Steps to reproduce:

1. Add stencil web components to Angular project
2. Modify project according to the Angular guide: https://stenciljs.com/docs/angular
3. Add ion-menu to angular component
4. Run this code inside the angular component: menuController.open();
5. The menu doesn't open (unless you comment out defineCustomElements() from main.ts)
6. Run this code inside the angular component: this._menuCtrl.getMenus().then(menus => console.log('menus found', menus));
7. Empty array appears in the console: 'menus found', []

Related code:

app.component.html

<ion-app>
  <ion-router-outlet id="main"></ion-router-outlet>
  <ion-button color="primary" fill="clear" (click)="openMenu()">Click to open</ion-button>
  <ion-menu contentId="main">
    Menu open
  </ion-menu>
</ion-app>

app.component.ts

import { Component } from '@angular/core';
import { MenuController } from "@ionic/angular";

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(private _menuCtrl: MenuController) {}

  async openMenu() {
    this._menuCtrl.getMenus().then(menus => console.log(menus));
    await this._menuCtrl.open();
  }
}

This code should return an array of ionic menu elements but instead returns an empty array.

this._menuCtrl.getMenus().then(menus => console.log('menus found', menus));

This code should open a menu but it doesn't, there is no change to the UI.

this._menuCtrl.open();

[rwaskiewicz]

Hey @everythingbytesnz 👋

Can you please create a minimal reproduction repo in GitHub and post it in the issue summary? There's a lot of variables in play here, and a minimal reproduction helps us confirm things like your stencil compiler settings, library version(s), etc. Thanks!

[everythingbytesnz]

@rwaskiewicz

https://github.com/everythingbytesnz/stencil-ionic-menu-bug

[rwaskiewicz]

Thanks!

[everythingbytesnz]

@rwaskiewicz Hi was the issue able to reproduced using my example, please?

[rwaskiewicz]

Hey @everythingbytesnz, I was able to reproduce your issue, but haven't had a moment to dig deep into the root cause. If your implementation is similar in nature to the reproduction, I can offer you a workaround for the time being - in your defineCustomElements call in your Angular application, wrapping the call in setTimeout seems to work for now:

// https://github.com/everythingbytesnz/stencil-ionic-menu-bug/blob/master/angular-app/src/main.ts#L20
- defneCustomElements();
+ setTimeout(() => defineCustomElements(), 0);

some folks are working on the docs around Angular integration as we speak, so we hope to identify some of these rough edges a bit better in the very near future and get them on our roadmap to both improve the docs and root cause issues like this.