Angular Service Issue Type string

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.

CodePudding user response：

there is no function in service called

getAdmin()

implement the function in service before invoking it.

CodePudding user response：

Try this

return localStorage.getItem('token') || '';

This will solve the tsc compiler issue only.

CodePudding user response：

it's correct, when u take element from localStorage returned type is null or string,

getItem(key: string): string | null;

and u cant parse null, before JSON.parse you must make sure item is present and u get it