angular 2 cli deployed app fails to load route

Question

I have a angular 2 cli app which I I have deployed using web hosting. I ran ng build --prod and copied contents of /dist to web-root folder, structure looks like following:

My index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Invison</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- Material css -->
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">


</head>
<body>
    <app-root>Loading...</app-root>
</body>
</html>

The app is deployed correctly but when I click on a route it gives me 404 not found error. What am I doing wrong? Do I need to change base href in index file and how?

UPDATE:

my app.module:

const appRoutes: Routes = [
{ 
  path: '', 
  component: HomeComponent, 
},
{
   path: 'agreement', 
  component: AgreementComponent,
}
];


@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  ContactComponent,
  HeaderComponent,
  ServicesComponent,
  AboutUsComponent,
  FooterComponent,
  AgreementComponent
  ],
  imports: [
  RouterModule.forRoot(appRoutes),
  BrowserModule,
  FormsModule,
  HttpModule,
  MdlModule,
  ScrollToModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Do you mean app.module? Sorry I did not really get you. I have updated with app.module for showing my routes. This path essentially works on my localhost — Thinker, Jun 26 '17 at 18:38
e.g. if I hit http://inovision.info/agreement (you can actually hit it and you can see it is broken) — Thinker, Jun 26 '17 at 18:44
The issue is most likely that explained here: https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — DeborahK, Jun 26 '17 at 18:46
adding providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], solved my problem — Thinker, Jun 26 '17 at 19:03

angular 2 cli deployed app fails to load route

0 Answers0