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时，此错误已消除，但我仍然看到意外的结果。

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

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

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

Answer 1

由于无法确定您如何导入forge-viewer脚本，因此无法重现您的错误。

默认情况下，forge-viewer脚本是通过index.html中head标签中的script标签导入的，该链接链接到Autodesk CDN。这不应提示将任何节点模块安装到您的角度项目中。但是，您确实需要安装forge-viewer typings。这将为您提供forge-viewer函数的键入的定义。

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

• 初始化一个新的角度项目。

• 将查看器脚本和CSS添加到您的角度项目中的index.html中。这将提示在运行项目时尽快加载脚本。

• 安装forge-viewer typings，这些类型也包括three.js类型。

• 将"types": ["forge-viewer"]添加到tsconfig.app.json下的compilerOptions中以解决初始编译器错误。

或者，您可以尝试从当前项目中删除所有与Forge-viewer相关的软件包，并如上所述执行步骤2至4。

Answer 2

提及要在配置文件中外部加载的三个js，如下所示：

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

参考：https://forge.autodesk.com/blog/webpack-and-threejs-forge-applications