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:对象不是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:

错误:ENOENT:没有那个文件或目录，打开'C:Usersusernamesource eposTestingappnameappname-SPA ode_modules hreeuild hree.min.js'

Error: ENOENT: no such file or directory, open 'C:Usersusernamesource eposTestingappnameappname-SPA ode_modules hreeuild hree.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 时在 externals 中提及 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 标签中的脚本标签导入的，这链接到一个 autodesk cdn.这不应提示将任何节点模块安装到您的 angular 项目中.但是，您确实需要安装 forge-viewer typings.这将为您提供伪造查看器功能的类型化定义.

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:

• 初始化一个新的 Angular 项目.

• Initialize a new angular project.

将查看器脚本和 css 添加到 angular 项目中的 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.

安装forge-viewer typings，这些typings还包括三个.js 类型.

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

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

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屋！