Пользовательская страница 404 с использованием Angular и Express

Question

Я использую MEAN-стек и пытаюсь создать собственную страницу 404 для своего проекта с использованием Angular.

In Angular app.module.ts Я написал это:

const appRoutes: Routes = [
    {
        path: 'students',
        component: StudentComponent,
        data: {title: 'Student List'}
    },
    {
        path: 'student-details/:id',
        component: StudentDetailComponent,
        data: {title: 'Student Details'}
    },
    {
        path: 'student-create',
        component: StudentCreateComponent,
        data: {title: 'Create a new Student'}
    },
    {
        path: 'student-edit/:id',
        component: StudentEditComponent,
        data: {title: 'Edit Student'}
    },
    {
        path: '',
        redirectTo: '/students',
        pathMatch: 'full'
    },
    {
        path: '**',
        component: PageNotFoundComponent,
        data: {title: 'Page Not Found'}
    }
];

@NgModule({
    declarations: [
        AppComponent,
        StudentComponent,
        StudentDetailComponent,
        StudentCreateComponent,
        StudentEditComponent,
        PageNotFoundComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        RouterModule.forRoot(
            appRoutes,
            {enableTracing: true}
        )
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Но на самом деле я думаю, что когда я пишу URL, который не существует, Expressсделать ответ, а не угловой.Я знаю, что Express отвечает, потому что, когда я удалил этот код из server.js :

app.use(function(req, res, next) {
   var err = new Error('Not Found');
   err.status = 404;
   next(err);
});

Когда я пишу URL, который не существует, я получаю ответ " Невозможно получить /urlThatDoesntExist".
Дело в том, что другие URL-адреса маршрутизации, заданные в Angular, работают, а страница 404 - нет.

Я использую Express для обслуживания приложения Angular, используя:

app.use('/', express.static(path.join(__dirname, 'dist')));

Как настроить страницу Angular 404, работающую над Express?Спасибо!

Answer 1

Если вы хотите, чтобы каждый запрос достиг углового значения (чтобы вы могли обрабатывать 404 с на стороне клиента), вы можете использовать экспресс-маршрут, подобный этому:

//  all routes lead to to index.html
const router = express.Router();
router.get('*', (req, res) => {
  res.sendFile(path.join(DIR, 'index.html'));
});
this.express.use('*', router);