Encountering an error while trying to build an Angular4 project in production with the following command:
node --max_old_space_size=8192 'node_modules/@angular/cli/bin/ng' build --prod --output-hashing=al
Error:
ERROR in vendor.422622daea37e6baf83f.bundle.js from UglifyJs Unexpected token: name (BoxGeometry) [vendor.422622daea37e6baf83f.bundle.js:84218,6]
Using the -sm flag provides more detail:
ERROR in vendor.422622daea37e6baf83f.bundle.js from UglifyJs Unexpected token: name (BoxGeometry)
[MYAPPPATH/node_modules/three/build/three.module.js:12832,0]
[vendor.422622daea37e6baf83f.bundle.js:84218,6]
The line causing the issue in three.module.js:12832 is:
class BoxGeometry extends Geometry {
...followed by a small class definition.
Building without the --prod flag works as expected, just like using ng serve.
The problem may be due to ES6 code in the ThreeJS plugin JS not being transpiled to ES5. I attempted adding "allowJs": true, to tsconfig.json which removed the error, but led to duplicate identifier errors in the tether plugin instead. It seems this is not the ideal solution anyway.
Playing around with the TS target version in tsconfig eliminates the error but introduces other errors.
There are no import statements in app.module.ts. Instead, I am importing into the component that contains the ThreeJS code using:
import * as THREE from 'three';
Here is the content of package.json:
{
"name": "main-app",
"version": "0.0.0",
...
Reviewing the webpack entry in package-lock.json:
"webpack": {
...
Check out my tsconfig.json configuration:
{
"compileOnSave": false,
...
What should be my next course of action?