After developing my project locally, the sub URLs like http://localhost:4200/login work fine. But once I build the project using ng build --prod, all sub URLs stop functioning on the live server.
When I navigate to a sub URL using
this.router.navigate(['/system']);Could this be an issue with my Routing Strategies?
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>title</title>
<base href="/">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { HttpClientModule } from "@angular/common/http";
import { SystemComponent } from './components/system/system.component';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './components/admin/admin.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent }, // home pages
{ path: 'login', component: HomeComponent },// sub page 1
{ path: 'system', component: SystemComponent }, // sub page 2
{ path: 'admin', component: AdminComponent }//sub page 3
];
@NgModule({
declarations: [
AppComponent,
HomeComponent,
SystemComponent,
AdminComponent
],
imports: [RouterModule.forRoot(
appRoutes,
{ enableTracing: true },// <-- debugging purposes only it will show big console log data
{ useHash: true } ),
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}