Deactivate Login Screen for certain pages in ngx-rocket angular 7 starter kit

Question

I'm using the ngx-rocket angular7 starter kit. It has a guard implemented that will make the login screen pop up if i'm not logged in yet. to implement a registration page I don't want the login screen to pop up though, the registration page should be public. does anyone know how to deactivate the login screen there?

Answer 1

That depends on how you implement your registration page, show your code, where you define the link and route for registration. Normally, that template uses AuthenticationGuard in helper function. Check About module:

const routes: Routes = [
  Shell.childRoutes([
    { path: 'about', component: AboutComponent, data: { title: extract('About') } }
  ])
];

If you define your registration module with routes without Shell.childRoutes helper, it will not trigger AuthenticationGuard and thus won't redirect to login. Like this:

const routes: Routes = [
    { path: 'register', component: RegisterComponent, data: { title: extract('Register') } }
];

If one also wants to preserve original Shell functionality, routes can be as following:

const routes: Routes = [
   {
      path: '',
      component: ShellComponent,
      children: [
        { path: 'register', component: RegisterComponent, data: { title: extract('Register') } }
      ],
      // canActivate: [AuthenticationGuard],
      // Reuse ShellComponent instance when navigating between child views
      data: { reuse: true }
    }

];

As an alternative, helper can be defined in Shell it self:

export class Shell {

  // existing helper
  static childRoutes(routes: Routes): Route {
    return {
      path: '',
      component: ShellComponent,
      children: routes,
      canActivate: [AuthenticationGuard],
      // Reuse ShellComponent instance when navigating between child views
      data: { reuse: true }
    };
  }

  // add new helper without guard
  static unAuthenticatedChildRoutes(routes: Routes): Route {
    return {
      path: '',
      component: ShellComponent,
      children: routes,
      // Reuse ShellComponent instance when navigating between child views
      data: { reuse: true }
    };
  }
}

And then, in your component:

const routes: Routes = [
  Shell.unAuthenticatedChildRoutes([
    { path: 'register', component: RegisterComponent, data: { title: extract('Register') } }
  ])
];