Angular Platform-server (Universal): route with get params

Question

I'm trying to describe a route with get params in my platform-server/universal app but so far without any success.

Anyone have an idea how to define achieve that?

Based on what I know from express routing I tried the following but I end up facing an error

routes.ts:

 export const ROUTES: string[] = [
    '/',
    '/item/:id'
 ];

main.server.ts:

ROUTES.forEach((route: string) => {
  app.get(route, (req: Request, res: Response) => {
    res.render('../dist/index', {
      req: req,
      res: res
    });
  });
});

my component:

constructor(private route: ActivatedRoute) {

  }

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       console.log(params['id']);
    });
}

With this code, server npm start is starting without error but when I call http://localhost:8000/item/thisistheparam I face following error in the browser console

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'item/thisistheparam'

score 0 · Accepted Answer · answered Aug 24 '17 at 12:48

Oops I find the problem, I forgot to add the path to my lazy module too ;)

Respectively in my item.module.ts:

@NgModule({
  declarations: [ItemView],
  imports: [
    RouterModule.forChild([
      { path: ':id', component: PublicItemView, pathMatch: 'full'}
    ])
  ]
})

I changed path: ''to path: ':id' and everything if working like a charm now

Angular Platform-server (Universal): route with get params

1 Answers1