Question

我正在试图弄清楚如何设置Apache Tomcat服务器来为角度应用程序提供深层链接。例如：

静态服务器在收到mysite.com/请求时会定期返回index.html。但它拒绝mysite.com/heroes/42并返回404 - Not Found错误，除非它被配置为返回index.html。

我想在localhost / angular上提供角度应用，我试过以下：

1）使用以下命令构建角度应用程序：

ng build --prod --base-href .

2）将构建文件夹的内容（默认值：dist）复制到$ ApacheLocation / webapps / angular

3）在$ ApacheLocation / conf / Catalina / localhost / rewrite.config中添加RewriteRules

# 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 ^\/angular\/.*$ /angular/index.html

4）在主机标签

下添加阀门

 <Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true"> 
   <Valve className="org.apache.catalina.valves.rewrite.RewriteValve"/>

5）启动Tomcat服务器并转到localhost / angular会给我：

未捕获的SyntaxError：所有.js包的意外标记＆lt; （例如main.bundle.js）

如果我不包含重写规则，tomcat将按预期提供localhost / angular，但会在深层链接上提供404。

我的设置配置：

tomcat版本9.0.0.M26
angular version 4.4.2
@ angular / cli：1.4.2
node：8.5.0
npm：5.4.2
os：linux x64

Answer 1

我设法通过以下步骤修复此问题，例如http://localhost:8080/angular/player/detail/4：

1）使用以下命令构建角度应用：ng build --prod -bh ./ -d / angular

2）将构建的app的内容复制到$ ApacheLocation / webapps / angular

3）重写规则：

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/angular/(.*) /angular?path=$1

4）app.component.ts上的设置导航：

constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

ngOnInit() {
const path = this.activatedRoute.snapshot.queryParams['path'];
const navigateTo = '/' + path;

if (path) {
  this.router.navigate([navigateTo]);
}

}

您可以在此处找到测试项目：https://github.com/avuletica/test

重写规则说明：

# %{REQUEST_PATH} corresponds to the full path that is used for mapping.
# ! NOT character 
# '-f' (is regular file) Treats the TestString as a pathname and tests whether or not it exists, and is a regular file.
# ^ matches the beginning of the string or line
# . matches any charceter except line breaks
# * match 0 or more of the preceding token

所以基本上如果/ angular /上没有文件，tomcat会将完整路径作为查询字符串发送到角度应用程序，并从该查询param angular处理路由。

Answer 2

用于解决在Apache Tomcat服务器（8，9）上部署角度应用程序（使用PathLocationStrategy路由）时的深层链接问题-

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

server.xml-

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

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

...
      </Host>
...

rewrite.config-（注意-/ hello /是tomcat上的角度应用程序的上下文路径）

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

我已在我的文章-Fixing deep linking issue – Deploying angular application on Tomcat server

中记录了此问题

注意-无需客户端设置即可实现此目的（CLI中的默认配置除外）。所有客户端路由都是由Angular Routing模块处理的。

在Apache Tomcat 404深层链接问题

2 个答案: