Angular 8 / Apache: htaccess for root and sudomain app

∥☆過路亽.° 提交于 2021-01-28 05:45:10

问题


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}

回答1:


I would check your server/cloud settings. This sounds like it might be a possible DNS issue.

Also, make sure your local browser cache is cleared when everything is set up. Otherwise, the local cache could be pointing to the old settings information and making your site fail to load. This has bit me in the past when I knew my server was set up correctly but my site still would not load.



来源:https://stackoverflow.com/questions/58596709/angular-8-apache-htaccess-for-root-and-sudomain-app

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!