this is the tutorial i am following to build angular app
i have followed steps exactly and even tried repeatedly.
API is not loading up and i dont understand the error with this code
the component code looks fine at a glance. However, what does the get() method look like in the apiService?
If you remove the : any[] part, you probably will get an error on line 14, where you try to assign what data is infered as to products, which is an array of “something”.
here is the api.service.ts file
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private SERVER_URL = 'http://localhost:3000';
constructor(private httpClient: HttpClient) { }
public get() {
return this.httpClient.get(this.SERVER_URL);
}
}I don’t know anything about Angular so I can’t really help.
But when following articles/tutorials you have to use the same versions of the packages used. That is unless you are willing to learn about older and newer versions and make the changes needed to migrate between versions. One option might be to write it using the correct versions first and then try to do a migration. At least that way you know the code works before the migration.
https://update.angular.io/?v=8.0-10.0
Again, it might not be related to versions but I also wouldn’t expect going from 8 to 10 in major versions to be totally painless.
this tutorial version is in 8 and angualr updated to 10. Updated many parts and versions according to the requirement. Only got error here
So I believe the issue sits with how your get() method uses whatever default types are provided by the httpClient.get() call. It has multiple overloads, which is why the error your seeing seem so difficult to read.
None of them support your any[] array later, hence your getting the lint error you see now.
The usual way I fix this is to setup your service with a return type. So for example, this should work:
public get() {
return this.httpClient.get<any[]>(this.SERVER_URL);
}
This way the type will match with the subscribe later, and should also match with the this.products = data line aswell.
Here’s the list of overloads as a reference.
this fixed overload error but the API is still not loading up and i added the any[] array into the code
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
products = [];
constructor(private apiService: ApiService) { }
ngOnInit() {
this.apiService.get().subscribe((data: any[]) => {
console.log(data);
this.products = data;
});
}
}
on the line this.products=data;
Type ‘any’ is not assignable to type ‘never’.
Type ‘any’ is not assignable to type ‘never’.ts(2322)
this is the error i got in home .component.ts file
I’d try to change the products = [] line to be more “generic”:
products: any[] = [];
This should fix your problem.
The overall issues your are facing are due to inconsistent types, so far mainly due to the types you are using not lining up or not being defined. Its specifically TypeScript getting confused, and not Angular.
I recommend brushing up on TypeScript with the docs:
Angular uses TS, and requires a solid knowledge of how to deal with these errors and problems. Its possible your seeing more errors than the tutorial due to different settings/environments, which is one reason why I’m not a big fan of tutorials. Regardless, its good to know how to work around the problems you do face so you can continue along with the tutorial. The fact your running into issues might seem like an inconvenience, but your bound to run into them eventually anyways!
Good luck, keep building, keep learning 
compiled successfully but the server is not loading
server 404 error --rules cannot be fetched and in json-server page i get undefined for get method
That 404 error could be any number of things at this point.
I did try to change the fetch to /products. The result is same and can you please suggest me how can i change the path from custom routes to the products.
here is the github link to the repository. Please have a look
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
