Angular 8: Webpack - THREE.js loading twice

问题

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

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

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'

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

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

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

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

回答1:

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

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.

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

• Initialize a new angular project.

• 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.

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

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

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

来源：https://stackoverflow.com/questions/59295840/angular-8-webpack-three-js-loading-twice