I have 2 Angular apps, each of which runs fine in the root directory of a domain of an Apache webserver (hoster).
Now I like to place them into
App1 => https://example.com
App2 => https://app2.example.com
"app2" subdomain folder is "/app2" from root directory.
If I put App2 into the subdomain directory both still run, but App2 only as long as I don't do a refresh of the page (I get a 404 not found).
I did some search but most examples focus on subdirectories not subdomains, I tried to use
ng build --prod --base-href "/app2/"
build option for app2 but there are a lot of possible combinations to try and I did not get any of them working so far.
So any help would be appreciated, thanks.
Edit:
Probably the solution is simple, but it drives me nuts...
Each of my Angular 8 apps work fine if I put them into the root directory with the standard .htaccess (example from angular.io):
RewriteEngine On
# 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 ^ /index.html
I create the subdomain with the tools of my provider. The only options I am able to configure for a subdomain are the "name" and the "directory" the subdomain points to.
In my case (live, testing environment):
http://example.com => works, files are in the root "/" with the above .htaccess.
http://admin.example.com => does not work, files are in the subdirectory "/admin4711" with the above .htaccess.
When calling the subdomain, I get a white page and in Chrome debugger I can see the following errors:
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. polyfills-es2015.d08b2846b0483deb576c.js:1
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. runtime-es2015.de1f101ad38d40b1418d.js:1
Uncaught SyntaxError: Unexpected token '<' scripts.36dbbe192861c60ce1c6.js:1
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. main-es2015.10848fe141a43f167ec1.js:1
These errors do NOT occur when running the app in the root directory.
It looks as if the web server interprets the files within the subdomain incorrectly.
Solved:
The recommended htaccess from angular.io was misleading for a subdirectory (at least for me).
The answer is to replace
%{DOCUMENT_ROOT}%{REQUEST_URI}
with
%{REQUEST_FILENAME}