Angular中配置Autodesk Forge Viewer无显示问题求助

我正尝试按照Autodesk Forge Viewer V7官方文档在Angular中配置Viewer，但文档示例为JS和Node.js版本，配置完成后应用内无任何内容显示。以下是我的app.component代码及相关样式：

TypeScript代码 #

import { Component, OnInit } from '@angular/core';
export const ACCESS_TOKEN = "TOKEN_HERE";
export const DOCUMENT_URN = "*****";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
    private viewer!: Autodesk.Viewing.Viewer3D;
    async ngOnInit() {
      this.initViewer();

    }
    private async initViewer() {

      var options: any = {
        env: 'AutodeskProduction',
        api: 'derivativeV2', // 若模型上传至EMEA，将此选项改为'derivativeV2_EU'
        getAccessToken:(
          onGetAccessToken: (token: string, expire: number) => void
        ) => {

          fetch('******')
               .then((response) => response.json())
               .then((json) => {
                 console.log(json);
                     var authToken = json;
                     onGetAccessToken(json.access_token,
json.expires_in);
                 });


          const expireTimeSeconds = 60 * 30;
          onGetAccessToken(ACCESS_TOKEN, expireTimeSeconds);
        },
       };

      Autodesk.Viewing.Initializer(options, () => {

        let htmlDiv:any = document.getElementById('forgeViewer');
        let config3d = {
          extensions: [ "Autodesk.DocumentBrowser"],

          theme: "dark-theme"

        }

        this.viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, config3d);

        var startedCode = this.viewer.start();
        if (startedCode > 0) {
          console.error('Failed to create a Viewer: WebGL not supported.');
          return;
        }
        console.log('Initialization complete, loading a model next...');

      });
    }
  }

样式代码 #

body {
    margin: 0;
}
#forgeViewer {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #F0F8FF;
}

问题排查与修复方案 #

1. 缺少模型加载逻辑
   你的代码仅完成了Viewer初始化，但未加载指定的DOCUMENT_URN模型。在Initializer的回调函数末尾添加模型加载代码：

   const documentId = 'urn:' + DOCUMENT_URN;
   Autodesk.Viewing.Document.load(documentId, (doc) => {
     const viewables = doc.getRoot().getDefaultGeometry();
     this.viewer.loadDocumentNode(doc, viewables).then(() => {
       console.log('模型加载完成');
     }).catch(err => {
       console.error('模型加载失败:', err);
     });
   }, (err) => {
     console.error('文档加载失败:', err);
   });
   

2. AccessToken逻辑冲突
   getAccessToken中同时存在两种token获取逻辑（fetch接口+硬编码token），会导致回调被执行两次，引发异常。保留其中一种即可：

   • 若用接口获取token，删除onGetAccessToken(ACCESS_TOKEN, expireTimeSeconds);
   • 若用硬编码token，删除fetch相关代码块

3. 容器尺寸失效
   虽然设置了#forgeViewer的宽高为100%，但父元素（如app-root、html）可能未设置尺寸，导致容器高度为0。补充样式：

   html, body, app-root {
       width: 100%;
       height: 100%;
       overflow: hidden;
   }
   

4. DOM操作不符合Angular规范
   避免直接使用document.getElementById，改用Angular的ViewChild获取容器：

   • 模板中给容器添加标记：<div #forgeViewer></div>
   • 组件中引入并使用ViewChild：

     import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
     @ViewChild('forgeViewer') forgeViewer!: ElementRef;
     
     // 初始化时替换为：
     this.viewer = new Autodesk.Viewing.GuiViewer3D(this.forgeViewer.nativeElement, config3d);
     

5. 确认Viewer依赖引入
   确保在index.html中正确引入Forge Viewer的脚本和样式：

   <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
   <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css">
   

内容的提问来源于stack exchange，提问作者Guillermo Freites