CODEWITHSUNDEEP
angularurl-routingangular2-routingproduction-environment
Uri Gross
Uri Gross

Reputation: 524

When refreshing page Error message "The requested URL was not found on this server."

I uploaded to production my first Angular project. The website available here: http://urigross.com When I type in the address field "urigross.com" the website works fine. When I refresh the page I get an error message. It also happens when I type in the address field the exact route such as "www.urigross.com/heb/about" for example. It happens with every route that I try. Error message Are :

"Not Found The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."

I tried contacting the site support and they told me that my angular routing may be not configured right. The website works perfectly locally on my pc with "ng s" command. I tried searching on stackoverflow but the results were for php and not angular projects.

my routing code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from 'src/app/components/home/home.component';
import { AboutComponent } from 'src/app/components/about/about.component';
import { ContactComponent } from 'src/app/components/contact/contact.component';
import { Page404Component } from 'src/app/components/page404/page404.component';
import { PlywoodHomeComponent } from 'src/app/components/plywood/plywood-home/plywood-home.component';
import { MdfHomeComponent } from 'src/app/components/mdf/mdf-home/mdf-home.component';
import { TegoHomeComponent } from 'src/app/components/tegoShuttering/tego-home/tego-home.component';
import { HardwoodsHomeComponent } from 'src/app/components/hardwood/hardwoods-home/hardwoods-home.component';
import { MapComponent } from 'src/app/components/map/map.component';
import { OsbFjHomeComponent } from 'src/app/components/OsbFj/osb-fj-home/osb-fj-home.component';


const routes: Routes = [
  { path: 'heb/home', component: HomeComponent},
  { path: 'heb/about', component: AboutComponent},
  { path: 'heb/plywood1', component: PlywoodHomeComponent},
  { path: 'heb/mdf', component: MdfHomeComponent},
  { path: 'heb/hardwood', component: HardwoodsHomeComponent},
  { path: 'heb/plywood2', component: TegoHomeComponent},
  { path: 'heb/plywood3', component: OsbFjHomeComponent},
  { path: 'heb/contact', component: ContactComponent},
  { path: 'heb/map', component: MapComponent},
  { path: 'heb/page404', component: Page404Component},
  { path: '', redirectTo: '/heb/home', pathMatch: 'full' },  // Default redirect ( When inserting Domain name).
  // { path: '**', component: Page404Component }
  { path: '**', redirectTo: '/heb/page404', pathMatch: 'full'}  // Redirect when invalid address typed


];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class RoutingModule { }

Upvotes: 5

Views: 5580

Answers (4)

Sorbon
Sorbon

Reputation: 1

<IfModule mod_rewrite.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|swf|js|css)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>

    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    # Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent

    Options +FollowSymLinks
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]

</IfModule>

Upvotes: 0

Chukwunonso Orjiakor
Chukwunonso Orjiakor

Reputation: 31

this answer by @kiranvj solved the problem for me too. But I had one crucial observation.

If you have sub-domains on the server, adding the code snippet in his answer to the .htaccess file in the root public folder, it will have an effect on all the sub-domains.

If you want a different effect on a particular sub-domain, you can make changes to the .htaccess file in the root folder of that sub-domain.

Upvotes: 0

kiranvj
kiranvj

Reputation: 34107

Your server is Apache. You can fix this with .htaccess This happens because you have client side routing but when direct hit to server the web server is unaware of the routes.

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

from here

I have done similar for one of my React based SPA, should work for your Angular app also

Upvotes: 9

saivishnu tammineni
saivishnu tammineni

Reputation: 1242

The server needs to be configured to send index.html as a response for 404, because this is the only html file in angular. This is taken care of by Angular cli in development.

Also check the location strategy

Upvotes: 0

Related Questions