部署后Angular 2 CLI App会引发404错误 [英] Angular 2 CLI App throwing 404 errors once deployed
问题描述
我最近将一个正在开发的应用程序更新为最新版本的Angular CLI(当前为beta25).使用ng服务，所有路由都可以在本地完美运行.
I recently updated an app I've been working on to latest version of Angular CLI (currently beta25). Using ng serve all routing works perfectly locally.
然后我使用ng build --prod，压缩dist目录并将其加载到我的Web服务器(当前托管在AWS Tomcat上).当我浏览index.html时，我正在使用默认路由放入家庭"组件.一切正常.但是，如果刷新浏览器，则会得到一个404.此外，我尝试对应用程序中的其他视图进行任何直接和深层链接导航时也会抛出404(这是我的app.routing.ts供参考)
I then use ng build --prod, zip up the dist directory and load it to my web server (currently hosted on AWS Tomcat). When I navigate index.html, I'm using a default route to drop into a "home" component. Everything works to that point. If I refresh the browser, however, I get a 404. Additionally any direct and deep link navigation I attempt to other views in the app throw 404 as well (Here is my app.routing.ts for reference)
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有关，并且
I've read in other posts that this may be related to PathLocationStrategy, and one in particular indicated that I needed to adjust my base href as follows.
<!doctype html>
<html>
<head>
<base href="./">
我尝试部署带有和不带有圆点的应用程序版本，问题仍然存在.我有点难过.我读到有类似问题的人，但没有找到记录好的解决方案.我希望Angular 2社区中的某个人可以帮助您了解正在发生的事情，并为我提供一个前进的方向的想法.预先感谢！
I've tried deploying versions of the app with and without the dot and the issue still persists. I'm kind of stumped. I read about folks having similar issues but haven't found a good solution documented. I'm hopeful that someone in the Angular 2 community might help shed some light on what's happening and give me an idea on how to move forward. Thanks in advance!
编辑1/15/2017: 万一它对任何人都有用，我想回过头来，重点介绍将完成的" Angular2 CLI应用程序部署到托管环境所要做的几件事.
EDIT 1/15/2017: In case it's helpful for anyone, I wanted to circle back and highlight a couple of things I had to do to deploy my "finished" Angular2 CLI application to a hosted environment.
首先，要在AWS上的Apache Tomcat8上打开重写阀(漂亮的标准托管选项)，我必须使用ElasticBeanstalk ebextensions功能才能在启用了Tomcat重写阀的情况下交换context.xml文件. server-update.config 文件对我来说是这样的:
First, to turn on the Rewrite Valve on Apache Tomcat8 on AWS (pretty standard hosting option) I had to use the ElasticBeanstalk ebextensions feature in order to swap in a context.xml file with the Tomcat rewrite valve enabled. The server-update.config file looked like this for me:
container_commands:
replace-config:
command: cp .ebextensions/context.xml /etc/tomcat8/context.xml
第二，URL重写自身.可能还没有一种更优雅的方法可以实现，但我的 rewrite.config 当前看起来像这样:
Second, the url rewrite itself. there may be a more elegant way to do this that hasn't occurred to me yet, but my rewrite.config currently looks like this:
# 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]
推荐答案
您需要在Web服务器上启用Html5 pushstate支持.
You need to enable Html5 pushstate support on your web server.
对于nginx，Apache和IIS以及其他Web服务器而言，这是微不足道的.
This is very trivial for nginx, Apache and IIS, as well as other web servers.
这是通过实现以下条件的一组重写规则来完成的:
This is done through a set of rewrite rules that implement the following conditions:
- 如果请求是针对存在的文件，则将其返回
- 否则返回index.html
通过Google搜索特定网络服务器上的说明，您可以开始使用.
A Google search for instructions on your specific web server should get you started.
这篇关于部署后Angular 2 CLI App会引发404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
