.htaccess / mod_rewrite：在子文件夾中運行Angular應用程序？

Question

我有

一個簡單的index.php ，它提供了簡單的頁面和
一個更復雜/更繁重的Angular 8.0應用程序，存儲在子文件夾/app 。

范例網址：

/ ......................... works: index.php, loads home page
/my-blog-post.html ........ works: index.php, loads a blog post
/any-page.htm ............. works: index.php, loads a page
/app ...................... works: home page of the Angular app
/app/login ................ DOES "NOT" WORK: sub-page of the Angular app

資料夾結構：

app/dist/app ........................................... Angular App (built files)
app/dist/app/3rdpartylicenses.txt
app/dist/app/4-es5.86e9c53554535b1b46a8.js
app/dist/app/4-es2015.bb174fcd0205a5f23647.js
app/dist/app/5-es5.b8f3fede0599cda91cf0.js
app/dist/app/5-es2015.f4890df5957b350d78ca.js
app/dist/app/favicon.ico
app/dist/app/index.html
app/dist/app/main-es5.8059496aa1855103a2ad.js
app/dist/app/main-es2015.0629f594e2c4c056133c.js
app/dist/app/polyfills-es5.943113ac054b16d954ae.js
app/dist/app/polyfills-es2015.e954256595c973372414.js
app/dist/app/runtime-es5.f2faa6ae2b23db85cc8d.js
app/dist/app/runtime-es2015.f40f45bfff52b2130730.js
app/dist/app/styles.3ff695c00d717f2d2a11.css
.htaccess .............................................. 
index.php ..............................................

應用程序/ DIST /應用/ index.html中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/app/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
  <app-root></app-root>
<script src="runtime-es2015.f40f45bfff52b2130730.js" type="module"></script><script src="polyfills-es2015.e954256595c973372414.js" type="module"></script><script src="runtime-es5.f2faa6ae2b23db85cc8d.js" nomodule></script><script src="polyfills-es5.943113ac054b16d954ae.js" nomodule></script><script src="main-es2015.0629f594e2c4c056133c.js" type="module"></script><script src="main-es5.8059496aa1855103a2ad.js" nomodule></script></body>
</html>

問題：
通過單擊Angular App中的鏈接，可以訪問/app ，然后訪問app/login 。 無法直接通過瀏覽器地址欄訪問URL：

直接調用app/login無效（以下錯誤）
app/ ->單擊登錄鏈接 -> app/login有效

的.htaccess

RewriteEngine on
RewriteBase /

# Page
RewriteRule ^(.*).html$ /index.php?module=page&slug=$1

# Blog
RewriteRule ^(.*).htm$ /index.php?module=blog&slug=$1

# Angular app
RewriteRule ^app/$ app/dist/app/index.html [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^app/(.*) app/dist/app/$1 [L]

# Remove www
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

# Force https
RewriteCond %{HTTPS} on

錯誤

# /var/log/apache2/myproject_error.log
AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace.

我認為該錯誤位於.htaccess的Angular應用程序路由的某處。
index.php和Angular應用本身可以完美運行。

編輯
設置imports: [RouterModule.forRoot(routes, {useHash: true})]它可與# ，但我想避免使用HashLocationStrategy 。

任何想法？ 提前致謝！

Answer 1

您需要配置HTTP服務器，以將以www.domain.com/app/開頭的所有URI重定向到index.html（角度應用程序）文件，以便它始終在app /上提供index.html。

angular的建議如下： Angular Deployment Server配置

Answer 2

有這種方式：

RewriteEngine on
RewriteBase /

# remove www and turn on https in same rule
RewriteCond %{HTTP_HOST} ^www\. [NC,OR]
RewriteCond %{HTTPS} !on
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L,NE]

# Page
RewriteRule ^([^./]+)\.html$ index.php?module=page&slug=$1 [L,QSA,NC]

# Blog
RewriteRule ^([^./]+)\.htm$ index.php?module=blog&slug=$1 [L,QSA,NC]

# Angular app
RewriteRule ^app/$ app/dist/app/index.html [L,NC]

RewriteCond %{ENV:REDIRECT_STATUS} ^$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^app/(.+)$ app/dist/app/$1 [L,NC]

確保在清除瀏覽器緩存后進行測試，或在新的瀏覽器中進行測試。

.htaccess / mod_rewrite：在子文件夾中運行Angular應用程序？

問題描述

2 個解決方案

解決方案1
1 2019-06-01 08:22:12

解決方案2
1 已采納 2019-06-02 17:58:38

.htaccess / mod_rewrite：在子文件夾中運行Angular應用程序？

問題描述

2 個解決方案

解決方案1 1 2019-06-01 08:22:12

解決方案2 1 已采納 2019-06-02 17:58:38

解決方案1
1 2019-06-01 08:22:12

解決方案2
1 已采納 2019-06-02 17:58:38