NPM run build command throws an error on an html file - html

Question

I have an application developed on anglarJS. when I run the command:
npm run build -- -prod
I get the follwing error
ERROR in ng:///home/directoryling/appname-play.component.html (173,41): The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
the HTML code referred to is as follows:
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{incomeM}}</span>$</h4>
</div>
line 173 is </div>, the last line in the code sample.
The part of the TS code where incomeM is assigned is:
this.incomeM = this.householdControlService.getMonthlyIncome();
and getMonthlyIncome() is a function that returns a number.
My question is is it normal for npm to throw such an error here, especially since there is no arithmetic operation in the HTML code. And the variable incomeM is set as a number. And if you have any suggestions on what I can do, or what I need to investigate.
Note I tried removing the handlebar from incomeM:
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">incomeM</span>$</h4>
</div>
the idea being lets 's just print "incomeM" instead of the variable incomeM. However, I still get the same error, except this time it is for the previous element I am using in the HTML file.
here is the full HTML file for your reference:
import { Component } from '#angular/core';
import { MdDialog } from '#angular/material';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
import { Utilities } from '../utilities';
import { Household, SystemParameters, PowerUsage } from '../../models';
import { AfterSimulationService } from '../services/household/after-simulation.service';
import { HouseholdControlService } from '../services/household/household-control.service';
import { HouseSettingService } from '../services/household/house-setting.service';
import { PaymentService, PaymentType } from '../services/household/payment.service';
import { SimulationControlService } from '../services/household/simulation-control.service';
import { SystemParametersService } from '../services/household/system-parameters.service';
import { AlertDialogComponent } from '../shared/dialog/alert-dialog.component';
import { ConfirmationDialogComponent } from '../shared/dialog/confirmation-dialog.component';
import { PaymentDialogComponent } from '../shared/dialog/payment-dialog.component';
#Component({
selector: 'household-play',
templateUrl: './household-play.component.html',
styleUrls: ['./household-play.component.css']
})
export class HouseholdPlayComponent {
initialTime = 0;
elapsedTime = 0;
currentPower = '0.00';
totalEnergy = '0.00';
cost = '0.00';
maxPower = '0.00';
communityCashBox = '0.00';
happinessScore = 1;
household: Household = new Household();
systemParameters: SystemParameters = new SystemParameters();
readyCount = 0;
//initialize income to -1 for debugging purposes.
incomeM = 0;
totalpaid = 0;
isPrepaid = false;
balance = '0.00';
depositAmount = 0;
sellingMode = false;
roomSetting = [[], [], [], []];
powerUsage: PowerUsage;
constructor(
private afterSimulationService: AfterSimulationService,
private dragulaService: DragulaService,
private householdControlService: HouseholdControlService,
private houseSettingService: HouseSettingService,
private paymentService: PaymentService,
private simulationControlService: SimulationControlService,
private systemParametersService: SystemParametersService,
private dialog: MdDialog
) {
dragulaService.setOptions('room-bag', {
revertOnSpill: true
});
dragulaService.drop.subscribe(value => {
houseSettingService.handleRoomOverflow(this.roomNumberByName(value[2].id), this.roomNumberByName(value[3].id))
});
this.roomSetting = houseSettingService.roomSetting;
householdControlService.observable().subscribe(() => {
this.household = householdControlService.household;
});
//store income value for each houshold.
systemParametersService.observable().subscribe(() => {
this.systemParameters = systemParametersService.systemParameters;
this.initialTime = this.systemParameters.simulationStartTime;
this.incomeM = this.householdControlService.getMonthlyIncome();
console.log(typeof(this.incomeM));
this.communityCashBox = this.systemParameters.communityCashBox.toFixed(2);
});
simulationControlService.observable().subscribe(code => {
this.readyCount = simulationControlService.householdReadyCount;
this.elapsedTime = simulationControlService.currentTime
this.maxPower = simulationControlService.maxPower.toFixed(2);
this.totalEnergy = simulationControlService.totalEnergy.toFixed(2);
if (paymentService.paymentType === PaymentType.FLAT_RATE) {
this.cost = (householdControlService.household.flatRateTariff * Math.ceil(this.elapsedTime / (86400*3))).toFixed(2);
}
else {
this.cost = (simulationControlService.totalEnergy * systemParametersService.systemParameters.tariff).toFixed(2);
}
//this.householdControlService.setTotalCostIncurred(parseInt(this.cost));
this.happinessScore = simulationControlService.happinessScore;
this.powerUsage = simulationControlService.powerUsage;
if (simulationControlService.isGameOver) {
dialog.open(AlertDialogComponent, {
disableClose: true,
data: {
title: 'Game Over',
content: 'Please restart the game.'
}
}).afterClosed().subscribe(result => {
window.location.href = '/';
});
}
this.currentPower = this.simulationControlService.isShutdown? '0.00': houseSettingService.getPower().toFixed(2);
if (code === -1) {
this.openAlertDialog('30 Days Simulation Complete.')
paymentService.repay();
}
});
paymentService.observable().subscribe(bill => {
this.isPrepaid = paymentService.paymentType === PaymentType.PREPAID;
this.balance = (paymentService.balance * (simulationControlService.isSimulating? 1: 10)).toFixed(2);
this.currentPower = this.simulationControlService.isShutdown? '0.00': houseSettingService.getPower().toFixed(2);
if (bill === 0) {
return;
}
this.openPaymentDialog(bill);
})
afterSimulationService.observable().subscribe(message => {
if (message === 0) {
return;
}
this.currentPower = this.houseSettingService.getPower().toFixed(2);
if (message instanceof Array) {
this.openAlertDialog(message[0], true);
}
else {
this.openAlertDialog(message);
}
});
}
deposit(amount: number) {
if (amount < 0) {
return;
}
if (!this.simulationControlService.isSimulating) {
return;
}
this.paymentService.deposit(amount);
}
openPaymentDialog(bill) {
this.dialog.open(PaymentDialogComponent, {
disableClose: true,
data: {
current: bill.current,
remain: bill.remain
}
}).afterClosed().subscribe(amount => {
if (amount > this.householdControlService.household.cashBox) {
this.openPaymentDialog(bill);
this.openAlertDialog('Not enough cash.');
return;
}
if (amount < 0) {
this.openAlertDialog('Invalid amount.');
return;
}
this.paymentService.payHouseholdBill(amount);
this.totalpaid += amount;
});
}
openAlertDialog(message, income=false) {
const dialogRef = this.dialog.open(AlertDialogComponent, {
disableClose: true,
data: {
title: message,
content: ''
}
});
if (!income) {
return;
}
dialogRef.afterClosed().subscribe(() => {
this.householdControlService.receiveMonthlyIncome();
this.openAlertDialog('Income Received.');
});
}
private roomNumberByName(name: string): number {
switch(name) {
case 'room0':
return 0;
case 'room1':
return 1;
case 'room2':
return 2;
case 'room3':
return 3;
default:
return 0;
}
}
applianceOnClick(room, index) {
if (this.sellingMode) {
this.sellAppliance(room, index);
}
else {
this.switchAppliance(room, index);
}
}
switchAppliance(room, index) {
this.roomSetting[room][index].on = !this.roomSetting[room][index].on;
this.houseSettingService.setRoomSetting();
this.currentPower = this.houseSettingService.getPower().toFixed(2);
}
sellAppliance(room, index) {
this.dialog.open(ConfirmationDialogComponent, {
disableClose: true,
data: {
title: 'SELL PRODUCT',
content: `You\'re about to sell this product for $${this.houseSettingService.checkSellPrice(room, index)}, are you sure you want to do this?`,
image: this.roomSetting[room][index].image
}
}).afterClosed().subscribe(result => {
if (result) {
this.houseSettingService.sellAppliance(room, index);
this.currentPower = this.houseSettingService.getPower().toFixed(2);
}
});
}
ready() {
this.householdControlService.ready();
}
}
.page {
width: 100vw;
height: 100vh;
background: linear-gradient(180deg, #2E476A, #BFEFFD);
padding: 15px;
min-width: 1024px;
min-height: 768px;
}
.paddingset {
padding: 15px;
}
.household-name {
padding-left: 15px;
color: aliceblue;
margin: 0;
}
/*
.room {
background-image: url(../../assets/images/household-room.svg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
margin: 15px;
}
*/
.sell-switch {
background-color: #005E68;
color: aliceblue;
border-top: 30px solid #005E68;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.room-cell-top-left {
background-image: url(../../assets/images/wood-texture.png);
border-top: 10px solid #005E68;
border-left: 10px solid #005E68;
border-bottom: 5px solid #037E8C;
border-right: 5px solid #037E8C;
}
.room-cell-top-right {
background-image: url(../../assets/images/wood-texture.png);
border-top: 10px solid #005E68;
border-right: 10px solid #005E68;
border-bottom: 5px solid #037E8C;
border-left: 5px solid #005E68;
}
.room-cell-bottom-left {
background-image: url(../../assets/images/wood-texture.png);
border-bottom-left-radius: 30px;
border-top: 5px solid #005E68;
border-right: 5px solid #037E8C;
border-bottom: 10px solid #005E68;
border-left: 10px solid #005E68;
}
.room-cell-bottom-right {
background-image: url(../../assets/images/wood-texture.png);
border-bottom-right-radius: 30px;
border-top: 5px solid #005E68;
border-left: 5px solid #005E68;
border-bottom: 10px solid #005E68;
border-right: 10px solid #005E68;
}
.ready, .power-usage, .overview {
background-color: lightgray;
margin: 15px;
border-radius: 10px;
}
.ready-status {
margin: 0;
}
.ready-btn {
background-color: #037E8C;
color: white;
border-radius: 5px;
}
.value {
width: 100px;
margin: 0px 10px;
font-weight: 700;
}
.section-title {
margin: 0;
margin-left: 5px;
}
.overview .stats {
border: 1px solid white;
border-radius: 5px;
margin: 2px;
}
.system-report-btn {
background-color: #037E8C;
width: 50px;
border-radius: 30px;
margin-top: -10px;
}
.system-report-btn img {
height: 95%;
}
.stats-img {
width: 65%;
max-height: 50px;
}
.ready-status, .overview-title {
margin: 0;
}
.overview-title {
color: dimgray;
}
.deposit-btn {
background-color: firebrick;
color: white;
border-radius: 30px;
width: 50px;
}
.deposit-input {
width: 50px;
}
.deposit-confirm {
background-color: #037E8C;
color: aliceblue;
border: 0px;
}
.sidenav {
width: 100vw;
height: 100vh;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.sidenav-btn {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.sidenav-btn img {
height: 80%;
margin-top: 7px;
}
.sidenav-content {
width: 45%;
padding: 20px;
background-color: lightgray;
}
<md-sidenav-container fxFlexFill class="sidenav">
<md-sidenav #sidenav align="end" class="sidenav-content">
<appliance-store></appliance-store>
</md-sidenav>
<div fxLayout="row" fxFlexFill class="page-background">
<div fxLayout="column" fxFlexFill fxFlex="55">
<div fxLayout="row" fxFlex="10" class="paddingset">
<h1 fxFlex="60" class="household-name">{{household.name}}</h1>
<div fxFlex="40" class="sidenav-btn" fxLayoutAlign="end center">
<button md-fab (click)="sidenav.open()">
<img src="../../assets/images/cart-icon.svg">
</button>
</div>
</div>
<div fxLayout="row" fxFlex="25" class="paddingset">
<img fxFlex="95" fxFlexAlign="end" src="../../assets/images/household-house.svg">
<happiness-score fxFlex="5"s [score]="happinessScore"></happiness-score>
</div>
<div fxLayout="column" fxFlexFill fxFlex="65" class="paddingset rooms">
<div fxLayout="row" fxFlex="5" fxLayoutAlign="end end" class="sell-switch">
<div fxFlex="20" fxFlexFill fxLayoutAlign="center end">
<md-slide-toggle labelPosition="before" fxLayoutAlign="end center" class="toggle-switch" color="accent" [(ngModel)]="sellingMode">sell mode</md-slide-toggle>
</div>
</div>
<div fxLayout="row" fxFlex>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-top-left" id="room0" [dragula]='"room-bag"' [dragulaModel]="roomSetting[0]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[0]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(0, i)"></appliance-item>
</div>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-top-right" id="room1" [dragula]='"room-bag"' [dragulaModel]="roomSetting[1]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[1]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(1, i)"></appliance-item>
</div>
</div>
<div fxLayout="row" fxFlex>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-bottom-left" id="room2" [dragula]='"room-bag"' [dragulaModel]="roomSetting[2]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[2]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(2, i)"></appliance-item>
</div>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-bottom-right" id="room3" [dragula]='"room-bag"' [dragulaModel]="roomSetting[3]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[3]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(3, i)"></appliance-item>
</div>
</div>
</div>
</div>
<div fxLayout="column" fxFlexFill fxFlex="45">
<div fxLayout="row" fxFlex="15" class="paddingset ready">
<div fxFlex="25">
<analog-clock [initTime]="initialTime" [elapsedTime]="elapsedTime"></analog-clock>
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="40" fxLayoutAlign="center center">
<h4 class="ready-status"><span class="value">{{readyCount}}</span> of <span class="value">{{systemParameters.numberOfHouseholds}}</span> users <span class="value">is</span> ready</h4>
</div>
<div fxFlex="60" fxLayoutAlign="center end">
<button md-raised-button class="ready-btn" (click)="ready()">I'm Ready!</button>
</div>
</div>
</div>
<div fxFlex class="paddingset power-usage">
<h3 class="section-title">Load Profile</h3>
<combo-chart [powerUsage]="powerUsage" [currentTime]="initialTime+elapsedTime"></combo-chart>
</div>
<div fxLayout="column" fxFlex class="paddingset overview">
<div fxLayout="row" fxFlex="5vh">
<h3 fxFlex="60" class="section-title">Household Overview</h3>
<div fxFlex="40" fxLayoutAlign="end center">
</div>
</div>
<div *ngIf="isPrepaid" fxLayout="row" fxFlex="4vh" class="deposit" fxLayoutAlign="space-between">
<div fxFlexOffset="25" fxFlex="22" fxLayoutAlign="space-between">
<button class="deposit-btn" (click)="deposit(5)">5</button>
<button class="deposit-btn" (click)="deposit(10)">10</button>
</div>
<div fxLayoutAlign="space-around">
<input type="number" class="deposit-input" [(ngModel)]="depositAmount" />
<button class="deposit-confirm" (click)="deposit(depositAmount)">Deposit</button>
</div>
<span class="value" fxFlexAlign="center">$ {{balance}}</span>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cashbox-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Cash Box</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4>$<span class="value">{{household.cashBox.toFixed(2)}}</span></h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/communityfund-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Community fund</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4>$<span class="value">{{communityCashBox}}</span></h4>
</div>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/energyuse-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Energy Use</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{totalEnergy}}</span>kWh</h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cost-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Total Cost</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4>$<span class="value">{{cost}}</span></h4>
</div>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/currentpower-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Current Power</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{currentPower}}</span>kW</h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/maxpower-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Max Power</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{maxPower}}</span>kW</h4>
</div>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cashbox-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Income</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{incomeM}}</span>$</h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cashbox-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Outstanding Bill</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{(cost-totalpaid).toFixed(2)}}</span>$</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Instead initializing incomeM = 0 make it incomeM: any;