Deploying Angular 2 to GoDaddy 404 after refresh

Question

I hope you are doing well. I just deployed a Non-profit org website I have been working on lately (found here: www.leonesistersunited.com) to godaddy using CLI to build for prod. After deploy, everything is great just as expected. However, on any page, if you refresh the browser, you get a 404 error. Any ideas as to what may be causing this? Is the problem from me or is it from GoDaddy? I am hosting on the Windows tier (IIS).

Thanks.

Check out this for instructions on setting up rewriting on your web server: https://stackoverflow.com/questions/43785928/angular-2-hosted-on-iis-http-error-404 — DeborahK, Aug 01 '17 at 22:16
@Z.Bagley, my routes are set up as follows: [{path: 'home', component: HomeComponent}, {path: 'programs', component: ProgramsComponent}]. You know, basic stuff; nothing weird or complex. — mapussah, Aug 02 '17 at 10:24
Just wanted to check before I recommended anything. Using HashStrategy or having your server re-route all requests to the home page "/" will fix the problem. HashLocation: https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-browser. Note: If you're using godaddy's Plesk to manage your webserver you will *have* to use the HashLocation strategy. — Z. Bagley, Aug 02 '17 at 14:37
@DeborahK. Thanks a bunch! I followed that link and it had the solution for me. Just like most of you are saying, it has to do with the fact that on refresh, the browser is making request for files, rather than a route. — mapussah, Aug 02 '17 at 22:16

Cesar Vega · Answer 1 · 2018-08-20T14:19:15.650

For GoDaddy web hosting are two different solutions

IN Angular index.html write the base-href

  <base href="/nameOfTheappFolder/">  or

Deploy ng build --prod --base-href "/nameOfTheAppFolder/"

IN you angular 6 app.module calls this provider

    providers: [{ provide: APP_BASE_HREF, useValue: '/nameForTheAppFolder/'}]

for Linux hosting, you do the .htacces file like this where you replace the app directory folder name

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

For Windows hosting you do web.config

         <?xml version="1.0" encoding="utf-8"?>
          <configuration>

          <system.webServer>
            <rewrite>
              <rules>
                <rule name="Angular Routes" stopProcessing="true">
                  <match url=".*" />
                  <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  </conditions>
                  <action type="Rewrite" url="./index.html" />
                </rule>
              </rules>
            </rewrite>
          </system.webServer>

          </configuration>

Thank you so much, I had already set base href, but this Linux config helped me. — LadyBo, Jul 20 '20 at 13:01
so I placed but its not working, I also tried code in .htaccess file but of no use, my hosting is at GoDaddy — Ashu, Nov 24 '21 at 14:54

score 2 · Answer 2 · answered Apr 25 '18 at 23:25

You need to deploy a web.config with the rewrite module sections. If godaddy server has it installed ( they should) then that is all that is needed

Add web.config file with a URL Rewrite rule All requests to this web application that are not for files or folders should be directed to the root of the application. For an application or virtual directory under the default web site, the URL should be set to the alias, (e.g. “/MyApp/”). For a web site at the root of the server, the URL should be set to “/”.

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/MyApp/" />
      <!--<action type="Rewrite" url="/" />-->
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

Deploying Angular 2 to GoDaddy 404 after refresh

2 Answers2