在 Angular PUT 本地主机 404 中获取服务器错误未找到

Question

当我尝试 create 或 update 用户时，我收到服务器错误并且我的应用程序崩溃，我必须重新开始。这是我在浏览器端看到的错误：

这是我的 TS 文件：

import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { User, UsersService  } from '@eshop-repository/users';
import { MessageService } from 'primeng/api';
import { timer } from 'rxjs';


@Component({
  selector: 'admin-users-form',
  templateUrl: './users-form.component.html',
})
export class UsersFormComponent implements OnInit {
  form!: FormGroup;
  isSubmitted = false;
  editmode = false;
  currentUserId!: string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  countries: any;

  constructor(
    private messageService: MessageService,
    private formBuilder: FormBuilder,
    private usersService: UsersService,
    private location: Location,
    private route: ActivatedRoute,
  ) {}

  ngOnInit(): void {
    this._initUserForm();
    this._getCountries();
    this._checkEditMode();
  }

  private _initUserForm() {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      password: ['', Validators.required],
      //email: ['', [Validators.required, Validators.email]],
      email: ['', Validators.required],
      phone: ['', Validators.required],
      isAdmin: [false],
      street: [''],
      apartment: [''],
      zip: [''],
      city: [''],
      country: ['']
    });
  }

   private _getCountries() {
    this.countries = this.usersService.getCountries();
   }

  private _addUser(user: User) {
    this.usersService.createUser(user).subscribe(
      (user: User) => {
        this.messageService.add({
          severity: 'success',
          summary: 'Success',
          detail: `User ${user.name} is created!`
        });
        timer(2000)
          .toPromise()
          .then(() => {
            this.location.back();
          });
      },
      () => {
        this.messageService.add({
          severity: 'error',
          summary: 'Error',
          detail: 'User is not created!'
        });
      }
    );
  }

  private _updateUser(user: User) {
    this.usersService.updateUser(user).subscribe(
      () => {
        this.messageService.add({
          severity: 'success',
          summary: 'Success',
          detail: 'User is updated!'
        });
        timer(2000)
          .toPromise()
          .then(() => {
            this.location.back();
          });
      },
      () => {
        this.messageService.add({
          severity: 'error',
          summary: 'Error',
          detail: 'User is not updated!'
        });
      }
    );
  }

  private _checkEditMode() {
    this.route.params.subscribe((params) => {
      if (params['id']) {
        this.editmode = true;
        this.currentUserId = params['id'];
        this.usersService.getUser(params['id']).subscribe((user) => {
          this.form.controls['name'].setValue(user.name);
          this.form.controls['email'].setValue(user.email);
          this.form.controls['phone'].setValue(user.phone);
          this.form.controls['isAdmin'].setValue(user.isAdmin);
          this.form.controls['street'].setValue(user.street);
          this.form.controls['apartment'].setValue(user.apartment);
          this.form.controls['zip'].setValue(user.zip);
          this.form.controls['city'].setValue(user.city);
          this.form.controls['country'].setValue(user.country);

          this.form.controls['password'].setValidators([]);
          this.form.controls['password'].updateValueAndValidity();
        });
      }
    });
  }

  onSubmit() {
    this.isSubmitted = true;
    if (this.form.invalid) {
      return;
    }
    const user: User = {
      id: this.currentUserId,
      name:  this.form.controls['name'].value,
      email:  this.form.controls['email'].value,
      password:  this.form.controls['password'].value,
      phone:  this.form.controls['phone'].value,
      isAdmin:  this.form.controls['isAdmin'].value,
      street:  this.form.controls['street'].value,
      apartment:  this.form.controls['apartment'].value,
      zip:  this.form.controls['zip'].value,
      city:  this.form.controls['city'].value,
      country:  this.form.controls['country'].value
    };
    if (this.editmode) {
      this._updateUser(user);
    } else {
      this._addUser(user);
    }
  }

  onCancle() {
    this.location.back();
  }

  get userForm() {
    return this.form.controls;
  }
}

这是我的 HTML 文件：

<p-toast></p-toast>
<div class="admin-page">
  <p-card [header]="editmode ? 'Edit User' : 'Add User'" subheader="You can add or edit users here">
    <div class="p-grid p-mb-5">
      <div class="p-col-12">
        <p-toolbar>
          <div class="p-toolbar-group-left"></div>
          <div class="p-toolbar-group-right">
            <p-button
              styleClass="p-button-primary p-mr-2"
              [label]="editmode ? 'Update' : 'Create'"
              icon="pi pi-plus"
              (click)="onSubmit()"
            ></p-button>
            <p-button
              styleClass="p-button-secondary"
              label="Cancle"
              icon="pi pi-arrow-circle-left"
              (click)="onCancle()"
            ></p-button>
          </div>
        </p-toolbar>
      </div>
    </div>
    <div class="grid">
      <div class="col-12">
        <form [formGroup]="form">
            <div class="card">

          <div class="formgrid grid">
            <div class="field col-4">
              <label for="name">Name</label>
              <input formControlName="name" id="name" type="text" pInputText />
              <small *ngIf="this.form.controls['name'].invalid && isSubmitted" class="p-error"
                >Name is required</small
              >
            </div>
            <div class="field col-4">
              <label for="email">Email</label>
              <input formControlName="email" id="email" type="text" pInputText />
              <small *ngIf="this.form.controls['email'].invalid && isSubmitted" class="p-error"
                >
                <span>*ngIf="this.form.controls['email'].errors['required']">email is required</span>
                >
                </small>
            </div>
            <div class="field col-4">
              <label for="password">Password</label>
              <input formControlName="password" id="password" type="password" pInputText />
              <small *ngIf="this.form.controls['password'].invalid && isSubmitted" class="p-error"
                >Password is required</small
              >
            </div>
            <div class="field col-4">
              <label for="phone">Phone</label><br />
              <p-inputMask
                mask="[phone]"
                formControlName="phone"
                placeholder="[phone]"
              ></p-inputMask>
              <small *ngIf="this.form.controls['phone'].invalid && isSubmitted" class="p-error"
                >phone is required</small
              >
            </div>
            <div class="field col-4">
              <label for="isAdmin">Is Admin</label><br />
              <p-inputSwitch formControlName="isAdmin"></p-inputSwitch>
            </div>
          </div>
          <div class="fluid formgrid grid">
            <div class="field col-4">
              <label for="street">Street</label>
              <input formControlName="street" id="street" type="text" pInputText />
            </div>
            <div class="field col-4">
              <label for="street">Apartment</label>
              <input formControlName="apartment" id="apartment" type="text" pInputText />
            </div>
            <div class="field col-4">
              <label for="street">Zip Code</label>
              <input formControlName="zip" id="zip" type="text" pInputText />
            </div>
            <div class="field col-4">
              <label for="city">City</label>
              <input formControlName="city" id="city" type="text" pInputText />
            </div>
            <div class="field col-4">
              <label for="country">Country</label><br />
              <p-dropdown
                [options]="countries"
                formControlName="country"
                optionLabel="name"
                optionValue="id"
                [filter]="true"
                filterBy="name"
                [showClear]="true"
                placeholder="Select a Country"
              ></p-dropdown>
            </div>
          </div>
          </div>
        </form>
      </div>
    </div>
  </p-card>
</div>

最后这是我的用户服务 TS 文件（调用路由 API 的地方）：

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from  '../models/user';
import { environment } from 'environments/environment';
import * as countriesLib from 'i18n-iso-countries';
declare const require: (arg0: string) => countriesLib.LocaleData;

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  apiURLUsers = environment.apiUrl + 'users';

   constructor(private http: HttpClient) {
   countriesLib.registerLocale(require('i18n-iso-countries/langs/en.json'));
  }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiURLUsers);
  }

  getUser(userId: string): Observable<User> {
    return this.http.get<User>(`${this.apiURLUsers}/${userId}`);
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiURLUsers, user);
  }

  updateUser(user: User): Observable<User> {
    return this.http.put<User>(`${this.apiURLUsers}/${user.id}`, user);
  }

  deleteUser(userId: string): Observable<any> {
    return this.http.delete<any>(`${this.apiURLUsers}/${userId}`);
  }

  getUsersCount(): Observable<number> {
    return this.http
      .get<number>(`${this.apiURLUsers}/get/count`)
      .pipe(map((objectValue: any) => objectValue.userCount));
  }

  getCountries(): { id: string; name: string }[] {
    return Object.entries(countriesLib.getNames('en', { select: 'official' })).map((entry) => {
      return {
        id: entry[0],
        name: entry[1]
      };
    });
  }

  getCountry(countryKey: string): string {
    return countriesLib.getName(countryKey, 'en');
  }

}

任何帮助将不胜感激。