3.0.0 • Published 4 years ago
ng-router-freeze v3.0.0
Angular Router Freeze
A better, simpler yet more powerful way to prevent navigation in Angular apps.
npm i ng-router-freeze
Features
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