角深链接-Apache Tomcat [英] Angular deep linking - Apache Tomcat

问题描述

我正在构建Angular应用.它以href为/hris的基础托管.因此，我访问该应用程序的基本URL为domain.com/hris.此外，我有3个不同的应用程序，其中一个称为term.因此，当我单击term链接时，它会转到domain.com/hris/term.

I'm building an Angular app. It is hosted with base a href as /hris. So my base url to access the app will be domain.com/hris. Further, I have 3 different apps of which one is called term. So when I click on the term link it goes to domain.com/hris/term.

当用户直接尝试访问链接domain.com/hris/term时，它将返回404，并显示一条消息:HTTP Status 404 - /hris/term.

When the user directly tries to access the link domain.com/hris/term, it returns 404 with a message: HTTP Status 404 - /hris/term.

我不希望出现404.如何做到这一点?

I don't want 404 to occur. How to get this done?

到目前为止我所做的:

我试图在index.html所在的文件夹中创建一个.htaccess文件.(我使用ng build --base-href=/hris/构建了Angular应用程序).我将dist文件夹部署到了名为hris的目录中的服务器上.

I tried to create a .htaccess file in the folder, where index.html resides.(I built the Angular app using ng build --base-href=/hris/). I deployed the dist folder to the server in a directory called hris.

在.htaccess文件中，我使用了以下变体，但无济于事.

In the .htaccess file I used the following variants, to no avail.

    <IfModule mod_rewrite.c>
          Options Indexes FollowSymLinks
          RewriteEngine On
          RewriteBase /hris/
          RewriteRule ^index\.html$ - [L]
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteCond %{REQUEST_FILENAME} !-d
          RewriteRule . index.html [L]
    </IfModule>

2

    <IfModule mod_rewrite.c>
       Options Indexes FollowSymLinks
       RewriteEngine On
       RewriteRule ^index\.html$ - [L]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule . /index.html [L]
    </IfModule>

3

    <IfModule mod_rewrite.c>
        RewriteEngine on
        RewriteCond %{REQUEST_FILENAME} -s [OR]
        RewriteCond %{REQUEST_FILENAME} -l [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^.*$ - [NC,L]
        RewriteRule ^(.*) index.html [NC,L]
   </IfModule>

我正在使用Angular5.请告诉我我的方法是否正确，或者我需要做些什么才能使它继续下去.

I am using Angular 5. Please let me know if my approach is right, or what I have to do to get this going.

版本:Apache Tomcat 7-7.0.64版

Version: Apache Tomcat 7- Version 7.0.64

推荐答案

.htaccess"文件在Tomcat上不起作用.将重写配置放入文件WEB-INF/rewrite.conf中，也许像这样:

".htaccess" files do not work on Tomcat. Put the rewriting config into a file WEB-INF/rewrite.conf, maybe like this:

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

接下来，您需要添加一个名为META-INF/context.xml的文件，该文件可以进行重写，即:

Next you need to add a file called META-INF/context.xml which enables the rewriting, i.e.:

<?xml version="1.0" encoding="UTF-8"?>
<Context reloadable="true" tldValidation="false" xmlValidation="false">

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

</Context>

还要从Angular应用中删除 HashLocationStrategy .

Also remove the HashLocationStrategy from your Angular app.

更新

为什么要重写

• 由于Angular应用是 SPA ，所以它是唯一可以解决的唯一真实页面是index.html.
• 因此，任何类似href的链接都将离开该页面并退出该应用.
• Angular使用其 Router 重定向到应用程序内的虚拟路径，而无需离开index.html.
• Web服务器会猜测这些路径是真实文件，并且由于它们不存在，因此以404 HTTP状态响应(对于Tomcat，其 URL重写.

• Since Angular apps are SPAs the only real page that gets addressed at all is index.html.
• Therefore any link like an href would leave that page and quit the app.
• Angular uses its Router to redirect to virtual paths inside the app, without leaving index.html.
• A web server would guess these paths are real files and since they do not exist, respond with an 404 HTTP status (in case of Tomcat its the DefaultServlet serving static content).
• To get around this problem url rewriting can be used.

如何启用重写

• 首先，您需要启用 RewriteValve ，网络过滤器，默认情况下处于禁用状态.为此，您可以像上面的示例(便携式版本)一样将context.xml添加到您的war文件中，或将其添加到server.xml(服务器端版本)中.
• 此后，添加rewrite.conf文件以设置重写条件.
• 在上面的示例中，第一行告诉Tomcat查找不是真实/现有文件的文件". !-f，在当前servlet路径中.如果您的应用未部署为ROOT(即 www.xyz .com/** myApp ** )，并将进行相应的设置.
第二行映射每个虚拟路径".从Angular路由器到index.html.

• First you need to enable the RewriteValve, which is a network filter and is disabled by default. To do so, you can add a context.xml to your war file like in the example above (portable version), or add it to the server.xml (server-side version).
• After that add a rewrite.conf file to setup the rewriting conditions.
• In the example above the first line tells Tomcat to look for "files which are not real/existing files" !-f, in the current servlet path. The servlet path part is neccessary, if your app is not deployed as ROOT (i.e. www.xyz.com/**myApp**) and will be set accordingly.
• The second line mapps every "virtual path" from the Angular router to index.html.

更新2

• 启用 ServiceWorker 也可以解决该问题.

• Enabling the ServiceWorker also resolves the problem.

这篇关于角深链接-Apache Tomcat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！