I am learning a MEAN Stack course. I can successfully add new data and fletch data but when I trying to DELETE data then the problem is occurring. error is saying DELETE http://localhost:3200/posts/5e831685bf7c02d96057db9e 404 (Not Found). I'll provide below all the code file files please someone help me on this.

Error screenshot

I'm using on this project,
Angular, node.js | express.js, mongoDB | mongoose, angular material

if need project link here: https://drive.google.com/drive/folders/1lAsQuQNfgxJFBR1SgcetEdEbakxzSm5s?usp=sharing

app.js File

const express = require(express);

const bodyParser = require(body-parser);

const Post = require(./models/post);

const mongoose = require(mongoose);

const cors  = require(cors);



const app = express();



mongoose.connect(mongodb+srv://zee:[email protected]/node-angular?retryWrites=true&w=majority)

.then(() => {

  console.log('Connected to the Database');

})

.catch(() => {

  console.log('Connection failed!');

});



app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended: false}));



app.use(cors());



app.use((req, res, next) => {

  res.setHeader(Access-Control-Allow-Origin, *);

  res.setHeader(

    Access-Control-Allow-Headers,

    Origin, X-Requested-With, Content-Type, Accept

    );

  res.setHeader(

    Access-Control-Allow-Methods,

    GET, POST, PATCH, DELETE, OPTIONS

    );

  next();

});





app.post('/api/posts',(req, res, next) => {

  const post = new Post({

    title: req.body.title,

    content: req.body.content

  });

  post.save();

  res.status(201).json({

  message: 'Post added Succesfuly'

  });

});



app.get('/api/posts',(req, res, next) => {

  Post.find().then(documents => {

    res.status(200).json({

      message: 'Posts Succesfuly!',

      posts: documents

    });

  });

 });



app.delete('/app/posts/:id', (req, res, next) => {

  Post.deleteOne({_id: req.params.id}).then(result => {

    console.log(result);

    res.status(200).json({message: 'Post deleted!'});

  });

});



// app.delete((req, res, next) => {

//   console.log(req.params.id);

//   res.status(200).json({message: 'Post deleted!'});

// });



module.exports = app;

post.service.ts | API request File

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';

import { map } from 'rxjs/operators';





import { Post } from './post.model';



@Injectable({ providedIn: 'root' })

export class PostsService {

  private posts: Post[] = [];

  private postsUpdated = new Subject<Post[]>();



  constructor(private http: HttpClient) {}



  getPosts() {

    this.http

      .get<{ message: string; posts: any }>(

        'http://localhost:3200/api/posts'

      )

      .pipe(map((postData) => {

        return postData.posts.map(post => {

          return {

            title: post.title,

            content: post.content,

            id: post._id

          };

        });

      }))

      .subscribe(transformPosts => {

        this.posts = transformPosts;

        this.postsUpdated.next([...this.posts]);

      });

  }



  getPostUpdateListener() {

    return this.postsUpdated.asObservable();

  }



  addPost(title: string, content: string) {

    // tslint:disable-next-line: object-literal-shorthand

    const post: Post = { id: null, title: title, content: content };

    this.http

      .post<{ message: string }>('http://localhost:3200/api/posts', post)

      .subscribe((responseData) => {

        console.log(responseData.message);

        this.posts.push(post);

        this.postsUpdated.next([...this.posts]);

      });

  }

  deletePost(postId: string){

    this.http.delete('http://localhost:3200/posts/' + postId)

    .subscribe(() => {

      console.log('Deleted!');

    });

  }

}

HTML File | (post-list.component.html)

<mat-accordion multi=true *ngIf=posts.length > 0>

  <mat-expansion-panel *ngFor=let post of posts>

    <mat-expansion-panel-header>

      {{post.title}}

    </mat-expansion-panel-header>

    <p>{{post.content}}</p>

    <mat-action-row>

      <button mat-button color=primary >EDIT</button>

      <button mat-button color=warn (click)=onDelete(post.id) >DELETE</button>

    </mat-action-row>

  </mat-expansion-panel>

</mat-accordion>

<p class=mat-body-1 info-text *ngIf=posts.length <=0>No post added yet!</p>

typeScricpt File | (post-list.component.ts)

import { Component, OnInit, OnDestroy } from '@angular/core';



import { Post } from '../post.model';

import { Subscription } from 'rxjs';

import { PostsService } from '../posts.service';



@Component({

  selector: 'app-post-list',

  templateUrl: './post-list.component.html',

  styleUrls: ['./post-list.component.css'],

})



export class PostListComponent implements OnInit, OnDestroy{

// posts = [

//   {title: 'First Post', content: 'This is the first post's content'},

//   {title: 'Second Post', content: 'This is the second post's content'},

//   {title: 'Third Post', content: 'This is the third post's content'},

// ];

posts: Post[] = [];

  private postsSub: Subscription;



  constructor(public postsService: PostsService){}



  ngOnInit() {

    this.postsService.getPosts();

    this.postsSub = this.postsService.getPostUpdateListener()

      .subscribe((posts: Post[]) => {

        this.posts = posts;

      });

  }



  onDelete(postId: string){

    this.postsService.deletePost(postId);

  }



  ngOnDestroy() {

    this.postsSub.unsubscribe();

  }



}