Throughout the process of developing this application, I have consistently encountered the error message "[ts] ',' expected". Interestingly, adding a comma resolves the issue temporarily, allowing the application to run. However, upon stopping the local server and attempting to run it again, I am required to remove the comma for the app to function properly. As a beginner in learning Angular, I am puzzled by this recurring problem and seek guidance on what I may be doing wrong.
Error Message
ERROR in src/app/breeds/breeds.component.ts(35,5): error TS1005: ','
expected.
src/app/newbreed/newbreed.component.ts(41,10): error TS1128: Declaration
or statement expected.
src/app/newbreed/newbreed.component.ts(45,1): error TS1128: Declaration
or statement expected.
Code
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { element } from 'protractor';
import {RequestOptions, Request, RequestMethod} from '@angular/http';
@Component({
selector: 'app-breeds',
templateUrl: './breeds.component.html',
styleUrls: ['./breeds.component.css']
})
export class BreedsComponent implements OnInit {
restItems: any;
restItemsUrl = 'https://breeds-a648.restdb.io/rest/dogs';
constructor(private http: HttpClient) {};
ngOnInit() {
this.getRestItems();
}
// Read all REST Items
getRestItems(){
this.restItemsServiceGetRestItems()
.subscribe(
restItems => {
this.restItems = restItems;
},
(err) => console.log(err), () => {
setTimeout(() => {
this.getImages();
this.deleteBreed();
},0)
}
} <<<<<<< This is where it expects ","
getImages() {
let breedName = document.querySelectorAll('#breedName');
breedName.forEach( (el) => {
let image = document.createElement('IMG');
this.http.get(`https://pixabay.com/api/?key=&q=${el.innerHTML}&image_type=photo`).subscribe(
res => {
image.src = res.hits[0].largeImageURL;
image.width = '100';
image.height = '100';
el.appendChild(document.createElement('br'));
el.appendChild(image);
},
err => {
alert("Error occurred");
}
);
})
}
deleteBreed() {
let deleteLinks = document.querySelectorAll('.del');
deleteLinks.forEach( (e) => {
e.addEventListener('click', (element) => {
this.http.delete('https://breeds-a648.restdb.io/rest/dogs' + '/' + element.target.id, { headers: new HttpHeaders()
.set("x-apikey", "")
.set("Content-Type", "application/json")
.set('cache-control', 'no-cache') })
.subscribe(
res => {
window.location.href = '/index';
},
err => {
alert("Error occurred");
}
);
})
})
}
// Rest Items Service: Read all REST Items
restItemsServiceGetRestItems() {
const headers = new HttpHeaders()
.set("x-apikey", "")
.set("Content-Type", "application/json")
.set('cache-control', 'no-cache');
return this.http
.get<any[]>(this.restItemsUrl,{headers})
.pipe(map(data => data));
}
}