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