How to use ActivatedRoute in angular while using Hybrid routing?

Question

I am trying to get data from a route(/item/{id:[^/]*}/') in angular component for a hybrid app using upgrade module

I have tried ActivatedRoute to get hold off router state but it keeps complaining about invalid route configuration.

AppModule

const itemState = {
    name: 'item',
    url: '/details/item:{id:[^/]*}/',
    title: 'Item detail',
    component: ItemContainerComponent
};
@NgModule({
    entryComponents: [],
    declarations: [],
    imports: [
        BrowserModule,
        RouterModule.forRoot([]),
        UpgradeModule,
        UIRouterUpgradeModule.forRoot({ states: [itemState] }),
    ],
    providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]
})


ItemContainerComponent

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

Invalid configuration of route '': routes must have either a path or a matcher specified ; Zone: ; Task: Promise.then ; Value: Error: Invalid configuration of route '': routes must have either a path or a matcher specified

Answer 1

Seems like solution is to use transition from '@uirouter/core' and do something like below.

constructor(private transition: Transition) {}

ngOnInit() {
  this.itemId = this.transition.params().id;
}