Error : The requested URL was not found on this server(page not loading after build when we refresh the page)

Question

In developer section (localhost:4200) is working fine. After completing the build application loading and working fine but url when i type and press enter it is not working.

my router:

export const appRoutes : Routes = [
    { path: '', redirectTo: 'material', pathMatch: 'full' },
    {path:'material',component: MaterialComponent},
];

and my module.ts file

imports: [            
    RouterModule.forRoot(appRoutes,{ enableTracing: true }),BrowserModule,FormsModule,HttpModule,MaterialModule,BrowserAnimationsModule,RouterModule    
  ],

Error:

Why giving custom url is not working after build?

Answer 1

The problem is Angular takes care of the url after the dns ( localhost:4200 ) part. So when you type localhost:4200/someurl , The network will query your backend for that full url, and if it doesn't exists you will get a 404. You have 2 options here:

1) Use HashLocation Strategy which I don't recommend because it breaks AoT.

2) Define a redirection function in your back-end code. For nodejs we do it like this:

app.get('/*',  function(req, res, next) {
    res.sendFile('index.html', { root: __dirname + '/dist' });
});

Related topic: Angular 2.0 router not working on reloading the browser

Answer 2

I have solved using Hash. We need to import below modules in module.ts

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

and we need to include providers as given below in module.ts file.

  providers: [AppCommonService,{provide: LocationStrategy, useClass: HashLocationStrategy}],