title: refreshing the page results in 404 error- Angular 6
body: <p>I am building an application with the help of <strong>Angular6</strong> and facing problems in routing. All the <strong>routes</strong> are working when I click on a particular tab but whenever I <strong>refresh</strong> the current page, it is throwing <strong>404</strong> error. I have seen many posts regarding this issue on Stack overflow but failed to overcome from this problem. </p>
  
  <p>Below is my app.module.ts</p>
  
  <pre><code>import {BrowserModule} from '@angular/platform-browser';
  import {NgModule} from '@angular/core';
  import {RouterModule, Routes} from '@angular/router';
  import {AppComponent} from './app.component';
  import {FetchApiComponent} from './fetch-api/fetch-api.component';
  import {FormsModule} from '@angular/forms';
  import {HttpClientModule} from '@angular/common/http';
  import {UserServiceLatest} from './fetch-latest/app.service';
  import {UserServiceTop} from './fetch-top/app.service';
  import {YoutubePlayerModule} from 'ngx-youtube-player';
  import {SidebarComponent} from './sidebar/sidebar.component';
  import {FetchLatestComponent} from './fetch-latest/fetch-latest.component';
  import { FetchTopComponent } from './fetch-top/fetch-top.component'
  import {UserService} from './fetch-api/app.service';
  import { ServiceWorkerModule } from '@angular/service-worker';
  import { environment } from '../environments/environment';
  import { AngularFireModule } from 'angularfire2';
  import * as firebase from 'firebase';
  import { firebaseConfig } from './../environments/firebase.config';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import {PushService} from './push.service';
  
  const appRoutes: Routes = [
    {
      path: '',
  
    component: FetchApiComponent
    }, 
  {
      path: '/latest',
  
      component: FetchLatestComponent
    },
  {
      path: '/top',
  
      component: FetchTopComponent
    },
  {
  path :'*',
  component: FetchApiComponent 
  }
  
  ];
  
  firebase.initializeApp(firebaseConfig);
  
  @NgModule({
    declarations: [
      AppComponent,
      FetchApiComponent,SidebarComponent, FetchLatestComponent, FetchTopComponent
    ],
    imports: [
      RouterModule.forRoot(appRoutes),
      BrowserModule, YoutubePlayerModule,
      FormsModule,
      AngularFireModule.initializeApp(firebaseConfig),
      AngularFireDatabaseModule,environment.production ?ServiceWorkerModule.register('firebase-messaging-sw.js'):[],ServiceWorkerModule.register('/firebase-messaging-sw.js', { enabled: environment.production }),
      HttpClientModule,environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [], ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
    ],
    providers: [UserService,UserServiceTop,UserServiceLatest,PushService],
  
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>Can you point me in right direction?</p>