bug: angular, menu button is disabled when routing back to a page with ssr

[djabif]

Bug Report

Ionic version:
@ionic/angular 5.x

Current behavior:

When running the app with SSR, the Ion Menu doesn't work as expected if it's disabled and enabled.

I have a page where I disable the menu with:

ionViewDidEnter(): void {
    this.menu.enable(false);
  }

Then if I navigate to other page, where I re enable the menu, in SSR it doesn't work.
Please see the following videos.
Without SSR it works as expected.

With SSR: https://drive.google.com/file/d/1A67O9U7cCu7Yf-vr1xyJ76LhfkjS2BGH/view?usp=sharing

Without SSR (works as expected): https://drive.google.com/file/d/1Mu6AfyDwLkrUArCEHMoZF8vDCKdSK2Al/view?usp=sharing

Expected behavior:

Ion Menu can be enabled and disabled as desired.

Steps to reproduce:

Please run this repo with SSR (npm run dev:ssr) and try to reproduce what I do on the videos.

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (/Users/dayana/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.4
   @angular-devkit/build-angular : 0.1001.3
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.1.3
   @ionic/angular-toolkit        : 2.3.3

Utility:

   cordova-res (update available: 0.15.1) : 0.9.0
   native-run (update available: 1.2.1)   : 0.3.0

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[Cafnio]

Also having the same issue on Web.

    "@ionic/angular": "5.4.1",
    "@ionic/angular-server": "^5.4.1",
    "@ionic/angular-toolkit": "^2.3.0",

[blahblehblah]

Having same issue +1

"@ionic/angular": "^5.5.4",
"@ionic/angular-server": "^5.5.4",
"@ionic/angular-toolkit": "^2.3.3",

[ishan123456789]

Same for me I get this error:

(node:5247) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at waitUntilReady (myApp/dist/app/server/main.js:1:531889)

Which leads to this line:

waitUntilReady=()=>Promise.all(Array.from(document.querySelectorAll("ion-menu")).map(menu=>new Promise(resolve=>Object

And my dependencies:

{
    "@angular/animations": "^11.2.6",
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/platform-server": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@angular/service-worker": "~11.2.0",
    "@ionic-native/core": "^5.31.1",
    "@ionic-native/splash-screen": "^5.31.1",
    "@ionic-native/status-bar": "^5.31.1",
    "@ionic/angular": "^5.5.2",
    "@ionic/angular-server": "^5.7.0-dev.202103161804.69a9f95",
    "@nguniversal/express-engine": "^11.2.1",
    "compression": "^1.7.4",
    "express": "^4.15.2",
    "helmet": "^4.4.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  }

I had to add document existence check at the place where menu was being called to fix this

ngOnInit() {
    if(typeof document !== "undefined") {
      this.menu.enable(false);
    }
  }
  ngOnDestroy() {
    if(typeof document !== "undefined") {
      this.menu.enable(false);
    }
  }

Similarly, I also had to add a similar check to toastController, loadingController to avoid them being called as they are using document.

[ishan123456789]

Linked to #21918

[rthm93]

In my case ion-menu is not working at all, I have created a repo to demonstrate it

[sean-perkins]

Hello everyone 👋

I realize this is an older issue, but if anyone would like to test with this dev-build and let me know if they experience any issues - I would appreciate it!

npm install @ionic/angular@7.1.4-dev.11689625795.1d16532b @ionic/angular-server@7.1.4-dev.11689625795.1d16532b