Блог

Я создаю свое первое приложение MEAN stack, которое представляет собой систему управления контентом блога, созданную мной для себя. Мое приложение работает на Heroku. Я могу добавлять сообщения в блог и путешествовать по разным маршрутам в приложении. Однако мой маршрут PageNotFoundComponent в Angular не работает на Heroku, когда я ввожу недопустимый URL-адрес. Он работал в разработке. Я не знаю, нужно ли мне что-то делать на бэкэнде, чтобы это сработало, или что я делаю не так. Ниже я покажу файлы, которые, по моему мнению, имеют отношение к делу. Дайте мне знать, если потребуется какая-либо другая информация.

приложение-маршрутизация.модули.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes, RouterModule } from '@angular/router'; import { AllPostsComponent } from '../all-posts/all-posts.component'; import { PageNotFoundComponent } from '../page-not-found/page-not-found.component'; import { IndividualPostComponent } from '../individual-post/individual-post.component'; import { AboutComponent } from '../about/about.component'; import { AdminLoginComponent } from '../admin-login/admin-login.component'; import { AdminEditAllComponent } from '../admin-edit-all/admin-edit-all.component'; import { AdminEditSinglePostComponent } from '../admin-edit-single-post/admin-edit-single-post.component'; import { AdminAddPostComponent } from '../admin-add-post/admin-add-post.component';  const routes: Routes = [  {path: 'posts', component: AllPostsComponent},  {path: 'posts/:id', component: IndividualPostComponent},  {path: 'about', component: AboutComponent},  {path: 'admin/login', component: AdminLoginComponent},  {path: 'admin/edit', component: AdminEditAllComponent},  {path: 'admin/edit/:id', component: AdminEditSinglePostComponent},  {path: 'admin/add', component: AdminAddPostComponent },  {path: '', redirectTo: '/posts', pathMatch: 'full'},  {path: '**', component: PageNotFoundComponent} ];  @NgModule({  declarations: [],  imports: [  CommonModule,  RouterModule.forRoot(routes)  ],  exports: [RouterModule] }) export class AppRoutingModule { }  

app.js

 const express = require('express'); const app = express(); const path = require('path'); const fs = require('fs/promises'); require('../app_api/models/db'); const PORT = process.env.PORT || 3000;  const apiRouter = require('../app_api/routes/index');  const angularBuildPath = path.join(__dirname, '../weightblog', 'build');  app.use(express.json()); app.use(express.urlencoded({extended: false})); app.use(express.static(angularBuildPath)); app.use('/api', (req,res,next) =gt; {  res.header('Access-Control-Allow-Origin', 'myHerokuApp.herokuapp.com/api/posts'); //fake heroku app name added here for confidentiality  res.header('Access-Control-Allow-Origin', 'http://localhost:4200');  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');  next(); }); app.use('/api', apiRouter);  app.listen(PORT, () =gt; console.log(`Server listening on port ${PORT}`));