Angular中创建Autodesk Forge Viewer扩展遇Autodesk未定义运行时错误

问题分析 #

你遇到的问题核心有两个：

1. 运行时Autodesk未定义：@types/forge-viewer只是给TypeScript提供类型提示，并没有包含实际的Viewer运行时代码，所以浏览器执行你的扩展代码时，全局的Autodesk对象还不存在。
2. 继承Extension的编译/运行问题：虽然安装了类型定义，但如果Viewer脚本没有在编译/运行时被正确加载，不仅TypeScript的类型检查可能出现隐性问题，运行时也无法找到Autodesk.Viewing.Extension这个基类。

解决方案步骤 #

1. 确保Forge Viewer运行时脚本已加载

你需要把Forge Viewer的CDN脚本添加到Angular项目中，推荐两种方式：

• 方式一：在index.html中异步加载
  在<body>末尾添加Viewer脚本，通过onload事件确保脚本加载完成后再执行后续逻辑：

  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js" async onload="window.viewerLoaded = true"></script>
  

  然后在Angular组件中监听这个全局状态，等待Viewer加载完成后再初始化。

• 方式二：在angular.json中配置同步脚本
  在architect -> build -> options -> scripts数组中添加Viewer的CDN链接，Angular会在打包时把脚本注入到页面：

  "scripts": [
    "https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"
  ]
  

  注意这种方式是同步加载，可能会影响页面初始加载速度。

2. 调整扩展类的写法，兼容Angular模块环境

修改扩展代码，用declare告诉TypeScript全局存在Autodesk对象，同时确保类型正确：

// 声明全局Autodesk对象，让TypeScript识别其类型
import type { Extension } from '@types/forge-viewer';
declare const Autodesk: {
  Viewing: {
    Extension: typeof Extension;
  };
};

export class MyExtension extends Autodesk.Viewing.Extension { 
  public static extensionName: string = 'MyExtension'; 

  public load() { 
    console.log('MyExtension loaded!'); 
    return true; 
  } 

  public unload() { 
    console.log('MyExtension unloaded.'); 
    return true; 
  } 
}

3. 正确注册扩展的时机

在Angular组件中，必须等待Viewer初始化完成后再注册扩展，比如在Autodesk.Viewing.Initializer的回调里执行：

import { Component, OnInit } from '@angular/core';
import { MyExtension } from './my-extension';

@Component({
  selector: 'app-viewer',
  templateUrl: './viewer.component.html',
  styleUrls: ['./viewer.component.css']
})
export class ViewerComponent implements OnInit {
  ngOnInit(): void {
    // 初始化Viewer环境
    Autodesk.Viewing.Initializer({ accessToken: '你的访问令牌' }, () => {
      // 创建Viewer实例
      const viewerContainer = document.getElementById('viewer-container');
      if (!viewerContainer) return;
      const viewer = new Autodesk.Viewing.GuiViewer3D(viewerContainer);
      viewer.start();

      // 注册并加载你的扩展
      Autodesk.Viewing.theExtensionManager.registerExtension(MyExtension.extensionName, MyExtension);
      viewer.loadExtension(MyExtension.extensionName);
    });
  }
}

4. 验证TypeScript配置

确保tsconfig.json中包含forge-viewer的类型，避免类型检查报错：

{
  "compilerOptions": {
    "types": ["forge-viewer"]
  }
}

关键注意点 #

• 永远不要依赖@types/forge-viewer提供运行时代码，它仅用于类型提示。
• 必须保证Viewer脚本在你的扩展代码执行前加载完成，否则必然出现Autodesk is not defined错误。
• 在Angular中，避免在模块或类的顶层直接引用全局对象，最好在组件生命周期钩子（如ngOnInit）中等待Viewer加载完成后再操作。

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