Ionic build error - You may need an appropriate loader to handle this file type

What could be causing below error?
Thanks in advance

$ ionic build
Running app-scripts build:
[16:37:38] build dev started …
[16:37:39] clean started …
[16:37:39] clean finished in 8 ms
[16:37:39] copy started …
[16:37:39] deeplinks started …
[16:37:39] deeplinks finished in 214 ms
[16:37:39] transpile started …
[16:37:42] transpile finished in 2.87 s
[16:37:42] preprocess started …
[16:37:42] preprocess finished in 1 ms
[16:37:42] webpack started …
[16:37:42] copy finished in 3.34 s
Error: ./src/pages/balance/balance.ts
Module parse failed: Unexpected token (187:897)
You may need an appropriate loader to handle this file type.
| BalancePage = __decorate([
| Component({
| selector: ‘page-balance’,template:/ion-inline-start:"/Users/santhosh/Documents/martinapp/frontend/src/pages/balance/balance.html"/<ion-header>\n <ion-navbar mode="ios" >\n <ion-buttons start>\n <button menuToggle ion-button color="navigationtText">\n <ion-icon name="menu"></ion-icon>\n </button>\n </ion-buttons>\n <ion-title>Balance</ion-title>\n </ion-navbar>\n</ion-header>\n\n\n<ion-content>\n <div class="image-container">\n <p class="balance">\n ${{currentBalance}}\n </p>\n </div>\n <div class="top-up" (click)="topUp()">\n TOP UP AMOUNT\n </div>\n <br>\n <div padding>\n <div (click)="selectTopUpAmount(item)" [ngClass]="(item.selected) ? \'suggested-topups-selected\' : \'suggested-topups\'" class="" *ngFor="let item of topUpValues">\n ${{item.value}}\n </div>\n </div>\n <br>\n <img height="2" width="90%" src="assets/images/seprator-grey.png" class="seprator">\n <div justify-content-center align-items-center class="button-container">\n <button (click)="makeAPurchase()" ion-button icon-left round block class="buy-button">\n Buy Now\n </button>\n </div>\n</ion-content>\n/ion-inline-end:"/Users/santhosh/Documents/martinapp/frontend/src/pages/balance/balance.html"/,
| }),
| __metadata(“design:paramtypes”, [NavController,
@ ./src/pages/balance/balance.module.ts 9:0-40
@ ./src lazy
@ ./node_modules/ionic-angular/util/ng-module-loader.js
@ ./node_modules/ionic-angular/util/module-loader.js
@ ./node_modules/ionic-angular/components/popover/popover-component.js
@ ./node_modules/ionic-angular/index.js
@ ./src/app/app.module.ts
@ ./src/app/main.ts,./src/pages/price/price.ts
Module parse failed: Unexpected token (31:1818)
You may need an appropriate loader to handle this file type.
| PricePage = __decorate([
| Component({
| selector: ‘page-price’,template:/ion-inline-start:"/Users/santhosh/Documents/martinapp/frontend/src/pages/price/price.html"/<ion-header>\n\n\n\n <ion-navbar mode="ios" hideBackButton>\n\n <ion-buttons start (click)="goBack()">\n\n <button class="navigation-icon" ion-button color="navigationtText" >\n\n <ion-icon name="md-close"></ion-icon>\n\n </button>\n\n </ion-buttons>\n\n <ion-title>Price</ion-title>\n\n <ion-buttons end (click)="update()">\n\n <button ion-button round small color="primary">Update</button>\n\n </ion-buttons>\n\n </ion-navbar>\n\n</ion-header>\n\n\n\n<ion-content>\n\n <div class="image-container">\n\n <p>"BACK YOUR WORDS WITH YOUR MONEY."</p>\n\n </div>\n\n <ion-list *ngIf="pricing">\n\n <ion-item>\n\n <ion-label class="detail-title">Guarantee Amont</ion-label>\n\n <ion-select [(ngModel)]="pricing.guaranteeAmount">\n\n <ion-option value="50">$50</ion-option>\n\n <ion-option value="100">$100</ion-option>\n\n <ion-option value="150">$150</ion-option>\n\n <ion-option value="200">$200</ion-option>\n\n </ion-select>\n\n </ion-item>\n\n <ion-item>\n\n <ion-label class="detail-title">Challenge Price</ion-label>\n\n <ion-select [(ngModel)]="pricing.challengePrice">\n\n <ion-option value="10">$10</ion-option>\n\n <ion-option value="15">$15</ion-option>\n\n <ion-option value="20">$20</ion-option>\n\n <ion-option value="25">$25</ion-option>\n\n <ion-option value="30">$30</ion-option>\n\n <ion-option value="35">$35</ion-option>\n\n </ion-select>\n\n </ion-item>\n\n <ion-item>\n\n <ion-label class="detail-title">Free view Price</ion-label>\n\n <div item-end class="free-view-price">\n\n ${{pricing.freeViewPrice}} \n\n </div>\n\n </ion-item>\n\n <ion-item>\n\n <ion-label class="detail-title">Paid view Price</ion-label>\n\n <ion-select [(ngModel)]="pricing.paidViewPrice">\n\n <ion-option value="0.10">$0.10</ion-option>\n\n <ion-option value="0.20">$0.20</ion-option>\n\n <ion-option value="0.30">$0.30</ion-option>\n\n <ion-option value="0.40">$0.40</ion-option>\n\n <ion-option value="0.50">$0.50</ion-option>\n\n <ion-option value="0.60">$0.60</ion-option>\n\n <ion-option value="0.70">$0.70</ion-option>\n\n <ion-option value="0.80">$0.80</ion-option>\n\n </ion-select>\n\n </ion-item>\n\n </ion-list>\n\n</ion-content>\n\n/ion-inline-end:"/Users/santhosh/Documents/martinapp/frontend/src/pages/price/price.html"/,
| }),
| __metadata(“design:paramtypes”, [NavController,
@ ./src/pages/price/price.module.ts 9:0-36
@ ./src lazy
@ ./node_modules/ionic-angular/util/ng-module-loader.js
@ ./node_modules/ionic-angular/util/module-loader.js
@ ./node_modules/ionic-angular/components/popover/popover-component.js
@ ./node_modules/ionic-angular/index.js
@ ./src/app/app.module.ts
@ ./src/app/main.ts,./src/pages/earnings/earnings.ts
Module parse failed: Unexpected token (66:1162)
You may need an appropriate loader to handle this file type.
| EarningsPage = __decorate([
| Component({
| selector: ‘page-earnings’,template:/ion-inline-start:"/Users/santhosh/Documents/martinapp/frontend/src/pages/earnings/earnings.html"/<ion-header>\n <ion-navbar mode="ios" >\n <ion-buttons start>\n <button menuToggle ion-button color="navigationtText">\n <ion-icon name="menu"></ion-icon>\n </button>\n </ion-buttons>\n <ion-title>Earnings</ion-title>\n </ion-navbar>\n\n</ion-header>\n\n\n<ion-content>\n <div class="image-container">\n <p>\n ${{totalEarings}}\n </p>\n </div>\n <ion-row \n *ngFor="let i of earnings;\n let myIndex = index;"\n [ngClass]="{\'earning-row-selected\' : (i.selected), \'earning-row\' : !(i.selected) && (myIndex < earnings.length-1), \'earning-row-last\' : (myIndex == earnings.length-1)}"\n (click)="selectEarning(i)"\n >\n <ion-col col-33 class="first-col">\n <div class="title">Truth</div>\n <div class="detail">#{{index}}</div>\n </ion-col>\n <ion-col col-33>\n <div class="title">Views</div>\n <div class="detail">1</div>\n </ion-col>\n <ion-col col-33>\n <div class="title">Earnings</div>\n <div class="detail">${{i.amountEarned}}</div>\n </ion-col>\n </ion-row>\n <img width="100%" src="assets/images/footer-seprator.png">\n <ion-row ngClass="bottom">\n <ion-col col-33 class="first-col" align-self-center>\n <div class="total-text">TOTAL</div>\n </ion-col>\n <ion-col col-33>\n <div class="total-views" align-self-center>\n <ion-icon name="custom-view" class="view-icon"></ion-icon>\n 10</div>\n </ion-col>\n <ion-col col-33 align-self-center>\n <div class="total">${{totalEarings}}</div>\n </ion-col>\n </ion-row>\n</ion-content>\n/ion-inline-end:"/Users/santhosh/Documents/martinapp/frontend/src/pages/earnings/earnings.html"/,
| }),
| __metadata(“design:paramtypes”, [NavController,
@ ./src/pages/earnings/earnings.module.ts 9:0-42
@ ./src lazy
@ ./node_modules/ionic-angular/util/ng-module-loader.js
@ ./node_modules/ionic-angular/util/module-loader.js
@ ./node_modules/ionic-angular/components/popover/popover-component.js
@ ./node_modules/ionic-angular/index.js
@ ./src/app/app.module.ts
@ ./src/app/main.ts,./src/pages/truth-details/truth-details.ts
Module parse failed: Unexpected token (73:2624)
You may need an appropriate loader to handle this file type.
| TruthDetailsPage = __decorate([
| Component({
| selector: ‘page-truth-details’,template:/ion-inline-start:"/Users/santhosh/Documents/martinapp/frontend/src/pages/truth-details/truth-details.html"/<ion-header>\n <ion-navbar>\n <ion-buttons start>\n <button menuToggle ion-button color="navigationtText">\n <ion-icon name="custom-menu"></ion-icon>\n </button>\n </ion-buttons>\n <ion-title>Truth</ion-title>\n <ion-buttons end (click)="goToComment()">\n <button ion-button color="primary">\n <ion-icon name="custom-comment"></ion-icon>\n </button>\n </ion-buttons>\n </ion-navbar>\n</ion-header>\n\n<ion-content padding>\n <div class="segment-contianer">\n <ion-segment mode="ios" [(ngModel)]="viewType" color="primary" (ionChange)="viewTypeChanged($event)">\n <ion-segment-button value="free">\n Free\n </ion-segment-button>\n <ion-segment-button value="paid">\n Paid\n </ion-segment-button>\n </ion-segment>\n </div>\n <div class="free-view" *ngIf="viewType == \'free\'" padding>\n <div class="set-text">\n {{getFreeStatement().statement}}\n </div>\n </div>\n <div class="paid-view" *ngIf="viewType == \'paid\'" padding>\n <div class="set-text">\n {{getPaidStatement().statement}}\n </div>\n </div>\n\n <ion-item no-lines class="set-loc2" *ngIf="getStatement().location && getStatement().location.description">\n <ion-icon color="primary" name="custom-location"></ion-icon>\n {{getStatement().location.description}}\n </ion-item>\n\n <div class="selected-photo-container2"\n *ngFor="let img of getStatement().pic">\n <img src="{{img}}" width="100%">\n <div class="selected-photo-options">\n <ion-row align-items-center>\n <ion-col col-1>\n <!-- <ion-icon name="custom-image-icon" color="primary"></ion-icon> -->\n </ion-col>\n <ion-col col-10>\n <!-- <p class="image-name">imagename.jpg</p>\n <p class="image-size">66kb</p> -->\n </ion-col>\n </ion-row>\n </div>\n </div>\n <img height="1" width="90%" src="assets/images/seprator.png" class="seprator">\n</ion-content>\n\n<ion-footer class="footer">\n <ion-item no-lines class="button-container">\n <button (click)="purchasePaidView()" ion-button icon-left round block\n class="purchase-button">\n <ion-icon class="purchase-icon" name="custom-purchase-card"></ion-icon>\n Purchase ${{getFreeStatement().pricing.paidViewPrice}}\n </button>\n </ion-item>\n <!-- <ion-row class="set-bg">\n <ion-col col-2></ion-col>\n <ion-col col-8>\n <div class="set-postbtn" text-center><ion-icon class="set-icon" name="custom-post-comment-icon"></ion-icon> <strong>POST YOUR COMMENT</strong></div>\n </ion-col>\n <ion-col col-2></ion-col>\n <ion-col></ion-col>\n </ion-row> -->\n <!-- <button ion-button icon-left block class="purchase-button">\n <ion-icon class="set-icon" name="custom-post-comment-icon"></ion-icon>\n POST YOUR COMMENT\n </button> -->\n</ion-footer>\n/ion-inline-end:"/Users/santhosh/Documents/martinapp/frontend/src/pages/truth-details/truth-details.html"/,
| }),
| __metadata(“design:paramtypes”, [NavController,
@ ./src/pages/truth-details/truth-details.module.ts 9:0-51
@ ./src lazy
@ ./node_modules/ionic-angular/util/ng-module-loader.js
@ ./node_modules/ionic-angular/util/module-loader.js
@ ./node_modules/ionic-angular/components/popover/popover-component.js
@ ./node_modules/ionic-angular/index.js
@ ./src/app/app.module.ts
@ ./src/app/main.ts
at BuildError.Error (native)
at new BuildError (/Users/santhosh/Documents/martinapp/frontend/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at callback (/Users/santhosh/Documents/martinapp/frontend/node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
at emitRecords.err (/Users/santhosh/Documents/martinapp/frontend/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/Users/santhosh/Documents/martinapp/frontend/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Users/santhosh/Documents/martinapp/frontend/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Users/santhosh/Documents/martinapp/frontend/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/santhosh/Documents/martinapp/frontend/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/santhosh/Documents/martinapp/frontend/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Users/santhosh/Documents/martinapp/frontend/node_modules/tapable/lib/Tapable.js:222:13)

$ ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.2 
Node       : v6.11.2
npm        : 3.10.10 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Found the problem. $ in the page was causing the error during templating. Replaced $ with respective hex code to fix the problem

After a couple of weeks struggling with a similar error I find out that if you have $ next to { “${” the view crash even if the text is commented

<!--
This is going to crash
${
-->

<!--
This not
$ {
-->

The code was inside a component I made and the error trigger when you try to import the module.

I hope this is going to help someone

I had the same error, not in a .html but in the .ts file.

The “problem” was that I’d a very long comment /* */ to keep the entire old version of that .ts file. The comment was fine, with no one part outside of it; but very long.

Just deleting that very long comment solved that.

2 Likes

I had the same error in the .html file when using \ ’ (dash + single quote)
combining a “translate” pipe
in this line:
<ion-textarea rows="1" placeholder="{{'Add some notes. **it\'s** cool)' | translate }}"></ion-textarea>

I had to change is to: it is (not it’s)