Ionic 3.9.x app doesn't run with Android 5.x device. : Unexpected token Illegal

ionic ionic-v3
#1

After upgrading an app from ionic 3.6 i experienced an erro on starting the app on android 5.x (at least). It works on a android 7 device.
Uncaught SyntaxError: Unexpected token ILLEGAL
As the app is relativelly complex with many plug-ins, i started a new clean project with the same result!
The error point to a line in main.js that seams to be the starting page:

var TabsPage = (function () {
    function TabsPage() {
        this.tab1Root = __WEBPACK_IMPORTED_MODULE_3__home_home__["a" /* HomePage */];
        this.tab2Root = __WEBPACK_IMPORTED_MODULE_1__about_about__["a" /* AboutPage */];
        this.tab3Root = __WEBPACK_IMPORTED_MODULE_2__contact_contact__["a" /* ContactPage */];
    }
    TabsPage = __decorate([
        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({template:/*ion-inline-start:"/projects/learning/test50/src/pages/tabs/tabs.html"*/`<ion-tabs>\n  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>\n  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>\n  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>\n</ion-tabs>\n`/*ion-inline-end:"/projects/learning/test50/src/pages/tabs/tabs.html"*/
        }),
        __metadata("design:paramtypes", [])
    ], TabsPage);
    return TabsPage;
}())

I surfed the web but only found one entry that tells the same (Android 5.x) with no answer.
Can’t believe that such a major thing has not been detected more often, so what am I doing wrong or what is wrong.
Any help appreciated.
Regards from Manila

Ralph

1 Like
#2

Same error here, running against Android 5.1. The app works fine on Android 6:

I/chromium: [INFO:CONSOLE(150)] "Uncaught SyntaxError: Unexpected token ILLEGAL", source: file:///android_asset/www/build/main.js (150)

Line 150 contains my template:

        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({
150:            selector: 'page-claim-details',template:/*ion-inline-start:"..........................
        }),

In fact, when I changed my component from using a templateURL to using an inline template, the error moved to the next line in main.js that used an inline template:

Old - failed:

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

New - worked:

@Component({
  selector: 'page-claim-details',
  template: `
  <h1>My First Angular template</h1>
  `
})

So my error seems to be something about referencing the template via URL.
Android 5.1 doesn’t like something on this line. It could be the back-quote, at a guess:

selector: 'page-help',template:/*ion-inline-start:"C:\xxxxxxx\src\pages\help\help.html"*/`<template content>`/*ion-inline-end:"C:\xxxxxxx\src\pages\help\help.html"*/,
1 Like
#3

I updated various bits and pieces, and the error went away.
Perhaps it was some of these changes (in package.json):

  "dependencies": {
    "@angular/common": "5.0.3", <=== all updated from 5.0.0
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    .....

"devDependencies": {
    "@ionic/app-scripts": "3.1.6", <=== used to be 3.1.0
    "typescript": "2.4.2"
  },