How to run angular 2 application on apache hosting server

[nikvarma]

Hi Guys,

I have hosting plan and i want to host my angular 2 application on the hosting server which have apache server.

The hosting server don't have a npm install.

after below command and getting a like the strc

file strc

ng build --prod

and uploading to my hosting server, when i am accessing the my url

http://www.exmaple.com/ -- it's working properly
http://www.exmaple.com/home -- it's giving a error, the file is no found on the server - 404

but the same thing working on my machine, when i am trying using a cmd
ng serve - command

[samfrach]

Hello,

I guess Apache is looking for a /home directory in your root server

By googling 10 seconds, this link solves your problem : https://github.com/mgechev/angular2-seed/wiki/Deploying-prod-build-to-Apache-2

[manklu]

To recite @vicb

Your question sounds like a support request.

Please use the issue tracker only for bugs and feature requests.

Use gitter and StackOverflow for support request.

[NgxDev]

Sorry to rock the boat, I hope this doesn't attract more questions. I'm only going to comment once :)

@nikvarma for more details/questions, use gitter or stackoverflow like @manklu mentioned above.
Now... For Apache, to redirect any request to index.html, you need a .htaccess file in the root.
Just create a .htaccess in your dist folder (same level as index.html), I assume that's the public root of your app, and paste this in the .htaccess file:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

Now, no matter what path you're requesting, Apache will always serve your index.html file, except requests to actual existing files (RewriteCond %{REQUEST_FILENAME} !-f) and requests to css, js etc. (RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$) - which needed to be excluded, because you actually want those.
Also, the Apache's mod_rewrite extension needs to be enabled for this to work. Most often, it is enabled. If not, ask your hosting provider.

[vicb]

Your question sounds like a support request.

Please use the issue tracker only for bugs and feature requests.

Use gitter and StackOverflow for support request.

[killrazor]

@MrCroft the link that @samfrach provides does it little differently. Care to expand upon the differences?

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

[NgxDev]

@killrazor
I don't have much experience in configuring Apache. I've just found an .htaccess file that does what I need (many years ago, and I still use it). As long as everything - except assets (images, js, css) - is routed to index.html, you should be fine. It seems that @samfrach's sample does a little more. In my case, the only requests it doesn't reroute to index.html for, are images, css and js (you wouldn't want to request style.css and be served index.html, of course). In @samfrach's sample, it makes exception for ANY existing file and path. Meaning: if the file exists, then actually serve it to the client, don't route to index.html. For example, accessing http://my-app/some/path/some-file.txt would serve the contents of that file, if it exists, otherwise it serves index.html.

[RathodGirish]

@samfrach thanks for link
I have followed steps available in this link : https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2

I am still getting problem.
Will please suggest?

[Sathishchary]

I have followed above methods. but I am getting the same 404 problem for urls except
https://example.com/dist. I have added the .htaccess file in apache2 server tomcat location (project deployed location) opt/tomcat/webapps/dist
.htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

And I have added the below code in /etc/apache2/sites-enabled/000-default.conf file

    DocumentRoot /opt/tomcat/webapps/dist
    <Directory /opt/tomcat/webapps/dist>
         AllowOverride All
    </Directory>

and my Apache's mod_rewrite extension also enabled. And i have given base url path in index.html like this
<script>document.write('<base href="' + document.location + '" />');</script>
what i am missing in this? do i need to add anything ?

[nicholaelaw]

As of 7/10, I can upload and serve the angular tutorial app without any tweak to my apache server config. Just remember to change the base href to whatever path you are putting it on the web.

Eg. if your app's index.html is at example.com/test/myapp, then you should have

<base href="/test/myapp/">

in the header of index.html, before the <script ...> lines.

[Sathishchary]

@nicholaelaw Thanks for the reply. I have tried whatever you suggested. but its still showing the same 404 error.I changed the base href as you said.
<base href="/dist/">

[ArtemiyFirsov]

@Sathishchary yes, same for me.

[polyglotinc]

As of Angular 4.3.1, I find I still have to modify the .htaccess on the target deployment folders on GoDaddy, otherwise the browser reload problem occurs if the Angular app uses routing.

When I try the simplistic approach of always serving index.html if a 404 occurs, I no longer get the proper file-missing error that ought to occur if my app attempts to load a .json file that doesn't exist.
SO, an approach like @MrCroft is needed to stop that.
NOTE: I found that I needed to replace "/index" in his last line with "./index".

[dhrupal-ample]

hello

• i am try to deploy my angular app . i run this command ng build and ng build --prod.
• it's generate dist folder and file but when i open index.html file in my browse it's a blank page

[illnr]

Official angular Guide:
https://angular.io/guide/deployment#production-servers

@dhrupal-ample You need a webserver to run (like ng serve), just opening in Browser will always be blank page.

[phil123456]

just to mention that one must definetely NOT use the .htaccess file when possible, use httpd.conf instead
way to risky to be hacked...cant believe people suggest these kind of answers in 2017/2018

[misutkame]

not every project is going to production @phil123456, many of us, who search the web are learning. if some tool or hack, solves a temporary problem for a learning project, so be it, happy to use it.

[illnr]

@phil123456 could you link some article or discussion why not to use .htaccess? I couldn't find anything suitable.

[phil123456]

@iBaff indeed, hard to find relevant articles, although I read these advices many times on several occasions, been using apache for like 15 years now

1 https://security.stackexchange.com/questions/36641/does-disabling-htaccess-improve-security
but apparently they say it's more a performance issue

2 we been hacked, recently, and security specialists (and our security team) disabled all htaccess, strongly suggesting us to leave vhosts configs on apache conf levels...guess these blokes know what they are doing

3 personaly I rather not put .htacess files knowing that they contain permisions/rules, just asside of public directories that might be retreived one day or tempered for one reason or another...

4 then we put apache itself in a chroot , not only the ftp, but the whole web server (yes it's a bloody pain in the a$$)

5 centralizing configs instead of spreading them here and there is clearly a better practice (although apache configs allows files inclusions, they end up all in the same folder, which is far better for maintenance, especialy under linux, especialy using the cli)

[illnr]

@phil123456 thanks for your answer! Sad to hear that you have been hacked.
I agree, it is better to put the config in httpd.conf. But my small hosting only let's me change .htaccess... So in my case I cannot choose. : )

[ishan123456789]

Click this link for a working htaccess configuration. I was able to get it working after trying a lot of configurations

[gthomas2]

This .htaccess worked for me:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]

[siwei0729]

@Sathishchary
I found the solution as .htaccess needs to be enabled with AllowOverride. Change the file /etc/apache2/apache2.conf, edit AllowOverride from None to ALL. It works for me.

[lluz]

@gthomas2
The angular team picked up the issue I created referencing to your comment.
It works for me also on a very common shared Apache hosting.
They offered me the opportunity to submit a pull request.
I am no expert on Apache so I am unable to describe (comment) the solution.
Are you interested in doing the pull request yourself?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}