Question

我最近更新了一个我一直致力于最新版Angular CLI（目前为beta25）的应用。使用ng服务所有路由在本地完美地工作。

然后我使用ng build --prod，压缩dist目录并将其加载到我的Web服务器（当前托管在AWS Tomcat上）。当我浏览index.html时，我使用默认路由进入“home”组件。一切都在这一点上起作用。但是，如果我刷新浏览器，我会得到一个404.此外，任何直接和深层链接导航我尝试在应用程序中的其他视图也抛出404（这是我的app.routing.ts供参考）

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { SolutionComponent } from './solution/solution.component';
import { AssetComponent } from './asset/asset.component';
import { PropertyComponent } from './property/property.component';

export const appRoutes: Routes = [
{
    path: 'home',
    component: HomeComponent
},
{
    path: 'solution',
    component: SolutionComponent
},
{
    path: 'asset',
    component: AssetComponent
},
{
    path: 'asset/:solutionId',
    component: AssetComponent
},
{
    path: 'property/:solutionId',
    component: PropertyComponent
},  
{
    path: 'property',
    component: PropertyComponent
},      
{
    path: '',
    redirectTo: '/home',        
    pathMatch: 'full'
},
];

我在其他帖子中读到这可能与PathLocationStrategy有关，而one in particular表示我需要调整我的基本href，如下所示。

<!doctype html>
<html>
<head>
  <base href="./">

我尝试使用和不使用点部署应用程序的版本，问题仍然存在。我有点难过。我读过有类似问题的人，但没有找到一个好的解决方案。我希望Angular 2社区中的某个人可以帮助阐明正在发生的事情，并让我知道如何向前发展。提前谢谢！

编辑1/15/2017：如果它对任何人都有帮助，我想回过头来强调一些我必须做的事情，以便将我的“完成的”Angular2 CLI应用程序部署到托管环境。

首先，要在AWS上启用Apache Tomcat8上的重写阀（非常标准的托管选项），我必须使用ElasticBeanstalk ebextensions功能，以便在启用Tomcat重写阀的情况下交换context.xml文件。 server-update.config 文件对我来说是这样的：

container_commands: 
  replace-config: 
    command: cp .ebextensions/context.xml /etc/tomcat8/context.xml

其次，url重写本身。可能有更优雅的方式来做到这一点，但我还没有想到，但我的 rewrite.config 目前看起来像这样：

# match requests for basic resource files and pass them through without substitution
RewriteCond %{REQUEST_URI} ^.*\.(css|js|jpg|png|ico|woff2|woff|ttf).*$
RewriteRule ^.*$ - [L]

# app-specific rules
# match app routes and redirect to index.html
RewriteCond %{REQUEST_URI} ^.*\/home.*$ [OR]
RewriteCond %{REQUEST_URI} ^.*\/solution.*$ [OR]
RewriteCond %{REQUEST_URI} ^.*\/asset.*$ [OR]
RewriteCond %{REQUEST_URI} ^.*\/property.*$
RewriteRule ^.*$ /index.html [L]

Answer 1

您需要在Web服务器上启用Html5 pushstate支持。

对于nginx，Apache和IIS以及其他Web服务器来说，这非常简单。

这是通过一组实现以下条件的重写规则来完成的：

如果请求是针对存在的文件，则将其返回
否则返回index.html

Google搜索特定网络服务器上的说明应该可以帮助您入门。

角色2 CLI应用程序在部署后抛出404错误

1 个答案: