Angular 8: Webpack - THREE.js 加载两次

Question

我正在使用 Angular 创建一个 Web 应用程序，它集成了 Autodesk forge 查看器 javscript 库。

forge viewer.js 库包含在 forge viewer.js 本身中，它是 THREE.js 版本 r71 的自定义版本。

因此，我在我的应用程序中看到了一些意外结果：

THREE.Object3D.add: object not an instance of THREE.Object3D

根据一些研究，这是因为 THREE.js 被加载到我的应用程序中两次。我尝试从 node_modules 中卸载 three.js，但这会导致构建错误：

Error: ENOENT: no such file or directory, open 'C:\Users\username\source\repos\Testing\appname\appname-SPA\node_modules\three\build\three.min.js'

当我在 tsconfig.json 中排除 THREE.js 时，此错误已消除，但我仍然看到意外结果。

显然，React 应用程序中的一个修复是在使用 webpack 时在外部提及 THREE.js：

const config = {
    …
    externals: {
        three: 'THREE'
    },

但是 angular 不包括 webpack.config.js。我将如何排除 THREE.js?

Answer 1

我无法重现您的错误，因为我不确定您是如何导入 forge-viewer 脚本的。

默认情况下，forge-viewer 脚本是通过 index.html 中 head 标签中的脚本标签导入的，这链接到 autodesk cdn。这不应提示将任何节点模块安装到您的 angular 项目中。但是，您确实需要安装 forge-viewer typings。这将为您提供 forge-viewer 功能的类型化定义。

我会做一个干净的 ng new 并相应地添加脚本和包：

初始化一个新的angular项目。
将查看器脚本和 css 添加到 angular 项目中的 index.html。这样会在运行工程
安装 forge-viewer typings，这些打字也包括 three.js 打字。
将 "types": ["forge-viewer"] 添加到 compilerOptions 下的 tsconfig.app.json 以解决初始编译器错误。

或者，您可以尝试从当前项目中删除所有与 forge-viewer 相关的包，然后执行上述步骤 2 到 4。

Angular 8: Webpack - THREE.js 加载两次

Angular 8: Webpack - THREE.js loading twice

angular

typescript

webpack

autodesk-forge

autodesk-viewer