Angular Router Freeze
A better, simpler yet more powerful way to prevent navigation in Angular apps.
npm i ng-router-freezeFeatures
In contrast with Angular's built-in CanDeactivate based setup
- ✅ Super minimal setup, to get navigation blocking just decorate > allow > enable, and you're set!
- ✅ Super DRY. Perhaps TOOOO DRY.
- ✅ Allows even the child components to "deactivate" a route as opposed to just the component set in route config.
- ✅ Integration tested with Angular 8 (6, 7, 9 coming soon)
- 🚧 TODO - Deals with the infamous routing history bug known since 2016!!
Usage
As easy as 1, 2, 3!
1️⃣ First, include the NgRouterFreezeModule module in the AppModule:
import { BrowserModule } from '@angular/platform-browser';+ import { NgRouterFreezeModule } from 'ng-router-freeze'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [ BrowserModule,+ NgRouterFreezeModule, AppRoutingModule ] }) export class AppModule { }2️⃣ Then, add the navigation blocking logic to components:
// edit-report.component.ts import { Component, OnInit } from '@angular/core';+ import { WithNavigationBlocking, NavigationBlocking } from 'ng-router-freeze'; import { ModalService } from '../services/modal.service'; + @WithNavigationBlocking() @Component({ selector: 'dash-edit-report', templateUrl: `./edit-report.component.html`, styleUrls: ['./edit-report.component.scss'] })- export class EditReportComponent implements OnInit {+ export class EditReportComponent implements OnInit, NavigationBlocking { constructor(private modalService: ModalService) {} ... + canNavigate() {+ return this.isDraftSaved() || this.modalService.confirm('Discard changes?');+ } ... }3️⃣ Lastly, allow the component(s) to block navigation:
Navigation blocking will not kick in until the component is explicitly allowed for some or all routes in route config
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';+ import { NavigationGuard, enableNavigationBlocking } from 'ng-router-freeze'; import { ReportService } from './services/report.service'; import { ViewReportComponent } from './components/view-report.component'; import { NewReportComponent } from './components/new-report.component'; import { EditReportComponent } from './components/edit-report.component'; import { ReviewReportComponent } from './components/review-report.component'; export const routes: Routes = [ { path: ':id', data: { title: 'Report' }, component: ViewReportComponent,+ canDeactivate: [NavigationGuard] }, { path: 'new', data: { title: 'New Report' }, component: NewReportComponent,+ canDeactivate: [NavigationGuard] }, ]; + enableNavigationBlocking(routes, [+ { path: ':id', allow: [EditReportComponent, ReviewReportComponent] },+ { path: 'new', allow: [EditReportComponent] }+ ]); @NgModule({ declarations: [ ReportSummaryComponent, NewReportComponent, EditReportComponent, ReviewReportComponent ],+ // works with child routes as well imports: [RouterModule.forRoot(routes)], providers: [ReportService] }) export class AppRoutingModule { }👏👏 And that's it!
License
Licensed under MIT