Angular route with 2 parameters not working

Question

I've got this routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomepageComponent } from './app/homepage/homepage.component';
import { SearchpageComponent } from './app/searchpage/searchpage.component';
import { EventPageComponent } from './app/eventpage/eventpage.component';

const routes: Routes = [
  {
    path: '',
    component: HomepageComponent
  },
  {
    path: 'search',
    component: SearchpageComponent
  },
  {
    path: 'event/:name/:id',
    component: EventPageComponent
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Whenever I try to navigate to an URL like http://localhost:4200/event/asa/123, it won't load the EventPageComponent (blank page) and Chrome gives me the following error in console:

Failed to load resource: the server responded with a status of 404 (Not Found) (http://localhost:4200/event/asa/inline.bundle.js)

It does that for every bundle.

Am I missing something?

Answer 1

It looks like your script reference in index.html is incorrect. It appears to be pointing at inline.bundle.js (relative to the current path) when it should be pointing at /inline.bundle.js (absolute). That's my best guess given your problem, I see nothing wrong with the Angular code (nor could anything in Angular produce this error).

If you're using something like webpack for bundling they no doubt have a solution for this.