I have this issue with my angular code and by the way I'm using angular 13 for my application. the issue is with calling services I'm trying to call user api from the back end and all the time facing this issue. I searched a lot and try everything to make it work but without any solve. this is the code below: this is the user service:
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { JwtHelperService } from '@auth0/angular-jwt';
import { environment } from 'src/environments/environment';
import { User } from "../module/user";
@Injectable({providedIn: 'root'})
export class UserService {
public apiUrl = environment.apiUrl;
private jwtHelper = new JwtHelperService();
constructor(private http: HttpClient) {}
login(user: User): Observable<HttpResponse<User>> {
return this.http.post<User>(`${this.apiUrl}/user/login`, user, { observe: 'response'});
}
register(user: User): Observable<HttpResponse<User>> {
return this.http.post<User>(`${this.apiUrl}/user/register`, user, { observe: 'response'});
}
updateUser(formData: FormData): Observable<User> {
return this.http.post<User>(`${this.apiUrl}/user/update`, formData);
}
deleteUser(username: string): Observable<any> {
return this.http.delete<any>(`${this.apiUrl}/user/delete/${username}`);
}
addUserToCache(user: User): void {
localStorage.setItem('user', JSON.stringify(user));
}
getUserFromCache(): User {
return JSON.parse(localStorage.getItem('user'));
}
addTokenToCache(token: string): void {
localStorage.setItem('token', token);
}
getTokenFromCache(): string {
return localStorage.getItem('token');
}
logOut(): void {
localStorage.removeItem('user');
localStorage.removeItem('token');
}
getTokenExpirationDate(): Date | null {
return this.jwtHelper.getTokenExpirationDate(this.getTokenFromCache());
}
isUserLoggedIn(): boolean {
if (this.getTokenFromCache() && this.getUserFromCache() &&
this.jwtHelper.decodeToken(this.getTokenFromCache()).sub &&
!this.jwtHelper.isTokenExpired(this.getTokenFromCache())) {
return true;
} else {
this.logOut();
return false;
}
}
createUserFormData(currentUsername: string, user: User): FormData {
const formData = new FormData();
formData.append('currentUsername', currentUsername);
formData.append('username', user.username);
formData.append('email', user.email);
formData.append('role', user.role);
formData.append('isActive', JSON.stringify(user.active));
formData.append('isNonLocked', JSON.stringify(user.notLocked));
return formData;
}
}
this is the user data
export class User {
constructor(
public id = 0,
public userId = '',
public username = '',
public email = '',
public lastLoginDate = null,
public logInDateDisplay = null,
public joinDate = null,
public active = true,
public notLocked = true,
public role = '',
public authorities = []) {}
}
this is the error showed to me:
Error: src/app/role/admin/admin.component.ts:15:22 - error TS2339: Property 'getAdmin' does not exist on type 'UserService'.
15 this.userService.getAdmin().subscribe(
~~~~~~~~
Error: src/app/role/admin/admin.component.ts:16:7 - error TS7006: Parameter 'data' implicitly has an 'any' type.
16 data => {
~~~~
Error: src/app/role/admin/admin.component.ts:19:7 - error TS7006: Parameter 'err' implicitly has an 'any' type.
19 err => {
~~~
Error: src/app/service/user.service.ts:36:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
36 return JSON.parse(localStorage.getItem('user'));
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: src/app/service/user.service.ts:44:5 - error TS2322: Type 'string | null' is not assignable to type 'string'.
Type 'null' is not assignable to type 'string'.
44 return localStorage.getItem('token');
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
✔ Browser application bundle generation complete.
5 unchanged chunks
Build at: 2021-11-29T07:19:50.781Z - Hash: 1847dd9fe6fe2628 - Time: 350ms
Error: src/app/role/admin/admin.component.ts:15:22 - error TS2339: Property 'getAdmin' does not exist on type 'UserService'.
15 this.userService.getAdmin().subscribe(
~~~~~~~~
Error: src/app/role/admin/admin.component.ts:16:7 - error TS7006: Parameter 'data' implicitly has an 'any' type.
16 data => {
~~~~
Error: src/app/role/admin/admin.component.ts:19:7 - error TS7006: Parameter 'err' implicitly has an 'any' type.
19 err => {
~~~
Error: src/app/service/user.service.ts:36:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
36 return JSON.parse(localStorage.getItem('user'));
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: src/app/service/user.service.ts:44:5 - error TS2322: Type 'string | null' is not assignable to type 'string'.
Type 'null' is not assignable to type 'string'.
44 return localStorage.getItem('token');
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ Failed to compile.
getAdmin()function in the code you've provided, and this is also the first error you are getting.