在部署项目 (ng build) 之后，无法导航到 Angular 5 应用程序中的其他页面

Question

当我使用以下命令测试我的 Angular 应用程序 (v5) 时：

ng serve --open

我可以导航到我的应用程序的任何已注册路由。当我想在构建过程后通过以下方式提供我的应用程序时：

ng build 或 ng build --prod

我在导航到任何路线后收到 404 错误。如果阅读official tutorial，项目部署应该没有任何复杂的操作。

我进行了搜索，找到了在构建命令中添加 --base-href=/ 选项的建议，但也没有成功。

我正在使用下一个 HTTP 服务器：https://www.npmjs.com/package/http-server

可能的问题给我：

Q1：你们如何为 Angular 应用提供服务？

A1: 在应用程序目录中使用 NPM 包的 http-server --cors 命令，因此 --base-href 被正确引用

Q2:你的路由配置是什么（源码）？

A2: 我的路线很简单，因为我正在学习Angular v5教程，所以不要期待什么特别的东西，源代码在下:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SalesComponent }       from './sales/sales.component';
import { ConsumersComponent }   from './consumers/consumers.component';

const routes: Routes = [
    { path: 'consumers' , component: ConsumersComponent },
    { path: 'sales', component: SalesComponent }
];

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

export class AppRoutingModule { }

AppRoutingModule在app.modude.ts文件中提供（imports:在@NgModule ).

问题 3：您的 Angular 应用程序是否依赖后端（服务器端应用程序）？

A3: 没有。它只有用于数据模拟的模拟对象。它们在分隔的 class 中被定义为静态数据。我离官方网站上的 Angular 教程还差得远。只是想用我最喜欢的微型 HTTP 服务器来提供 ng build --prod 版本。

所以，当使用 ng serve 命令时，我可以导航到其他页面，但在构建项目后我不能这样做。教程提供了描述，我可以将构建的文件作为静态文件提供给任何 HTTP 服务器，但对我来说没有成功。

我该如何解决我的问题？

谢谢

Answer 1

由于 official deployment guide.

我已经解决了我的问题

您应该配置您的 HTTP 服务器以遵循 前端控制器模式 。我用nginx服务器测试过，使用下一个配置：

server {
    listen 80 default_server;
    root /var/www/html;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ /index.html;        
    }
}

现在一切正常。

如果您使用的是 Apache 服务器，您可以对 .htaccess 文件执行相同的操作；如果 IIS 是您的 HTTP 服务器等，则可以对 web.config 文件执行相同的操作。

在部署项目 (ng build) 之后，无法导航到 Angular 5 应用程序中的其他页面

Can't navigate to other pages in Angular 5 application, after the deploying project (ng build)

deployment

routing

production

build

angular