Angular Universal环境下Ion-Menu不可见及报错问题求助

问题根源 #

SSR服务端渲染阶段无真实DOM环境，Ionic Menu组件初始化时无法找到绑定的content元素，导致拖拽事件监听绑定失败，进而引发菜单不可见；客户端渲染时DOM已完全加载，因此功能正常。

具体解决方法 #

1. 延迟菜单初始化至客户端 #

利用Angular的PLATFORM_ID判断运行环境，仅在浏览器端初始化菜单：

import { Component, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  constructor(
    private menuCtrl: MenuController,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.menuCtrl.enable(true, 'main-menu');
    }
  }
}

2. 调整模板渲染顺序 #

确保绑定的ion-content在ion-menu之前渲染，让服务端渲染时先生成content元素：

<!-- 先渲染content元素 -->
<ion-content id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button menu="main-menu"></ion-menu-button>
      </ion-buttons>
      <ion-title>首页</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

<!-- 后渲染菜单 -->
<ion-menu contentId="main-content" menuId="main-menu">
  <ion-header>
    <ion-toolbar>
      <ion-title>菜单</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="false" *ngFor="let page of appPages">
        <ion-item [routerLink]="[page.url]">
          <ion-icon slot="start" [name]="page.icon"></ion-icon>
          <ion-label>{{ page.title }}</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

3. 用Ionic页面生命周期钩子处理 #

若菜单在页面组件内，使用ionViewDidEnter钩子确保页面进入且在客户端时再操作菜单：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(
    private menuCtrl: MenuController,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ionViewDidEnter() {
    if (isPlatformBrowser(this.platformId)) {
      this.menuCtrl.open('main-menu');
    }
  }
}

4. 检查SSR配置正确性 #

确保app.module.ts中BrowserModule的服务端过渡配置正常：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

验证方法 #

重启SSR服务，查看服务端渲染的页面源码确认#main-content元素存在，客户端加载后点击菜单按钮验证菜单是否正常显示。

内容的提问来源于stack exchange，提问作者Alvin Stefanus