1

I've

  1. a light index.php which provides simple pages and
  2. a more complex/heavy Angular 8.0 app, stored in the sub-folder /app.

Example URLs:

/ ......................... 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

Folder structure:

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>

Problem:
It's possible to reach /app and afterwards app/login by clicking a link within the Angular App. It is not possible to reach the URL directly via the browsers address bar:

  1. app/login does not work when called directly (error below)
  2. app/ -> click Login-link -> app/login works

.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

Error

# /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.

I think the bug is somewhere in the routing of Angular app part of the .htaccess.
index.php and the Angular app themselves work perfectly fine.

Edit
After setting imports: [RouterModule.forRoot(routes, {useHash: true})] it works with #, but I'd like to avoid the HashLocationStrategy.

Any idea? Thanks in advance!

Improve this question

2 Answers 2

Reset to default
2

Have it this way:

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]

Make sure to test it after clearing your browser cache or test in a new browser.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Thanks for your answer, but it's unfortunately the same problem: when I call /app directly via the browser and then click on the login-link it works, but not if I enter /app/login directly. (Tested in cleared Chrome and Firefox)
Do you have other htacceas in your system or other rules not shown here?
ok try my updated code. Make sure you have only this code while testing. Also can you show content of app/dist/app/ directory by editing your question.
I updated the .htaccess, still the same problem. The browser shows The requested URL /app/dist/app/login was not found on this server., but it still works with clicking Login. I edited my qustion and added the folder content and content of index.html.
But now you're getting a different error i.e. not found instead of Request exceeded the limit of 10 internal redirects right?
|
1

You need to configure your HTTP server to redirect all URI which began with www.domain.com/app/ to the index.html(angular app) file so that it always serve index.html on app/.

Here's how angular suggests: Angular Deployment Server Configuration

Improve this answer

1 Comment

Thanks for your answer, but I was describing a particular problem which is the behavior of calling the URL directly or navigating through the Android app.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.