After successfully implementing the canDeactivate guard on the add and edit components, an issue arose when attempting to navigate from TypeScript code rather than using routerLink. The error message received was:
"Error: No component factory found for ConfirmationDialogComponent. Did you add it to @NgModule.entryComponents?".
Below are the routing settings:
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthenticationGuardService], children: []
},
...
{ path: 'report-project-list', component: ReportProjectListComponent, canActivate: [AuthenticationGuardService] }
];
Snippet of the component code leading to the navigation issue:
@Component({
selector: 'app-engagement-survey',
templateUrl: './engagement-survey.component.html',
})
export class EngagementSurveyComponent implements OnInit {
constructor(public dialog: MatDialog, private router: Router) {}
ngOnInit() {
this.subscription = this.clientService.currentClient.subscribe(currentClientValue => {
if (this.isClientChanged) {
this.router.navigate(['/home']); **// ISSUE HERE**
} else {
this.isClientChanged = true;
}
});
}
canDeactivate(): Observable<boolean> {
if (!this.dataSaved) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
width: '350px',
data: 'Leave Site? Changes you made may not be saved? '
});
return dialogRef.afterClosed();
} else {
return of(true);
}
}
}
Implementation of the can deactivate guard is as follows:
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
...
@Injectable({
providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate): Observable<boolean> {
return component.canDeactivate ? component.canDeactivate() : of(true);
}
}
The issue appears to occur only when using this.router.navigate() instead of routerLink directive.