1

What do I wanna do?
I want to implement a button which opens a URL in a new Tab. The URL contains a query parameter consisting of numbers taken out of the "displayData" object.

Description of the problem:
I have a route which is defined like this in the app.routes.ts:

{
  path: 'displays/:displayIds',
  loadChildren: () => import('module').then(m => m.module),
  canActivate: [RoleGuardService],
  data: {
    expectedRole: 'ROLE_READ'
  }
}

Next, I've got a HTML-Button which is calling the following method:

  openInNewTab(e: Event): boolean {
    e.preventDefault();
    const qp = {displayIds: this.displayData.map(display => display.deviceID).join(',')};
    const urltree = this.router.createUrlTree(['#/displays'], {queryParams: qp} );
    this.router.navigate([]).then(result=> {
      window.open(unescape(decodeURIComponent( this.router.serializeUrl(urltree) )), '_blank');
    });
  }

When you log the resulting URL, you get the following string:

http://localhost:4200/#/displays?displayIds=14361,14510

Which is exactly the one I want. But now is where the problem comes into place: If I click the button to open the URL in a new Tab, the correct URL is displayed in the searchbar for about a second. After that, the site goes blank and the error "Cannot match any routes. URL Segment: 'displays%3FdisplayIds%3D14361,14510'" appears. If I take the exact same URL mentioned above this paragraph and paste it in the same tab which was opened before, the routing is done successfully and the site is displayed correctly.

My question is, why does the site only load if I paste the URL manually in the already opened site and how do I change the behaviour so that the site is displayed correctly on opening it per the button?

Edit:
For anyone that seeks a solution to the problem, the following configuration solved it for me:

I configured the route in app.routes.ts like this:

  {
    path: 'displays',
    loadChildren: () => import('module').then(m => m.module),
    canActivate: [RoleGuardService],
    data: {
      expectedRole: 'ROLE_READ'
    }
  }

In the module which is referenced in "loadChildren" I added the following configuration:

const routes: Routes = [
  {
    path: 'displays/:Ids',
    component: DisplaysComponent
  }
];

Now, if I call the URL like this 'http://localhost:4200/#/displays/3737" it's resolved as wished and redirects me to the correct page. I hope I was able to help y'all!

belivan
  • 11
  • 4
  • Does this give any good insight? https://stackoverflow.com/questions/50521494/angular-2-routing-navigate-run-in-new-tabuse-angular-router-naviagte – pertrai1 Aug 05 '21 at 11:42
  • @pertrai1 No it doesn't really help as it's kinda the same procedure i showed in the question, but thanks for trying – belivan Aug 05 '21 at 11:53
  • Ok. I have the same problem. It will be interesting to see what others offer. If I can find a solution I will share – pertrai1 Aug 05 '21 at 11:55
  • Why do you need the `navigate`...`then` ? can't you just do `window.open...` directly? I just tried it locally and it worked for me. – Aviad P. Aug 05 '21 at 12:42
  • @AviadP. Originally, I only had window.open too, but as soon as I added the params the URL would not be assembled correctly. Adding the ```navigate().then``` solved the problem for me. – belivan Aug 05 '21 at 13:12
  • @All Why # is getting added after port number? – Mitesh Shah Nov 26 '21 at 13:38
  • @MiteshShah I'm not 100% sure, but I think the part after the "#" indicates a place on the page which should be displayed. E.g: If you have a URL "localhost:4200/home/#/middle, it tries to go to the part on the page "home" which is associated whit the id "middle". Hope that helps. – belivan Nov 26 '21 at 15:56

0 Answers0