tomcat的角度部署问题答案

【问题标题】：angular Deployment issue with tomcattomcat的角度部署问题
【发布时间】：2021-11-21 12:19:35
【问题描述】：

我在使用 Angular 6 在 tomcat 上部署应用程序时遇到了一些问题

我有 Base href = /login/

当我转到如下所示的任何页面时，忘记 routerlink 它可以工作，但是当我刷新或直接打开 http:localhost:8088/login/forget 时它不会显示此页面其显示服务问题，如 2 图像

这是重新加载页面后

在开发模式下一切正常，没有任何错误

我用来部署应用程序的步骤

1.ng build --prod --base-href /login/
复制 dist 文件夹文件
转到 Apache Software Foundation\Tomcat 8.5\webapps\ 并创建登录文件夹
将所有dist文件夹文件粘贴到tomcat登录文件夹中，如下图所示
启动 tomcat 服务器

【问题讨论】：

Angular2 routing / deep linking not working with Apache 404的可能重复
@BearNithi 我不是在谈论图像问题我在重新加载页面时遇到问题它不起作用
@FatemeFazli 你能帮帮我吗
根据上面的链接你添加了.htaccess文件吗？
@FatemeFazli 我试过但它不起作用

标签： angular typescript tomcat angular-ui-router

【解决方案1】：

我在“app.module.ts”中使用它（查看我得到一些帮助的链接：“https://medium.com/tinywave/angular-6-404-error-during-refresh-after-已部署-8cec7140b584")

import { HashLocationStrategy, LocationStrategy  } from '@angular/common';

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

在导入之后，站点运行良好并调用了 spring 服务，但是，我在同一页面中重新加载了 CRUD，并且有同样的事情。

【讨论】：

【解决方案2】：

只需复制所有这些文件并将它们粘贴到tomcat的/webapps文件夹下的/angular文件夹中。

复制后，启动服务器并访问 localhost:8080/angular/index.html，应该可以看到我们的自行车应用正在运行。

=====OR=======

打开 index.html 文件，将 base-href="/angular/" 替换为 base-href="。"并重启tomcat并访问url。

或者

对于每个 script 标签，在 src 标签中添加“angular/” 例如

所有执行建议的任何更改，在浏览器中刷新页面。错误将消失。

【讨论】：

【解决方案3】：

如果没有服务器上的重定向规则，应用程序深层链接将无法工作。所有深层链接都必须由服务器重定向到应用程序index.html。

设置 tomcat 以重定向任何深层链接 -

在 server.xml 中配置 RewriteValve
在rewrite.config中写入重写规则

1.在 server.xml 中配置 RewriteValve

编辑 ~/conf/server.xml 以在 Host 部分中添加以下 Valve，如下所示 -

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

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

...
      </Host>
...

2。在rewrite.config中写重写规则

创建目录结构 - ~/conf/Catalina/localhost/ 并在其中创建 rewrite.config 文件，内容如下 -

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

设置完成后重启 tomcat 服务器，您可以点击应用程序的深层链接，该链接将路由到 Angular 应用程序内的正确组件。

您可以参考this post了解更多详情。

【讨论】：