Php .htaccess/mod_rewrite:在子文件夹中运行Angular应用程序?

Php .htaccess/mod_rewrite:在子文件夹中运行Angular应用程序?,php,angular,apache,.htaccess,mod-rewrite,Php,Angular,Apache,.htaccess,Mod Rewrite,我已经 一个轻量级的index.php,提供简单的页面和 更复杂/更重的Angular 8.0应用程序,存储在子文件夹/app中 示例URL: / ......................... works: index.php, loads home page /my-blog-post.html ........ works: index.php, loads a blog post /any-page.htm ............. works: index.php, loads

我已经

  • 一个轻量级的
    index.php
    ,提供简单的页面和
  • 更复杂/更重的Angular 8.0应用程序,存储在子文件夹
    /app
  • 示例URL:

    / ......................... 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 ..............................................
    
    文件夹结构:

    / ......................... 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 ..............................................
    
    app/dist/app/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>
    
    
    错误

    # /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.
    
    我认为这个bug在
    .htaccess

    index.php
    的Angular应用程序部分的路由中的某个地方,Angular应用程序本身工作得非常好

    编辑
    在设置
    imports:[RouterModule.forRoot(routes,{useHash:true})]
    之后,它可以与
    #
    一起工作,但我希望避免使用
    HashLocationStrategy

    有什么想法吗?
    提前谢谢

    您需要配置HTTP服务器,将以www.domain.com/app/开头的所有URI重定向到index.html(angular app)文件,以便它始终在app/上提供index.html

    下面是angular的建议:

    这样做:

    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]
    

    请确保在清除浏览器缓存或在新浏览器中测试后进行测试。

    谢谢您的回答,但我刚才描述了一个特殊问题,即直接调用URL或通过Android应用程序导航的行为。谢谢您的回答,但不幸的是,同样的问题是:当我通过浏览器直接调用
    /app
    ,然后单击登录链接时,它会工作,但如果我直接输入
    /app/login
    ,则不会工作。(在清除的Chrome和Firefox中测试)您的系统中是否有其他HTACCEA或此处未显示的其他规则?好的,请尝试我的更新代码。确保测试时只有此代码。您还可以通过编辑您的问题来显示
    app/dist/app/
    目录的内容。我更新了
    .htaccess
    ,仍然存在相同的问题。浏览器显示
    在此服务器上找不到请求的URL/app/dist/app/login。
    ,但它仍然可以通过单击login来工作。我编辑了我的问题并添加了文件夹内容和
    index.html
    的内容。但是现在你得到了一个不同的错误,即
    未找到
    ,而不是
    请求超过了10个内部重定向的限制
    对吗?