Introducing @rxweb/angular-router : Handle Angular Routing Better 🚀

The Current Scenario

Angular router being able to build SPA applications supporting multiple route provides goodness of using a single HTML with all the functionalities all over the application and rendering the UI based upon the route.

Additionally configure route guards for granting and removing the access, which is pretty cool.

Another aspects to be taken care of while developing an application with high end security are authentication and authorization such that they are performed separately that too in a concentrated way.

A single guard to manage access and a pre-route action handler to manage the data of the application, How is these managed in an angular application and what are the high level challenges faced ?????

What is not present ?

1) Central Orientation to handle authorization and authentication pre-route with separation of concerns.
2) Globally Resolve User before Component initialization.
3) Globally Manage Access based upon the user role.

4) Single CanActivate for all the routes to handle complex business rules separately.
5) Global and component level Middlewares.

Why @rxweb/angular-router ?

• A decorator @routerModule which is declared in the root module with the role to handle authentication, authorization and middlewares throughout the application with are managed individually.
• A single CanActivate guard to handle all the routes.
• Component wise access check using @access decorator.
• Centralized URL encryption.

with @rxweb/angular-router

What is @rxweb/angular-router ?

It is a package to manage routes in an angular application along with authorization, authentication in an intuitive and segregated way.

It comes with Simplification of actions to be done whenever the user redirects to the route and the data is rendered, which increases the Maintainability of the router module in our angular application and helps to avoid using multiple guards while makes the application consistent.

The Usage

Installation :

npm install @rxweb/angular-router

Add the following in the import statement in the app.module.ts

import { RxRoutingModule } from '@rxweb/angular-router';

As we discussed we will see how to globally use authorization, authentication and middlewares using a single decorator @routerModule.

The @routerModule is declared in the app.module.ts as below

@routerModule({
    authentication:,
    authorization :,
    middlewares : [] 
  })
@NgModule({...})
export class AppModule { }

We will add values to their respective properties by the tutorial listed down as below :

The same way we will add authorization and middlewares added globally as well on the component level in the next parts

For implementing Authorization, refer to Simplified way to perform Authentication in Angular Routing

Conclusion

In this article we learnt about @rxweb/angular-router and its benefits and the tutorial parts of the implementation in @routerModule, along with the global implementation it also contains directive based authorization, component based middlewares and access level.