Angular 5路由-通过在地址栏中输入URL进行导航以返回未找到请求的处理程序（404）

Question

我使用Angular 5与Service Stack后端通信。

我可以通过输入根地址http://127.0.0.1:8088加载我的主页，然后可以使用相关链接从那里导航到所有已定义的路线。

但是，如果我尝试手动输入路线，即http://127.0.0.1:8088/home或http://127.0.0.1:8088/searcharchive，则会得到：

找不到请求处理程序（404）：

Request.HttpMethod：GET

Request.PathInfo：/ home

Request.QueryString：Request.RawUrl：/ home

我的路由代码如下：

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'searcharchive', component: SearchArchiveComponent },
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', component: PageNotFoundComponent}    
];

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

  exports: [RouterModule]
})

HTML模板是：

 <nav>
   <a [routerLink]="['/home']">Home</a>
   <br/>
   <a [routerLink]="['/searcharchive']">Search Archive</a> 
   <br>
   <div class="container-admin-nav">
     <a [routerLink]="['/admin']">Admin Module</a>
   </div>
 </nav>

这确实令人头疼，因为我不仅不能使用地址栏导航，甚至不能做简单的事情，例如添加图像，无论我将图像放置在什么地方都无法显示。在查看开发人员工具时，我得到GEThttp://127.0.0.1:8088/logoTransparent.png404（未找到），因此我只能推测路由（再次）阻碍了某种方式。

Answer 1

我有一个类似的问题，因为我正在使用

代理配置。

Angular app是我的前端，而我有一个SpringBoot应用程序作为后端。

在我的proxy.config.json file中，我有以下内容：

{
"/**": { <-- **marked line**
  "target": {
    "host": "localhost",
    "protocol": "http:",
    "port": 8080
  },
  "secure": false,
  "logLevel": "debug"
  }
}

所以，每当我输入地址栏中的任何路由时，由于有标记的行，它都会被重新路由到我的SpringBoot应用程序中……而我不希望那样。我只是希望将服务中的后端请求重新路由到后端。

解决方案：

我将/api添加到了我的[[后端请求]]中（在我的所有服务中），然后在proxy.config.json中，我刚刚从网址中删除了/api。为此，我只是将"pathRewrite": { "^/api": "" },添加到了proxy.config.json中，现在看起来像这样：

{
"/api/**": {
  "target": {
    "host": "localhost",
    "protocol": "http:",
    "port": 8080
  },
  "pathRewrite": {
    "^/api": ""
  },
  "secure": false,
  "logLevel": "debug"
  }
}