Tips on Angular Routing inside a angular app that is embedded as a content script

Question

We are currently developing a chrome extension written in Angular. The setup is the entire angular app is built as a content-script in manifest.json

As you can see in the code below, everything aside from contentPage.js is from angular source.

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "file://*/*.pdf"],
      "js": ["contentPage.js", "polyfills.js", "runtime.js", "main.js"],
      "css": ["styles.css"],
      "run_at": "document_idle"
    }
  ],

Here comes the problem, we're having issues with routing. Any route redirection navigates relative to the current webpage url since it is a content-script.

Let's say i'm currently at https://stackoverflow.com/questions then invoking this.router.navigate(['/home']) will navigate to https://stackoverflow.com/questions/home.

How do i use angular routing in the context of a chrome extension where the whole angular app is embedded as a content script?

Edit:

After investigating the issue, it seems it only doesn't work on lazy-loaded routes. The paths are correctly resolved for normal routes, but paths to lazy-loaded routes are resolved relevant to current webpage url not the chrome extension