Tim Lupo Tim Lupo - 18 days ago 13
TypeScript Question

Ionic2 Typescript Device Build Error 'uglifyjs failed: SyntaxError: Unexpected token operator «=», expected punc «,»`

I'm trying to create a 360 video player in an Ionic app. My code is below.

HTML:

<ion-content>
<video id="videojs-panorama-player" class="video-js vjs-default-skin" src="" crossorigin="anonymous" controls ref="player">
<source src="/assets/beach.mp4" type='video/mp4'>
</video>
</ion-content>


Typescript:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import videojs from 'video.js';
import panorama from 'videojs-panorama';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})

export class HomePage {

private player: any;

constructor(public navCtrl: NavController, private platform: Platform) {
this.player = null;
this.platform.ready().then(() => {
this.init();
});
}

init() {
this.player = videojs('videojs-panorama-player', {}, () => {
window.addEventListener("resize", () => {
var canvas = this.player.getChild('Canvas');
if(canvas) canvas.handleResize();
});
});
this.player.width(960), this.player.height(400);
panorama(this.player, {
clickToToggle: false,
autoMobileOrientation: true,
initFov: 100,
VREnable: true,
clickAndDrag: true,
NoticeMessage: "touch to interact"
});
console.log("initialized");
}
}


This code works as intended when I
ionic serve
, but when I try to build to a platform I get a bunch of problems. (
ionic build ios
or
ionic build android
).

Log when errors start:

[14:57:42] uglifyjs failed: SyntaxError: Unexpected token operator «=», expected punc «,»
[14:57:42] ionic-app-script task: "build"
[14:57:42] Error: SyntaxError: Unexpected token operator «=», expected punc «,»

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--"
npm ERR! node v7.0.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script 'ionic-app-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/Tim/Desktop/NMAAHC VR Player/npm-debug.log


npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'ionic:build',
1 verbose cli '--' ]
2 info using npm@3.10.9
3 info using node@v7.0.0
4 verbose run-script [ 'preionic:build', 'ionic:build', 'postionic:build' ]
5 info lifecycle ionic-hello-world@~preionic:build: ionic-hello-world@
6 silly lifecycle ionic-hello-world@~preionic:build: no script for preionic:build, continuing
7 info lifecycle ionic-hello-world@~ionic:build: ionic-hello-world@
8 verbose lifecycle ionic-hello-world@~ionic:build: unsafe-perm in lifecycle true
9 verbose lifecycle ionic-hello-world@~ionic:build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/Tim/Desktop/NMAAHC VR Player/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle ionic-hello-world@~ionic:build: CWD: /Users/Tim/Desktop/NMAAHC VR Player
11 silly lifecycle ionic-hello-world@~ionic:build: Args: [ '-c', 'ionic-app-scripts build' ]
12 silly lifecycle ionic-hello-world@~ionic:build: Returned: code: 1 signal: null
13 info lifecycle ionic-hello-world@~ionic:build: Failed to exec ionic:build script
14 verbose stack Error: ionic-hello-world@ ionic:build: `ionic-app-scripts build`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:877:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid ionic-hello-world@
16 verbose cwd /Users/Tim/Desktop/NMAAHC VR Player
17 error Darwin 16.1.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--"
19 error node v7.0.0
20 error npm v3.10.9
21 error code ELIFECYCLE
22 error ionic-hello-world@ ionic:build: `ionic-app-scripts build`
22 error Exit status 1
23 error Failed at the ionic-hello-world@ ionic:build script 'ionic-app-scripts build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the ionic-hello-world package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error ionic-app-scripts build
23 error You can get information on how to open an issue for this project with:
23 error npm bugs ionic-hello-world
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls ionic-hello-world
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]


I updated my NPM, Node.js, and sass. What could be the problem? Any ideas on how to fix it? Thank you so much.

-Tim

Answer

I figured out the problem. The problem is that videos-panorama did not work with certain Typescript bindings. I contacted the dev and he updated it, so now this code works fine. Good luck!