不从根路径调用Angular应用程序

Question

我创建了一个简单的Angular应用，其中包含一些路由。现在，我从浏览器中调用它：

http://127.0.0.1:8000/products_whatever

要使其正常工作，据我所知，需要执行以下操作：

1. Web服务器应配置为根据请求返回index.html至任何相对URL。 Index.html，即我的Angular应用程序将检查该本地路径，确定该路径是否有效并决定要执行的操作。是吗？
2. 将本地相对路径传递到index.html的确切机制是什么？那是一些特殊的HTTP标头吗？

Answer 1

这是您的域：http://127.0.0.1，我认为这是用于本地开发。

本地发展

如果使用Angular CLI，运行ng serve将为您启动开发服务器（您无需配置任何内容），并可通过http://localhost:4200/或http://127.0.0.1:4200进行访问。我相信http://localhost默认是http://127.0.0.1的代理，而:4200是Angular将使用的默认端口。

直接回答您的问题，以使http://127.0.0.1:8000/products_whatever正常工作。您必须将默认端口更改为:8000，可以通过更改angular.json文件中的配置或通过传递命令行参数ng serve --port 8000来实现。

您还需要在角度应用程序中设置一条将products_whatever映射到组件的路线。

角度路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SomeComponent } from './some.component';

export const routes: Routes = [
  {
    path: 'products_whatever',
    component: SomeComponent,
  }
];

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

生产

对于生产来说，故事是不同的。很大程度上取决于要从哪个服务器提供文件（Apache，nginx等），服务器将决定需要执行的操作。

您可能必须将服务器配置为将所有请求重新路由到index.html文件，并且Angular将处理路由。

在官方文档中找到有关routing的更多信息。