angularangular-routingangular17angular17-ssr

Angular keeps adding route of page in url


I use angular 17

this is my app.routes.ts

export const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'editors', component: EditorsComponent },
  { path: 'partners', component: PartnersComponent },
  { path: 'investors', component: InvestorsComponent },
  { path: 'telecoms', component: TelecomsComponent },
  { path: 'institutional', component: InstitutionalComponent },
  { path: 'universities', component: UniversitiesComponent },
  { path: 'influencers', component: InfluencersComponent },
  { path: 'ambassador', component: AmbassadorComponent },
];

and my app.config.ts

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}

const scrollConfig: InMemoryScrollingOptions = {
  scrollPositionRestoration: 'top',
  anchorScrolling: 'enabled',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
  withInMemoryScrolling(scrollConfig);


export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, inMemoryScrollingFeature),
    provideLottieOptions({
      player: () => import('lottie-web'),
    }),
    provideAnimations(),
    provideHttpClient(),
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        //useFactory: (http: HttpClient) => new CustomTranslateLoader(http),
        deps: [HttpClient]
      }
    }).providers!, provideClientHydration(), provideClientHydration(), provideClientHydration() ],
};

when I try to go on the page http://localhost/editor i got lot 404 error for example http://localhost:4200/editors/assets/animations/editor_anim1.json 404

Angular add the name of the page in the path of the ressource. This path should be http://localhost:4200/assets/animations/editor_anim1.json 404

When I from home then go on page editors and come back on home, the url is http://localhost:4200/editors and when i go to editor again, now the url is localhost:4200/editors/editors

What's wrong with my routing config ?


Solution

  • I just add <base href="/"> in my index.html and all errors disapeared.