Angular4 project and seeing the following error on prod build using 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]
Running with -sm
flag gives 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 three.module.js:12832 line is:
class BoxGeometry extends Geometry {
…and then a small class definition.
Build without --prod
flag works fine as you would imagine, as does ng serve
.
I believe this may be caused by ES6 code in the ThreeJS plugin JS not being transpiled to ES5, but I am not sure how to resolve it. I tried adding "allowJs": true,
to tsconfig.json and that got rid of the error, but caused duplicate identifier errors in the tether plugin instead and from what I read that’s not an ideal solution anyway.
Playing with the TS target version in tsconfig seems to get rid of the error, but again causes other errors.
I don’t have an import statement in app.module.ts. I am importing into the component that contains the ThreeJS code with the following:
import * as THREE from 'three';
package.json:
{
"name": "main-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^0.1.0",
"@nicky-lenaers/ngx-scroll-to": "^0.6.1",
"@types/three": "^0.103.2",
"angular-moment": "^1.2.0",
"angular2-cookie-law": "^1.4.0",
"angular2-ladda": "^1.2.2",
"angularfire2": "^5.0.0-rc.3",
"aos": "^2.2.0",
"chart.js": "^2.7.2",
"core-js": "^2.4.1",
"firebase": "^4.6.0",
"gsap": "^2.1.3",
"mobile-drag-drop": "^2.3.0-rc.1",
"moment": "^2.19.4",
"ng2-charts": "^1.6.0",
"ng2-dnd": "^4.2.0",
"ng2-img-cropper": "^0.9.0",
"ngx-clipboard": "^9.0.0",
"ngx-quill": "^1.6.0",
"rxjs": "^5.4.2",
"three": "^0.110.0",
"three-dragcontrols": "^0.88.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.9",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.0",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
}
}
package-lock.json webpack entry:
"webpack": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-3.7.1.tgz",
"integrity": "sha512-8MR+gVfxsvtx4J1UlbRGkUJEpDQUBFmisRmpPO5cVLgF21R8UMChX39OOjDz63a+m/iswGoqATszdZB2VCsYuA==",
"dev": true,
"requires": {
"acorn": "^5.0.0",
"acorn-dynamic-import": "^2.0.0",
"ajv": "^5.1.5",
"ajv-keywords": "^2.0.0",
"async": "^2.1.2",
"enhanced-resolve": "^3.4.0",
"escope": "^3.6.0",
"interpret": "^1.0.0",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"loader-runner": "^2.3.0",
"loader-utils": "^1.1.0",
"memory-fs": "~0.4.1",
"mkdirp": "~0.5.0",
"node-libs-browser": "^2.0.0",
"source-map": "^0.5.3",
"supports-color": "^4.2.1",
"tapable": "^0.2.7",
"uglifyjs-webpack-plugin": "^10.4.6",
"watchpack": "^1.4.0",
"webpack-sources": "^1.0.1",
"yargs": "^8.0.2"
}
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
What’s my next step please?