如何使用Angular Router注册我的Web服务？

Question

我有一个在:8000/re/myService

运行的网络服务

在我实施路由器之前，我能够.get拨打myService

致电service.ts

return await this.http
  .get('/re/myService')
  .toPromise()
  .then(response => response.json().data as MyObject[])
  .catch(this.handleError);

然而，在实施以下路由器之后。这个电话获得了404。

错误

我试图通过将路线添加到我的路线来允许路线，但它似乎无法正常工作

app.module.ts中的路由

const appRoutes: Routes = [
  { path: '', component: HomePageComponent },
  { path: 'details/:id', component: MyComponent1 },
  { path: 're/myService', redirectTo: '/re/myService', pathMatch:'full'},
  {path: '**', redirectTo: ''}
];

我的ngModule的其余部分

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
    MyComponent1,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AgGridModule.withComponents(
      [
        ]
    ),
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [AppService,AppDetailsService,{provide: APP_BASE_HREF, useValue : '/' }],
  bootstrap: [AppComponent]
})

如何将我的服务路径添加到路线中，以便我能正确使用我的服务？

Answer 1

查看错误，看起来Angular正在尝试对localhost:4200而不是localhost:8000执行调用。在get()中，在开发过程中，您需要指定完整路径或使用代理拦截/重定向。

如果你正在使用@ angular / cli，你可以利用Proxy拦截在开发模式下对特定路径的调用，并将它们重定向到指定的目标。在PRODUCTION中，您可以指定使用@ angular / cli Environments等指定服务端点的远程URL，或者如果服务器正在加载静态构建的Angular文件，则应该相应地解析。

您需要使用以下内容创建proxy.conf.json：

{
  "/re/myService": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

然后您按如下方式执行start / serve命令以指示应使用代理：

ng serve --proxy-config proxy.conf.json

希望这有帮助！