routing doesnt work after deployment in angular2

Question

I have created an angular2 app & deployed it successfully.

app starts correctly after taking some time to load & then I am able to navigate to different components.

but when I put direct address in URL as :

www.sample.com/about

it says 404 error.

even when I am creating bundle using ng build --prod , it creates dist folder correctly & I am able to navigate to different components using links only.

but I cant access components directly from the URL in my local system also.

I am using http-server .

are there any extra configurations required to make it work?

Answer 1

This problem is solved by implementing HashLocationStrategy which adds # to all your routes. You achieve this by adding HashLocationStrategy to AppModule providers.

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

and add the corresponding import

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

This solved your problem.

Answer 2

Are you using Node as an deployment server? Or you are using IIS or similar servers.

My best guess is when you run from the server it is not finding the resource you are looking for in this example about . you have to configure route at your server properly.

If using IIS you will have to use URL rewriting or MVC Routing to serve a default resource if unknow resource needs to be served.

In local when you use ng serve or use lite-server they take care of these unknown paths.

Hope this helps!!