I'm currently working on an project with Angular/Spring. I have a problem on the Angular side. I receive a 404 not found error no matter what. If it's get, put, for an employee, a provider, no matter, it will return a 404 not found error. I need to add that I tested my endpoints in Postman, everything works fine, all of them. Here are some classes that I think would help. If you need more information and code please ask right away and I will edit it in a very short time. 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"
  }
}

Here I have a config json added at start when I run ng serve.

Proxy.conf.json:

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

Here is my employee ts file. I don't have much on it, just a getAllEmployees method that should return my employees from the back-end and display them in a 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)
    });
  }
}

Here is my employee service:

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'); }
}

And final but not least here is my app-routing:

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

Update: I also attached the project tree

I can't see why this will return a 404 not found error no matter what. I used this before on an IntelliJ project that had the Ultimate version on it and it worked, the code is not changed, only the IDE because now I'm using Visual Studio Code. There is something extra that needs to be added here in order for my project to work or is my logic at fault?

IMPORTANT: as I said, no matter what is is: employee, provider, invoice etc. All of them are returing 404 not found regarding of the type of request (get, post, delete etc).

Thank you and if this needs more resources please let me know and I will edit the post.

CodePudding user response：

Serve the application through

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

and prefix your urls with a forward slash as defined in your proxy.config.json

private url = "/server/employee/";