I am trying to build angular 4 application which is new to me. After I pushed into nginx server getting some Issue

Question

1. The problem is when directly redirecting to http://localhost:4200/about working fine but after pushing into nginx server, when I try to redirect to www.webpage.com/about getting error(nginx 404 error). But its working fine when you redirect to www.webpage.com and then click on about. Getting error only I am trying to open direct url as www.webpage.com/about or www.webpage.com/contact or www.webpage.com/blog

   import { NgModule } from '@angular/core';
   import { HttpModule } from '@angular/http';
   import { RouterModule } from "@angular/router";
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   
   import { AppComponent } from './app.component';
   import { appRoutes } from "./app-routing.module";
   
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component';
   import { BlogComponent } from './blog/blog.component';
   import { ClientsComponent } from './clients/clients.component';
   import { ContactComponent } from './contact/contact.component';
   import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
   
   
   
   @NgModule({
       declarations: [
           AppComponent,
           HomeComponent,
           AboutComponent,
           BlogComponent,
           ClientsComponent,
           ContactComponent,
           PageNotFoundComponent
       ],
       imports: [
           BrowserModule,
           AppRoutingModule,
           HttpModule,
           FormsModule,
           ReactiveFormsModule,
   
           RouterModule.forRoot(appRoutes)
       ],
       providers: [
       ],
       bootstrap: [AppComponent]
   })
   export class AppModule {
   }
   
   
    import { NgModule } from '@angular/core';
       import { RouterModule, Routes } from '@angular/router';
   
       import { HomeComponent } from './home/home.component';
       import { AboutComponent } from './about/about.component';
   
       import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
       import { ClientsComponent } from './clients/clients.component';
   
       import { ContactComponent } from './contact/contact.component';
       import { BlogComponent } from './blog/blog.component';
   
   
   
   
       export const appRoutes: Routes = [
           { path: '', redirectTo: '/', pathMatch: 'full' },
           { path: '', component: HomeComponent },
           { path: 'about', component: AboutComponent },
           { path: 'clients', component: ClientsComponent },
           { path: 'contact', component: ContactComponent },
           { path: 'blog', component: BlogComponent },
           { path: 'page-not-found', component: PageNotFoundComponent },
           { path: '**', component: HomeComponent }
       ];
   
       @NgModule({
           imports: [
               RouterModule.forRoot(appRoutes)
           ],
           exports: [
               RouterModule
           ]
       })
       export class AppRoutingModule {
       }
   

Answer 1

You will need to configure your web server to redirect all unknown (404) requests to index.html, which will allow the Angular application to then route your user to the desired route/view.

Answer 2

You can try something like this :

error_page 404 =200 /index.html;

Source : How do I force redirect all 404's (or every page, whether invalid or not) to the homepage?

Answer 3

try_files $uri $uri/ /index.html;

This line has to be added in the nginx.conf incase of Windows server or in /etc/nginx/sites-enabled/default in case of ubuntu server.

That piece of code will look for angular paths before throwing a 404 error.

angular deployment check this out