刷新浏览器 Angular 应用程序不工作。当我将应用程序部署到 apache tomcat 时出现 404 错误答案

【问题标题】：Refresh The browser Angular app is not working. giving 404 error when I deployed the app in to apache tomcat刷新浏览器 Angular 应用程序不工作。当我将应用程序部署到 apache tomcat 时出现 404 错误
【发布时间】：2019-02-21 09:41:13
【问题描述】：

我正在尝试弄清楚如何设置 Apache Tomcat 服务器以在页面刷新时为 Angular 应用程序提供服务。

只有当我点击时路由才会起作用，但如果手动输入路径或如果我刷新页面，那么它会给我 404 错误。

HTTP 状态 404 - 未找到

1) 使用以下方法构建 Angular 应用程序：

ng build --prod --base-href ./

2) 我还在 apache tomcat 中添加了重写规则

在 $ApacheLocation/conf/context.xml 中

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

在 $ApacheLocation/conf/server.xml 中

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

但它不适合我。

我将不胜感激。

【问题讨论】：

这只是启用 RewriteValve。除此之外，您还必须编写重定向规则以及提到的here

标签： angular tomcat angular6 production-environment

【解决方案1】：

我得到了我的问题的解决方案，我解决了这个问题。

这是我如何解决问题的步骤。

1）在我的angular src文件夹中创建了“WEB-INF/web.xml”，路径如下

Your_Folder/src/WEB-INF/web.xml

2) 在web.xml 中，我添加了以下几行，

<web-app> 
    <error-page> 
        <error-code>404</error-code> 
        <location>/index.html</location> 
    </error-page> 
</web-app>

3) 将外部文件夹添加到angular.json，以便在构建应用程序时可以将其添加到 dist 文件夹中，

在 angular.json 中

"assets": [ "src/assets","src/favicon.ico","src/WEB-INF" ]

4) 使用以下命令构建应用程序，

ng build --prod --base-href=/myApp/

5) 将 dist 文件夹重命名为 base-href 名称

6) 复制dist 或base-href 文件夹并粘贴到

apache-tomcat-8.5.37/webapps

7) 启动 tomcat，您的应用程序将运行，即使在刷新浏览器后也是如此。

【讨论】：

步骤 1,2,3 为我做了。我们使用了多种 prop 文件和不同的部署策略，因此其余步骤略有不同。
@JacobBarnes 是的，您是对的，其余步骤取决于。

【解决方案2】：

我不是 Apache 的专家，但这是我发现的。向.htaccess文件添加重写规则，如图所示

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

【讨论】：

感谢您的回复，但我已经尝试过了，仍然没有成功。

【解决方案3】：

我也有同样的问题。让我说说我是如何解决这个问题的。

在您的项目文件夹中创建 WEB-INF 文件夹。并创建 rewrite.config 文件。

/WEB-INF/rewrite.config

RewriteCond %{SERVLET_PATH} !-f
RewriteRule ^/(.*)$ /index.html [L]

【讨论】：

刚刚我尝试了您的解决方案，但仍然面临同样的问题...您能否简要介绍一下您做了什么。
我的WEB-INF文件夹路径是“apache-tomcat-8.5.37/webapps/WEB-INF/rewrite.config”。
让我们尝试构建没有基础 href ng build --prod 的应用程序
不会提供没有 base-href 的页面。

【解决方案4】：

您刚刚在 server.xml 中配置了 RewriteValve。除此之外，您还需要在 rewrite.config 中编写重写规则。

rewrite.config -

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html

上面的规则是告诉tomcat将任何请求（深度链接请求）重定向到应用程序的index.html。从这里角度将接管并路由到要显示的正确组件。

我建议将应用程序托管在 tomcat 上的单独上下文路径中，而不是在根目录中。此博客所需的配置详细说明 - Fixing deep linking issue – Deploying angular application on Tomcat server

【讨论】：

有什么问题？如果您是 root 用户，您应该能够创建该文件
我想我的问题是 server.xml 中添加的 RewriteValve 不适用于我的应用程序。我必须在 META-INF 中添加 context.xml 并在那里定义阀门。然后它起作用了。我还使用了一些不同的重写逻辑，如stackoverflow.com/a/47919953/1278890 所述

【解决方案5】：

您可以在 app.module.ts 中使用 HashLocationStrategy，如下所示

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],

通过使用哈希定位策略，您的应用程序上下文和路由将由哈希（#）分隔，如http://localhost:4200/myapp/#/route。

这样 404 错误将得到解决。我们也有 PathLocationStrategy 但我无法让它工作。

【讨论】：