Ionic集成Forge Viewer加载模型报错：Cannot read property 'id' of null

Hey there! Let’s break down this tricky Forge Viewer error you’re facing in your Ionic + TypeScript app. That PinchRecognizer error usually boils down to either DOM timing issues or unintended gesture library conflicts—even if you don’t think you added extra libraries, Ionic’s built-in tools might be causing the clash. Here’s what to check:

1. Make Sure Your Viewer Container is Fully Rendered #

Forge Viewer needs a solid DOM element to attach to, and Ionic’s Angular-based lifecycle can trip you up here. If you’re initializing the viewer in ngOnInit, the container element might not exist yet.

Instead, use ngAfterViewInit and grab the container with @ViewChild to guarantee it’s ready:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Autodesk } from '@types/forge-viewer';

@Component({
  selector: 'app-viewer',
  templateUrl: './viewer.component.html',
  styleUrls: ['./viewer.component.scss'],
})
export class ViewerComponent implements AfterViewInit {
  @ViewChild('viewerContainer') viewerContainer!: ElementRef;
  viewer: Autodesk.Viewing.GuiViewer3D | null = null;

  ngAfterViewInit(): void {
    // Double-check the container exists before proceeding
    if (!this.viewerContainer.nativeElement) return;

    Autodesk.Viewing.Initializer({ accessToken: 'YOUR_TOKEN' }, () => {
      this.viewer = new Autodesk.Viewing.GuiViewer3D(this.viewerContainer.nativeElement);
      // Try starting the viewer now that the DOM is ready
      const started = this.viewer.start();
      if (started) {
        // Load your model here
        this.viewer.loadModel('YOUR_MODEL_URN');
      }
    });
  }
}

And your template should have a dedicated container with explicit dimensions:

<div #viewerContainer style="width: 100%; height: 100vh;"></div>

2. Disable Ionic’s Built-in Gestures to Avoid Conflicts #

Ionic comes with its own gesture recognition system (via GestureController) that can clash with Forge Viewer’s PinchRecognizer. Even if you didn’t explicitly add gesture libraries, Ionic enables these by default.

Option A: Use the ion-no-mouse-pointer-events Directive #

Add this attribute to your viewer container to block Ionic from intercepting gestures:

<div #viewerContainer ion-no-mouse-pointer-events style="width: 100%; height: 100vh;"></div>

Option B: Programmatically Disable Pinch Gestures for the Container #

If you need more control, use Ionic’s GestureController to turn off pinch gestures specifically for the viewer area:

import { GestureController } from '@ionic/angular';

// Inject GestureController in your component constructor
constructor(private gestureCtrl: GestureController) {}

ngAfterViewInit(): void {
  // Disable pinch gestures on the viewer container
  const pinchGesture = this.gestureCtrl.create({
    el: this.viewerContainer.nativeElement,
    gestureName: 'pinch',
    priority: 100 // Ensure this takes precedence over default gestures
  });
  pinchGesture.enable(false);

  // Proceed with viewer initialization...
}

3. Verify Viewer Initialization Configuration #

Double-check that you’re passing valid options to the GuiViewer3D constructor. A missing or misconfigured option could cause unexpected errors in gesture handlers:

const viewerOptions = {
  // Optional: Temporarily disable pinch zoom to test if the error goes away
  disablePinchZoom: false,
  // Add other required options here
};
this.viewer = new Autodesk.Viewing.GuiViewer3D(this.viewerContainer.nativeElement, viewerOptions);

4. Confirm Forge Viewer Scripts Are Loaded Correctly #

Ensure you’ve added the Forge Viewer scripts and styles properly. If you’re using CDN links in index.html:

<!-- Add these in the <head> section -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>

If using the npm package, make sure you’ve added the scripts and styles to your angular.json config under architect.build.options.

Start with the DOM timing fix first—it’s the most common culprit here. If that doesn’t work, move on to disabling Ionic’s gestures.

内容的提问来源于stack exchange，提问作者msavage-grit