模块解析失败:意外的令牌离子 3 [英] Module parse failed: Unexpected token ionic 3

问题描述

After upgrading to the latest module of ionic and ionic-angular am getting this error. Here is my Package.json file after upgrading..

Here is my Package.json file after upgrading..

Runtime Error

Module parse failed: Unexpected token (84:1254) You may need an appropriate loader to handle this file type. | HomelistPage = __decorate([ | Component({ | selector: 'page-homelist',template:/*ion-inline-start:"/Users/macbook/Downloads/studio/src/pages/home/homelist/homelist.html"*/`<ion-header>
 <ion-navbar color="bluegray">
 <button ion-button menuToggle color="light">
 <ion-icon name="menu"></ion-icon>
 </button>
 <ion-title color="light">Instractors</ion-title>
 <ion-buttons right>
 <button color="light" ion-button icon-only (click)="createMessage()">
 <ion-icon name="more"></ion-icon>
 </button>
 </ion-buttons>
 </ion-navbar>
 <ion-toolbar color="bluegray">
 <ion-searchbar></ion-searchbar>
 </ion-toolbar>
</ion-header>

<ion-content>
 <!--*********** 2 colomns list ***********-->
 <ion-grid>
 <ion-row wrap>
 <ion-col tappable col-6 *ngFor="let item of items" (click)="goToDetail(item.$key)" color="gray">
 <ion-card class="cardList">
 <div *ngIf="item.discount" class="ribbon pop-in">SALE</div>
 <img class="pop-in" src={{item.imgSmall}} />
 <ion-card-header>
 {{item.name}}
 </ion-card-header>
 <ion-card-content>
 <p *ngIf="!item.discount" ion-text color="special-blue">
 <strong>${{item.price}}</strong>
 </p>
 <p *ngIf="item.discount" ion-text color="special-blue" class="discount">${{item.price}}</p>
 <p *ngIf="item.discount" ion-text large color="red">
 <strong>${{item.discountPrice}}</strong>
 </p>
 </ion-card-content>
 </ion-card>
 </ion-col>
 </ion-row>
 </ion-grid>
</ion-content>`/*ion-inline-end:"/Users/macbook/Downloads/studio/src/pages/home/homelist/homelist.html"*/, | }), | __metadata("design:paramtypes", [NavController, NavParams, ToastController,


Error: Module parse failed: Unexpected token (84:1254)
You may need an appropriate loader to handle this file type.
|     HomelistPage = __decorate([
|         Component({
|             selector: 'page-homelist',template:/*ion-inline-start:"/Users/macbook/Downloads/studio/src/pages/home/homelist/homelist.html"*/`<ion-header>
  <ion-navbar color="bluegray">
    <button ion-button menuToggle color="light">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title color="light">Instractors</ion-title>
        <ion-buttons right>
          <button color="light" ion-button icon-only (click)="createMessage()">
            <ion-icon name="more"></ion-icon>
          </button>
        </ion-buttons>
  </ion-navbar>
  <ion-toolbar color="bluegray">
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!--*********** 2 colomns list  ***********-->
  <ion-grid>
    <ion-row wrap>
      <ion-col tappable col-6 *ngFor="let item of items" (click)="goToDetail(item.$key)" color="gray">
        <ion-card class="cardList">
          <div *ngIf="item.discount" class="ribbon pop-in">SALE</div>
          <img class="pop-in" src={{item.imgSmall}} />
          <ion-card-header>
            {{item.name}}
          </ion-card-header>
          <ion-card-content>
            <p *ngIf="!item.discount" ion-text color="special-blue">
              <strong>${{item.price}}</strong>
            </p>
            <p *ngIf="item.discount" ion-text color="special-blue" class="discount">${{item.price}}</p>
            <p *ngIf="item.discount" ion-text large color="red">
              <strong>${{item.discountPrice}}</strong>
            </p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>`/*ion-inline-end:"/Users/macbook/Downloads/studio/src/pages/home/homelist/homelist.html"*/,
|         }),
|         __metadata("design:paramtypes", [NavController, NavParams, ToastController,
    at Object.448 (http://localhost:8100/build/main.js:1042:7)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.254 (http://localhost:8100/build/main.js:335:68)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.331 (http://localhost:8100/build/main.js:556:96)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.309 (http://localhost:8100/build/main.js:531:70)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
    at http://localhost:8100/build/main.js:1:1

解决方案

For those experiencing this issue after upgrading to @ionic/app-scripts : 3.1.0 you can fix it by, navigate to node_modules/@ionic/app-scripts/dist/template.js:153 and replace the line of code with this

return getTemplatePrefix(htmlFilePath) + "'" + content + "'" + getTemplateSuffix(htmlFilePath);

This was a manual fix for the bug but as of release. @ionic/app-scripts : 3.1.1 the bug was fixed.

这篇关于模块解析失败:意外的令牌离子 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！