How do I bypass the router in Angular 2

Question

I need to bypass the Angular routing for a specific relative route, e g '/register', but I can't seem to find a way to instruct Angular's RouterModule to NOT process a specific relative route.

Any non-specified route will be caught by the RouterModule and redirected to '/' even though I don't have a wild card route set.

I've tried both the dev server and a real linux server.

This question has been asked before, but no satisfying answer has been provided.

Here's a simplified version of what my current routing code looks like:

export const module_page1_path = 'page1.module';
export const module_page2_path = 'page2.module';

const createImportFunction = (path: string, moduleName: string) => () =>
        import('./' + path).then(mod => mod[moduleName]);

    export const appRoutes: Routes = [
        {
            path: 'page1',
            loadChildren: createImportFunction(module_page1_path, 'Page1Module')
        },
        {
            path: 'page2',
            loadChildren: createImportFunction(module_page2_path, 'Page2Module'),
            canActivate: [AuthGuardService]
        },
        {
            path: 'callback',
            component: AuthCallbackComponent
        },
        {
            path: 'index.html',
            redirectTo: 'page1',
            pathMatch: 'full'
        }
        ,
        {
            path: '',
            redirectTo: 'page1',
            pathMatch: 'full'
        },
    ];

    @NgModule({
        imports: [RouterModule.forRoot(appRoutes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule {
    }

So I would like the user to access a server generated page called 'register' on the same domain, which should take the user away from the Angular app.

How do I do that?

providing an example of what your routing module looks like and the method you're using to navigate to the specific route is needed in order to answer your question... — Garrett Manley, Jun 04 '20 at 15:22

score 0 · Answer 1 · answered Jun 04 '20 at 21:58

If you try to redirect the user outside the NgZone of Angular, it'll probably block you, so you first need to work with ngZone.runTask().

I recommend you to create a component only to perform the redirection. So when you click on the link, it passes through your router opening the component, then the component redirects to the external site.

You can try something like this:

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  ...
})
export class SomeComponent implements OnInit {
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    this.ngZone.runTask(() => {
      window.location.href = 'www.yoururl.com';
    });
  }
}

Think of you're working with a SPA and Angular Router is in charge of the NgZone context.

Thanks for your answer, however it turned out that it was the Angular PWA module that caused my problem. — Fredrik_Borgstrom, Jun 05 '20 at 09:02

score 0 · Answer 2 · answered Jun 05 '20 at 09:01

I have now found the answer to my own question here on StackOverflow, and it wasn't the RouterModule that was hogging all routes, it was the Angular PWA module that was doing it. Which I didn't mention because I thought it wasn't relevant.

The addition to make to your ngsw-config.json file in order to bypass Angular's control of a relative path such as '/register' is this:

{
   "dataGroups": [
      {
        "name": "register",
        "urls": ["/register"],
        "cacheConfig": {
            "maxSize": 0,
            "maxAge": "0u",
            "strategy": "freshness"
          }
       }
   ]
}

How do I bypass the router in Angular 2

2 Answers2