Can't navigate to other pages in Angular 5 application, after the deploying project (ng build)

Question

When I'm testing my Angular application (v5) with the following command:

ng serve --open

I can navigate to the any registered route of my application. When I want to serve my application after the building process via:

ng build or ng build --prod

I'm getting the 404 error, after navigating to any route. If to read the official tutorial, there shouldn't be any complex actions with the project deployment.

I have made a search and found the proposal to add the --base-href=/ option in build command, but also NO success.

I'm using the next HTTP-server: https://www.npmjs.com/package/http-server

Possible question to me:

Q1: How do you serve the Angular app?

A1: Using the http-server --cors command of the NPM-package at the application directory, so the --base-href is referencing correctly

Q2: What is your routing configuration (source code)?

A2: My routes are very simple, because I'm learning the Angular v5 tutorials, so don't expect something special, the source code is next:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SalesComponent }       from './sales/sales.component';
import { ConsumersComponent }   from './consumers/consumers.component';

const routes: Routes = [
    { path: 'consumers' , component: ConsumersComponent },
    { path: 'sales', component: SalesComponent }
];

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

export class AppRoutingModule { }

AppRoutingModule is provided in the app.modude.ts file (imports: in @NgModule).

Q3: Does your Angular app depend on backend (server-side app)?

A3: It doesn't. It has only the mock objects for data simulating. They are defined as static data in the separated class. I didn't go so far from the Angular tutorial at official website. Just wanted to serve the ng build --prod version with my favorite tiny HTTP-server.

So, I can navigate to other pages, when using the ng serve command, but I can't do the same, after building the project. Tutorials provide the description, that I can just serve the built files as the static ones with any HTTP-server, but no success for me.

How can I solve my problem?

Thanks

Answer 1

I have solved my problem, due the official deployment guide.

You should configure your HTTP-server to follow the Front Controller Pattern. I have tested it with the nginx server, using the next configuration:

server {
    listen 80 default_server;
    root /var/www/html;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ /index.html;        
    }
}   

And all is working pretty fine now.

You can do the same with the .htaccess file, if you're using the Apache server or with the web.config file, if the IIS is your HTTP-server and so on.