Angular 8 - изменить URL API на локальный сервер для аутентификации при входе

Question

В настоящее время я следую учебному пособию https://thinkster.io/tutorials/building-real-world-angular-2-apps/intercept-and-manipulate-http-requests, чтобы создать приложение Angular 8, в котором пользователи могут регистрироваться, создавать сообщения, просматривать глобальные сообщения, например сообщения, и следить за другими пользователями.

В учебном пособии имеется сервер API, работающий в режиме реального времени и работающий на https://conduit.productionready.io/api, для того, чтобы приложение могло отправлять запросы - это приложение предоставляет сообщения от других пользователей, использующих учебное пособие. Вот ссылка на github с клонами репозитория I и настроенными: https://github.com/gothinkster/angular-realworld-example-app#making -requests-to-backend-api

Однако, Я хочу использовать свой собственный локальный сервер (localStorage?) для тестирования моего приложения, создания пользователей и публикации сообщений. Позже я подключу этот API для связи с моим кодом Java / Spring и базой данных PostgreSQL.

Вот как выглядит мой файл environment.ts:

export const environment = {
  production: false,
  api_url: 'https://conduit.productionready.io/api'
};

И Вот как выглядит мой api.service.ts файл:

    import { Injectable } from '@angular/core';
    import { environment } from '../../../environments/environment';
    import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
    import { Observable ,  throwError } from 'rxjs';

    import { JwtService } from './jwt.service';
    import { catchError } from 'rxjs/operators';

    @Injectable()
    export class ApiService {
      constructor(
        private http: HttpClient,
        private jwtService: JwtService
      ) {}

      private formatErrors(error: any) {
        return  throwError(error.error);
      }

      get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
        return this.http.get(`${environment.api_url}${path}`, { params })
          .pipe(catchError(this.formatErrors));
      }

      put(path: string, body: Object = {}): Observable<any> {
        return this.http.put(
          `${environment.api_url}${path}`,
          JSON.stringify(body)
        ).pipe(catchError(this.formatErrors));
      }

      post(path: string, body: Object = {}): Observable<any> {
        return this.http.post(
          `${environment.api_url}${path}`,
          JSON.stringify(body)
        ).pipe(catchError(this.formatErrors));
      }

      delete(path): Observable<any> {
        return this.http.delete(
          `${environment.api_url}${path}`
        ).pipe(catchError(this.formatErrors));
      }
    }

И, просто, вот мой файл user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable ,  BehaviorSubject ,  ReplaySubject } from 'rxjs';

import { ApiService } from './api.service';
import { JwtService } from './jwt.service';
import { User } from '../models';
import { map ,  distinctUntilChanged } from 'rxjs/operators';


@Injectable()
export class UserService {
  private currentUserSubject = new BehaviorSubject<User>({} as User);
  public currentUser = this.currentUserSubject.asObservable().pipe(distinctUntilChanged());

  private isAuthenticatedSubject = new ReplaySubject<boolean>(1);
  public isAuthenticated = this.isAuthenticatedSubject.asObservable();

  constructor (
    private apiService: ApiService,
    private http: HttpClient,
    private jwtService: JwtService
  ) {}

  // Verify JWT in localstorage with server & load user's info.
  // This runs once on application startup.
  populate() {
    // If JWT detected, attempt to get & store user's info
    if (this.jwtService.getToken()) {
      this.apiService.get('/user')
      .subscribe(
        data => this.setAuth(data.user),
        err => this.purgeAuth()
      );
    } else {
      // Remove any potential remnants of previous auth states
      this.purgeAuth();
    }
  }

  setAuth(user: User) {
    // Save JWT sent from server in localstorage
    this.jwtService.saveToken(user.token);
    // Set current user data into observable
    this.currentUserSubject.next(user);
    // Set isAuthenticated to true
    this.isAuthenticatedSubject.next(true);
  }

  purgeAuth() {
    // Remove JWT from localstorage
    this.jwtService.destroyToken();
    // Set current user to an empty object
    this.currentUserSubject.next({} as User);
    // Set auth status to false
    this.isAuthenticatedSubject.next(false);
  }

  attemptAuth(type, credentials): Observable<User> {
    const route = (type === 'login') ? '/login' : '';
    return this.apiService.post('/users' + route, {user: credentials})
      .pipe(map(
      data => {
        this.setAuth(data.user);
        return data;
      }
    ));
  }

  getCurrentUser(): User {
    return this.currentUserSubject.value;
  }

  // Update the user on the server (email, pass, etc)
  update(user): Observable<User> {
    return this.apiService
    .put('/user', { user })
    .pipe(map(data => {
      // Update the currentUser observable
      this.currentUserSubject.next(data.user);
      return data.user;
    }));
  }

}

В инструкциях README.md сказано:

Если вы хотите изменить URL API на локальный сервер, просто отредактируйте src / environment / environment.ts и измените api_url на URL локального сервера (то есть localhost: 3000 / api)

Но когда я делаю это (меняю api_url: в environment.ts на 'http://localhost:4200/api') и пытаюсь создать учетную запись, страница не реагирует, и я получаю это сообщение в консоли при проверке :

POST http://localhost: 4200 / API / пользователи 404 (не найдено)

Как я могу изменить это, чтобы я мог создать и хранить пользователей с localStorage?