angular4 form saving exception - forms

Question

hi every body i am using angular 4 , when i save form in deployment mode, i get the error down , and when i save the same form in development mode i don't get the exception.
my form code products-form.component.ts :
import {Component, OnInit, OnDestroy, ViewChild, ElementRef} from '#angular/core';
import {NgForm} from '#angular/forms';
import {AdminService} from "../../../services/admin.service";
import {HttpService} from "../../../../http.service";
import {Subscription} from "rxjs";
import {Http, Response, Headers,RequestOptions} from "#angular/http";
import {ActivatedRoute, Router} from "#angular/router";
import { trigger, state, style, transition, animate } from '#angular/animations';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import {BusyModule} from 'angular2-busy';
import { FormGroup, FormBuilder, Validators,ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import {MdDialog, MdDialogRef} from '#angular/material';
import {DiscardPopUpComponent} from '../../../../discard-pop-up/discard-pop-up.component';
#Component({
selector: 'app-products-form',
templateUrl: './products-form.component.html',
styleUrls: ['./products-form.component.css']
})
export class ProductsFormComponent implements OnInit, OnDestroy {
product:any = {'needTransformer':'Yes',
'power':'',
'cct':'',
'cri':'',
'lightSource':'',
'country':'',
'category':{},
'productionCompany':{},
'finish':{}};
discardPopUpTitle:string = "Discard Changes";
discardPopUpContent:string="Are you Sure you want to discard changes and exit to products table ?";
selectedPopUpOption:string;
discardDialog:DiscardPopUpComponent;
showPopUp = false;
popUpresult = false;
isFormDirty:boolean=false;
companies: string[] =[];
companiesSubscription: Subscription;
finishes: string[] = [];
finishesSubscription: Subscription;
categories: string[] = [];
categoriesSubscription: Subscription;
lightSources: string[] = [];
lightSourcesSubscription: Subscription;
countries: string[] = [];
countriesSubscription: Subscription;
routeSubscritpion: Subscription;
selectedCategory: string;
selectedFinish: string;
selectedProductionCompany: string;
selectedLightSource: string;
selectedCountry: string;
selectedTransformerNeeded: string;
isEdit: boolean = false;
isShow: boolean = false;
message: string;
#ViewChild('mainImage') mainImage: ElementRef;
#ViewChild('diemsnions') diemsnions: ElementRef;
#ViewChild('effects') effects: ElementRef;
#ViewChild('pdf') pdf: ElementRef;
#ViewChild('categoryEl') categoryEl: ElementRef;
busy: any;
isSuccess: boolean = false;
currentCode: string;
constructor(private httpService:HttpService, private adminService: AdminService, private http: Http, private route: ActivatedRoute, private router: Router,public dialog: MdDialog) {
console.log(dialog);
this.discardDialog = new DiscardPopUpComponent();
}
ngOnInit() {
// this.busy = true;
this.routeSubscritpion = this.route.params.subscribe(param => {
let code = param['code'];
if(code != undefined)
this.httpService.getProductDataByCode(code).subscribe(
(data:any)=> {
this.product=data;
this.currentCode = data.code;
this.isEdit = true;
this.selectedCategory = data.category.name;
this.selectedFinish = data.finish.name;
this.selectedCountry = data.country;
this.selectedProductionCompany = data.productionCompany.name;
this.selectedLightSource = data.lightSource;
this.selectedTransformerNeeded = data.transformerNeeded;
// this.categoryEl.nativeElement.value = data.category.name;
},
(err) => console.error(err+"<-------------"),
() => console.log('Random Quote Complete')
);
});
this.companiesSubscription = this.httpService.getAllCompanies().subscribe(
(data:any)=> {
data.forEach((entry)=> {
this.companies.push(entry.name);
});
if(this.companies.length > 0)
this.product.productionCompany = this.companies[0];
},
(err) => console.error(err+"<-------------"),
() => console.log('Random Quote Complete')
);
this.categoriesSubscription = this.httpService.getAllCategories().subscribe(
(data:any)=> {
data.forEach((entry)=> {
this.categories.push(entry.name);
});
if(this.categories.length > 0)
this.product.category = this.categories[0];
},
(err) => console.error(err+"<-------------"),
() => console.log('Random Quote Complete')
);
this.finishesSubscription = this.httpService.getAllFinishes().subscribe(
(data:any)=> {
data.forEach((entry)=> {
this.finishes.push(entry.name);
});
if(this.finishes.length > 0)
this.product.finish = this.finishes[0];
},
(err) => console.error(err+"<-------------"),
() => console.log('Random Quote Complete')
);
this.lightSourcesSubscription = this.httpService.getAllLightSources().subscribe(
(data:any)=> {
this.lightSources = data;
if(this.lightSources.length > 0)
this.product.lightSource = this.lightSources[0];
},
(err) => console.error(err+"<-------------"),
() => console.log('Random Quote Complete')
);
this.httpService.getAllCountries().subscribe(
(data:any)=> {
this.countries = data;
if(this.countries.length > 0)
this.product.country = this.countries[0];
},
(err) => console.error(err+"<-------------"),
() => console.log('Random Quote Complete')
);
}
readUrl(event,url) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = (event) => {
var target:FileReader=<FileReader>event.target;
this.product[url] = target.result;
}
reader.readAsDataURL(event.target.files[0]);
}
}
formatStrings(str)
{
str=str.replace(/\s/g, '');
str=str.replace(/,/g, '');
str=str.toUpperCase();
return str
}
onSubmit(form:NgForm)
{
var values=form.value;
let parent=this;
let obj={
name:values.name,
description:values.description,
code:values.code,
category:{
name:values.categories
},
productionCompany:{
name:values.productionCompany
},
finish:{
name:values.finish
},
transformerNeeded:values.transformerNeeded,
power:values.power,
cct:values.cct,
cri:values.cri,
ik: values.ik,
ip: values.ip,
luminous: values.luminous,
optic: values.optic,
lightSource:values.lightSource,
country:values.productionContry,
effictImagePath:'',
normalImagePath:'',
detailsImagePath:'',
catalogPath:''
};
let headers = new Headers({ 'Content-Type': 'application/json' ,'Authorization': JSON.parse(localStorage.getItem('currentUser'))['token']});
let options = new RequestOptions({ headers: headers });
if(!this.isEdit) {
this.busy = this.http.post('http://levelskw.com/products/', JSON.stringify(obj), options).subscribe(
(data: any) => {
this.product=obj;
this.currentCode = obj.code;
this.isEdit = true;
this.selectedCategory = obj.category.name;
this.selectedFinish = obj.finish.name;
this.selectedCountry = obj.country;
this.selectedProductionCompany = obj.productionCompany.name;
this.selectedLightSource = obj.lightSource;
this.selectedTransformerNeeded = obj.transformerNeeded;
this.isSuccess = true;
this.message="Success";
parent.upload(obj.code)
},
(err) => {
this.isSuccess = false;
this.message=JSON.parse(err._body).msg;
this.isShow = true;
let timeoutId = setTimeout(() => {
this.isShow = false;
}, 5000);
},
() => console.log("")
);
} else {
this.busy = this.http.put('http://levelskw.com/products/'+this.currentCode, JSON.stringify(obj), options).subscribe(
(data: any) => {
this.isSuccess = true;
this.message="Success";
parent.upload(this.currentCode);
},
(err) =>{
this.isSuccess = false;
this.message=JSON.parse(err._body).msg;
this.isShow = true;
let timeoutId = setTimeout(() => {
this.isShow = false;
}, 5000);
},
() => console.log("")
);
}
console.log(JSON.stringify(obj));
}
ngOnDestroy() {
this.isFormDirty = false;
this.companiesSubscription.unsubscribe();
this.finishesSubscription.unsubscribe();
this.lightSourcesSubscription.unsubscribe();
}
changeFinish(finish) {
this.product.finish = finish;
console.log(this.product);
}
makeFileRequest(url:string) {
return new Promise((resolve, reject) => {
let mainImageEl: HTMLInputElement = this.mainImage.nativeElement;
let formData = new FormData();
let xhr = new XMLHttpRequest();
if (mainImageEl.files.length > 0)
formData.append("normalImagePath", mainImageEl.files.item(0), mainImageEl.files.item(0).name);
let diemsnionsEl: HTMLInputElement = this.diemsnions.nativeElement;
if (diemsnionsEl.files.length > 0)
formData.append("detailsImagePath", diemsnionsEl.files.item(0), diemsnionsEl.files.item(0).name);
let effectsEl: HTMLInputElement = this.effects.nativeElement;
if (effectsEl.files.length > 0)
formData.append("effictImagePath", effectsEl.files.item(0), effectsEl.files.item(0).name);
let pdfEl: HTMLInputElement = this.pdf.nativeElement;
if (pdfEl.files.length > 0)
formData.append("catalogPath", pdfEl.files.item(0), pdfEl.files.item(0).name);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.response));
} else {
reject(xhr.response);
}
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Authorization", JSON.parse(localStorage.getItem('currentUser'))['token']);
xhr.send(formData);
});
}
upload(code: string) {
this.busy = this.makeFileRequest("http://levelskw.com/products/upload/"+code).then((result) => {
this.isShow = true;
let timeoutId = setTimeout(() => {
this.isShow = false;
}, 5000);
}, (error) => {
this.isShow = true;
let timeoutId = setTimeout(() => {
this.isShow = false;
}, 5000);
});
}
cancel() {
this.router.navigate(['/admin/products']);
}
openDialog() {
this.showPopUp=true;
this.discardDialog.show();
}
takePopUpEvent(isPopUpValueConfermed:boolean){
this.popUpresult = isPopUpValueConfermed;
if(this.popUpresult){
this.cancel() ;
}else{
this.showPopUp=false;
}
}
onChange(form:NgForm){
console.log(form);
this.isFormDirty = true;
}
}
my HTML code products-form.component.html :
<app-popup [isShow]="isShow" [message]="message" [isSuccess]="isSuccess"></app-popup>
<div [ngBusy]="busy"></div>
<div class="main-container">
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<app-discard-pop-up [showPopUp]="showPopUp" [popUpTitle]="discardPopUpTitle" [popUpContent]="discardPopUpContent" (isConfermed)="takePopUpEvent($event)" ></app-discard-pop-up>
<div fxLayout="column" fxLayoutGap="15px">
<div fxLayout="row" fxLayoutGap="29px">
<div fxLayout="column" fxLayoutGap="20px">
<div fxLayout="column" class='titleSection'>
<div class="header"><div class='header-label'>Header</div></div>
<div class='title'><input type="text" placeholder="Code" name="code" [(ngModel)]="product.code" (ngModelChange)="onChange(f)" /></div>
<div class='title'><input type="text" placeholder="Name" name="name" [(ngModel)]="product.name" (ngModelChange)="onChange(f)" /></div>
<div class="description"><textarea placeholder="Description" name="description" [(ngModel)]="product.description" (ngModelChange)="onChange(f)" ></textarea></div>
</div>
<div fxLayout="column" class="loadSection">
<div class="header"><div class='header-label'>Files</div></div>
<div fxLayout="column" class="img-section" fxLayoutGap="2px">
<div class="img-lable">Main image</div>
<div class="img-btn">
<button fxLayoutAlign="center center">Upload</button>
<img class="img-view" [src]="product.normalImagePath" />
<input type="file" (change)="readUrl($event,'normalImagePath')" #mainImage (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column" class="img-section" fxLayoutGap="2px">
<div class="img-lable">Dimensions</div>
<div class="img-btn">
<button fxLayoutAlign="center center">Upload</button>
<img class="img-view" [src]="product.detailsImagePath" />
<input type="file" (change)="readUrl($event,'detailsImagePath')" #diemsnions (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column" class="img-section" fxLayoutGap="2px">
<div class="img-lable">Effects</div>
<div class="img-btn">
<button fxLayoutAlign="center center">Upload</button>
<img class="img-view" [src]="product.effictImagePath" />
<input type="file" (change)="readUrl($event,'effictImagePath')" #effects (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column" class="img-section" fxLayoutGap="2px">
<div class="img-lable">PDF</div>
<div class="img-btn">
<button fxLayoutAlign="center center">Upload</button>
<img class="img-view" src="../../../../assets/Icons/pdf.png" />
<input type="file" #pdf (ngModelChange)="onChange(f)" />
</div>
</div>
</div>
</div>
<div fxLayout="column" class="details" fxLayoutGap="10px">
<div class="header"><div class='header-label'>Related Products</div></div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Category</div>
<select class="dropdown" name="categories" [(ngModel)]="selectedCategory" (ngModelChange)="onChange(f)" >
<option *ngFor="let category of categories" [ngValue]="category">{{category}}</option>
</select>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Manufactured By</div>
<select class="dropdown" name="productionCompany" [(ngModel)]="selectedProductionCompany" (ngModelChange)="onChange(f)" >
<option *ngFor="let company of companies" [ngValue]="company">{{company}}</option>
</select>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Materials</div>
<select class="dropdown" name="finish" [(ngModel)]="selectedFinish" (ngModelChange)="onChange(f)" >
<option *ngFor="let finish of finishes" [ngValue]="finish">{{finish}}</option>
</select>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Transformer needed</div>
<select class="dropdown" name="transformerNeeded" [(ngModel)]="selectedTransformerNeeded" (ngModelChange)="onChange(f)" >
<option value="true" selected>Yes</option>
<option value="false" >No</option>
</select>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Power(W)</div>
<input type="number" name="power" [(ngModel)]="product.power" (ngModelChange)="onChange(f)"/>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>CCT(K)</div>
<div fxLayout="row">
<input type="number" name="cct" [(ngModel)]="product.cct" #cct="ngModel" number (ngModelChange)="onChange(f)" />
<div class="validation-error-message"> <p *ngIf="cct.errors?.number" color:red> CCT should be number</p></div>
</div>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>IK</div>
<input type="number" name="ik" [(ngModel)]="product.ik" (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Index of protection</div>
<input type="number" name="ip" [(ngModel)]="product.ip" (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Luminous</div>
<input type="number" name="luminous" [(ngModel)]="product.luminous" (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Optic</div>
<input type="number" name="optic" [(ngModel)]="product.optic" (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>CRI</div>
<input type="number" name="cri" [(ngModel)]="product.cri" (ngModelChange)="onChange(f)" />
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Light Source</div>
<select class="dropdown" name="lightSource" [(ngModel)]="selectedLightSource" (ngModelChange)="onChange(f)" >
<option *ngFor="let lightSource of lightSources" [ngValue]="formatStrings(lightSource)" >{{lightSource}}</option>
</select>
</div>
</div>
<div fxLayout="column">
<div class="item-cont">
<div class='lable'>Production country</div>
<select class="dropdown" name="productionContry" [(ngModel)]="selectedCountry" (ngModelChange)="onChange(f)" >
<option *ngFor="let company of countries" [ngValue]="formatStrings(company)" >{{company}}</option>
</select>
</div>
</div>
</div>
</div>
<div class='control-btn-container'>
<div fxLayout="row" fxLayoutGap="10px">
<button class="btn cancel" fxLayoutAlign="center center" (click)="cancel()">Cancel</button>
<button type="submit" class="btn save" fxLayoutAlign="center center" >Save</button>
</div>
</div>
</div>
</form>
</div>
i use spring boot in the backend.
ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
at y (vendor.600ff6e….bundle.js:781)
at Z (vendor.600ff6e….bundle.js:218)
at t.compileModuleAndAllComponentsAsync (vendor.600ff6e….bundle.js:365)
at vendor.600ff6e….bundle.js:521
at t.invoke (vendor.600ff6e….bundle.js:781)
at Object.onInvoke (vendor.600ff6e….bundle.js:365)
at t.invoke (vendor.600ff6e….bundle.js:781)
at e.run (vendor.600ff6e….bundle.js:781)
at vendor.600ff6e….bundle.js:781
at t.invokeTask (vendor.600ff6e….bundle.js:781)
at Object.onInvokeTask (vendor.600ff6e….bundle.js:365)
at t.invokeTask (vendor.600ff6e….bundle.js:781)
at e.runTask (vendor.600ff6e….bundle.js:781)
at s (vendor.600ff6e….bundle.js:781)
at HTMLFormElement.invoke (vendor.600ff6e….bundle.js:781)
at y (vendor.600ff6e….bundle.js:781)
at Z (vendor.600ff6e….bundle.js:218)
at t.compileModuleAndAllComponentsAsync (vendor.600ff6e….bundle.js:365)
at vendor.600ff6e….bundle.js:521
at t.invoke (vendor.600ff6e….bundle.js:781)
at Object.onInvoke (vendor.600ff6e….bundle.js:365)
at t.invoke (vendor.600ff6e….bundle.js:781)
at e.run (vendor.600ff6e….bundle.js:781)
at vendor.600ff6e….bundle.js:781
at t.invokeTask (vendor.600ff6e….bundle.js:781)
at Object.onInvokeTask (vendor.600ff6e….bundle.js:365)
at t.invokeTask (vendor.600ff6e….bundle.js:781)
at e.runTask (vendor.600ff6e….bundle.js:781)
at s (vendor.600ff6e….bundle.js:781)
at HTMLFormElement.invoke (vendor.600ff6e….bundle.js:781)
at y (vendor.600ff6e….bundle.js:781)
at p (vendor.600ff6e….bundle.js:781)
at vendor.600ff6e….bundle.js:781
at t.invokeTask (vendor.600ff6e….bundle.js:781)
at Object.onInvokeTask (vendor.600ff6e….bundle.js:365)
at t.invokeTask (vendor.600ff6e….bundle.js:781)
at e.runTask (vendor.600ff6e….bundle.js:781)
at s (vendor.600ff6e….bundle.js:781)
at HTMLFormElement.invoke (vendor.600ff6e….bundle.js:781)