Deeplinks navigate to correct page, but doesn't load the component

Greetings! I am new to the forum, so this is my first and rather important post. I have one final feature to fix, but can’t get this thing to work. I am trying to get deep links to send users to a range of different pages/components. I have the app.component.ts set up like this:

        '/': HomeComponent,
        '/club-news' : ClubNewsComponent,
        '/match-news': MatchNewsComponent,
        '/news': NewsComponent,
        '/match': StatsComponent,
        '/store/category/:id/product/:id': ProductItemDetailComponent
      }).subscribe((match) => {
        this.router.navigate([match.$link.path]);<-- send users to the right place
        console.log('Successfully matched route', match)
      }, (nomatch)=> {
        console.error('Got deeplink that did not match', nomatch)

My app picks up the DEEPLINK_HOST correctly and sends the user to the right place. But the component doesn’t load. It just shows the loading icon. If I remove the first forward slash from the path, the deeplinks loads straight away, but sends the user to the home page or ‘/’.

I can’t seem to find a successful way of testing this. I’ve tried remote debugging, but I get nothing in the console. I have this running using a debug.apk so I am having to build a test version to see if it works.

Really frustrating. Can anyone help?