CODEWITHSUNDEEP
angularweb-applicationsdeploying
mapussah
mapussah

Reputation: 109

Deploying Angular 2 to GoDaddy 404 after refresh

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.

Upvotes: 3

Views: 2655

Answers (2)

Cesar Vega
Cesar Vega

Reputation: 455

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>

Upvotes: 6

Tom Stickel
Tom Stickel

Reputation: 20401

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>

Upvotes: 2

Related Questions