images not loading when changing base url in angular JS project

Question

I want to change the base url

when load the application url is http://localhost:4200/#/ I want to change this to http://localhost:4200/carrom/.

For doing this I changed base url to then loading url is http://localhost:4200/carrom#/

How can I change this to http://localhost:4200/carrom...but the images and assets are not loading

For doing this I changed base url to then loading url is http://localhost:4200/carrom#/

Answer 1

From what I could make out, you could do either of the below.

1. Set up routes so that the base url "/" loads the carrom component.

   const routes: Routes = [{ path: '', component: CarromComponent }, { path: 'home', component: HomeComponent }, { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page ];

Or call navigate on HomeComponent load

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class HomeComponent {

  constructor(private router: Router){
   this.navigate()
  }

  navigate(){
    this.router.navigate(['/carrom']) // assuming this the route of the carrom component
  }
}