I have an issue with routing when I build my app with ng build --prod. The router.config doesn't register these routes only in prod environment.
error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'myvehicle'↵Error: Cannot match any routes. URL Segment: 'myvehicle'
vehicle-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ConfigService } from '../../core/services/config/config.service';
import { VehicleComponent } from './vehicle.component';
const vehicleRoutes: Routes = [];
ConfigService.scope('vehicle').getConfig().map(vehicle => {
vehicleRoutes.push({
path: vehicle['informations']['route'],
component: VehicleComponent,
});
});
@NgModule({
imports: [RouterModule.forChild(vehicleRoutes)],
exports: [RouterModule],
})
export class VehicleRoutingModule { }
export const routedComponents = [VehicleComponent];
header.component.html
<a [routerLink]="[vehicleService.getRoute(vehicle.id)]">...
The routing works when I use the following code instead of the code above:
const vehicleRoutes: Routes = [
{
path: "test-a",
component: VehicleComponent,
},{
path: "test-b",
component: VehicleComponent,
}
];
I checked the path value and it's the same in the both ways as well as the console.log(vehicleRoutes) output in dev / prod environment.
ps: the path is loaded via an http request because it's based on slug set in the back office.
Please provide the base url in index.html file in base tag
Example :
<base href="https://www.w3schools.com/images/" target="_blank">