Angular 404 未找到关于目标 URL

Question

我目前正在与 Angular/Spring 合作一个项目。我在 Angular 方面有问题。无论如何，我都会收到 404 not found 错误。如果它是获取，放置，对于员工，提供者，无论如何，它都会 return 404 not found 错误。我需要补充一点，我在 Postman 中测试了我的端点，一切正常，所有这些。以下是一些我认为会有所帮助的类。如果您需要更多信息和代码，请立即询问，我会在很短的时间内进行编辑。 Package.json:

{
  "name": "csmart-front-end",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/localize": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@popperjs/core": "^2.10.2",
    "bootstrap": "^5.1.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.6",
    "@angular/cli": "~13.3.6",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }
}

这里我有一个配置 json 在我运行 ng serve 开始时添加。

Proxy.conf.json:

{
  "/server": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/server": ""
    }
  }
}

这是我的员工 ts 文件。我没有太多关于它的内容，只是一个 getAllEmployees 方法，它应该 return 来自后端的我的员工并将他们显示在 table:

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from 'src/app/service/employee.service';
import { Employee } from "../../interface/employee";

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit
{
  employeeList: Employee[] = [];

  constructor(public employeeService: EmployeeService) { }

  ngOnInit(): void
  {
    this.employeeService.getAllEmployees().subscribe({
      next: employees => this.employeeList = employees,
      error: err => console.error(err)
    });
  }
}

这是我的员工服务：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from "../interface/employee";

@Injectable({
  providedIn: 'root'
})
export class EmployeeService
{
  private url = "server/employee/";

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':'application/json'
    })
  }

  constructor(private httpClient:HttpClient) { }

  getAllEmployees():Observable<Employee[]> { return this.httpClient.get<Employee[]>(this.url+'find/all'); }
}

最后但并非最不重要的是我的应用程序路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './component/home/home.component';
import { EmployeeNewComponent } from './component/employee-new/employee-new.component';
import { EmployeeComponent } from './component/employee/employee.component';
import { EmployeeUpdateComponent } from './component/employee-update/employee-update.component';
import {ProviderComponent} from "./component/provider/provider.component";
import {ProviderNewComponent} from "./component/provider-new/provider-new.component";
import {ProviderUpdate} from "./component/provider-update/provider-update.component";
import {InvoiceinComponent} from "./component/invoicein/invoicein.component";

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },
  {
    path:'employees',
    component:EmployeeComponent
  },
  {
    path:'newEmployee',
    component:EmployeeNewComponent
  },
  {
    path:'editEmployee/:employeeId',
    component:EmployeeUpdateComponent
  },

  {
    path:'invoiceIns',
    component:InvoiceinComponent
  },

  {
    path:'providers',
    component:ProviderComponent
  },
  {
    path:'newProvider',
    component:ProviderNewComponent
  },
  {
    path:'editProvider/:providerId',
    component:ProviderUpdate
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the error in browser console

更新：I also attached the project tree

我不明白为什么无论如何都会 return 404 未找到错误。我之前在一个有终极版本的 IntelliJ 项目上使用过它并且它有效，代码没有改变，只有 IDE 因为现在我正在使用 Visual Studio 代码。为了让我的项目正常工作，还是我的逻辑有问题？

这里需要添加一些额外的东西？

重要提示：正如我所说，无论是什么：员工、供应商、发票等。所有这些都返回 404 未找到关于请求类型（获取、post、删除等） .

谢谢，如果这需要更多资源，请告诉我，我将编辑 post。

Answer 1

通过

提供应用程序

ng serve --proxy-config proxy.conf.json

并在您的网址前添加正斜杠，如您的 proxy.config.json

中所定义

private url = "/server/employee/";

Angular 404 未找到关于目标 URL

Angular 404 Not Found regarding of the target URL

angular

routes

http-status-code-404