Angular 8:Webpack-THREE.js加载两次 [英] Angular 8: Webpack - THREE.js loading twice

问题描述

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

I'm creating a web app using Angular which integrates the Autodesk forge viewer javscript library.

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

The forge viewer.js library is included in the forge viewer.js itself, which is a customized version of the THREE.js release r71.

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

Because of this, I am seeing some unexpected results in my app:

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

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

From a bit of research, this is because THREE.js is being loaded twice into my app. I've tried uninstalling three.js from node_modules, but this causes build errors:

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

This error is removed when i exclude THREE.js in tsconfig.json, but I'm still seeing unexpected results.

很明显，React应用程序中的一个修复方法是在使用webpack时在外部提到THREE.js:

Apparently a fix in a React app is to mention THREE.js in externals when using webpack:

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

但是angular不包含webpack.config.js.我该如何排除THREE.js?

But angular doesn't include webpack.config.js. How would I go about excluding THREE.js?

推荐答案

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

I cant reproduce your error since im not sure how you are importing the forge-viewer script.

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

By default the forge-viewer script is imported via a script tag in you head tag in index.html, this links to an autodesk cdn. This should not prompt any node modules to be installed into your angular project. You however do need to install the the forge-viewer typings.This will give you typed definitions for the forge-viewer functions.

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

I would just do a clean ng new and add scripts and packages accordingly:

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

• Initialize a new angular project.

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

Add the viewer script and css to your index.html inside your angular project. This will prompt the scripts to be loaded as soon as possible when running the project.

安装伪造查看器键入，这些类型还要包括three.js类型.

Install the forge-viewer typings, these typings include the three.js typings aswell.

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

Add "types": ["forge-viewer"] to your tsconfig.app.json under compilerOptions to solve initial compiler errors.

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

Alternatively you could try and remove all forge-viewer related packages from your current project and do step 2 to 4 as described above.

这篇关于Angular 8:Webpack-THREE.js加载两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！