Question

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

ng serve --open

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

ng build或ng build --prod

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

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

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

可能的问题：

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

A1：在应用程序目录中使用NPM-package的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 { }

app.modude.ts 文件（ @NgModule 中的imports:）提供了

AppRoutingModule 。

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

A3：它没有。它只有用于数据模拟的模拟对象。它们被定义为分离类中的静态数据。我没有在官方网站上远离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）

1 个答案: