【问题标题】：angular 4 application routing issues when deployed in cloud foundry部署在 Cloud Foundry 中时的 Angular 4 应用程序路由问题
【发布时间】：2018-11-13 12:53:09
【问题描述】：

我在这里遇到了一个独特的路由问题，我有一个 Angular 应用程序在我的本地运行良好，但是当应用程序部署到云代工厂时，路由根本不起作用（它给出 404）。

这里是路由的代码sn-p

import  { LocationStrategy,  PathLocationStrategy }  from  '@angular/common';
const  appRoutes:  Routes  =   [{
  path:   '',
  component:  PageNotFoundComponent
 },
 {
  path:   'contents',
  component:  ContentsComponent
 },
 {
  path:   'sidebar',
  component:  SidebarComponent
 }
];

我正在寻找这些：

路由条件：

没有散列的路由。
直接向浏览器输入 URL 应导航到该页面。
不应显示 404 错误。

有什么建议吗？

【问题讨论】：

您可能只需要在静态文件 buildpack 中启用 pushstate 路由。看这里->stackoverflow.com/questions/42465155/…

标签： angular angular-ui-router angular-routing cloud-foundry

【解决方案1】：

import  { LocationStrategy,  PathLocationStrategy }  from  '@angular/common';
const  appRoutes:  Routes  =   [{
  path:   '',
  redirectTo:'contents',
  pathMatch:'full'
 },
 {
  path:   'contents',
  component:  ContentsComponent
 },
 {
  path:   'sidebar',
  component:  SidebarComponent
 },
 {
  path:'**',
  component:PageNotFoundComponent
];

对于部署问题转到https://angular.io/guide/deployment

你会根据你的服务器得到一个解决方案

或通过节点服务器部署

【讨论】：

【解决方案2】：

解决方案是使用带有路由条件的 .HTACCESS 文件。将应用程序部署到 Cloud Foundry 时，使用“php_buildpack”作为 buildpack

.htaccess 文件中使用的路由条件

`重写引擎开启

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

不重写css、js和图片

RewriteCond %{REQUEST_URI} !.(?:css|js|map|jpe?g|gif|png)$ [NC]

重写规则 ^(.*)$ /index.html?path=$1 [NC,L,QSA]`

【讨论】：