Ionic2打字稿设备构建错误'uglifyjs失败：语法错误：意外的令牌运算符«=»，预期的标点«，»

Question

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 1

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!