Uncaught error when invalid link is clicked

src/app/app-routing.module.ts

@@ -12,7 +12,8 @@ const routes: Routes = [
   { path: 'phaseBugReporting', loadChildren: () => PhaseBugReportingModule, canLoad: [AuthGuard] },
   { path: 'phaseTeamResponse', loadChildren: () => PhaseTeamResponseModule, canLoad: [AuthGuard] },
   { path: 'phaseTesterResponse', loadChildren: () => PhaseTesterResponseModule, canLoad: [AuthGuard] },
-  { path: 'phaseModeration', loadChildren: () => PhaseModerationModule, canLoad: [AuthGuard] }
+  { path: 'phaseModeration', loadChildren: () => PhaseModerationModule, canLoad: [AuthGuard] },
+  { path: '**', redirectTo: '' }
 ];
 
 @NgModule({

src/app/core/directives/internal-link-disable.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, HostListener } from '@angular/core';
+import { ErrorHandlingService } from '../services/error-handling.service';
+
+class InvalidLinkError extends Error {
+  constructor() {
+    super('Invalid link!');
+    Object.setPrototypeOf(this, InvalidLinkError.prototype);
+  }
+}
+
+@Directive({
+  selector: '[disableInternalLink]'
+})
+export class InternalLinkDisableDirective {
+  constructor(private errorHandlingService: ErrorHandlingService) {}
+
+  @HostListener('click', ['$event'])
+  public onClick(e: MouseEvent): void {
+    const srcElement = e.target;
+
+    if (srcElement instanceof HTMLAnchorElement) {
+      const baseURI = srcElement.baseURI;
+      const href = srcElement.href;
+
+      if (href.startsWith(baseURI)) {
+        this.errorHandlingService.handleError(new InvalidLinkError());
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  }
+}

src/app/shared/comment-editor/comment-editor.component.html

@@ -57,7 +57,7 @@
     </mat-tab>
     <mat-tab label="Preview">
       <div class="tab-content" style="min-height: 228px">
-        <markdown #markdownArea *ngIf="commentField.value !== ''" [data]="sanitize(commentField.value)"></markdown>
+        <markdown #markdownArea *ngIf="commentField.value !== ''" [data]="sanitize(commentField.value)" disableInternalLink></markdown>
         <div *ngIf="commentField.value === ''">Nothing to preview.</div>
       </div>
     </mat-tab>

src/app/shared/issue/description/description.component.html

@@ -8,7 +8,7 @@ <h3 class="mat-title">{{ descriptionTitle }}</h3>
       </button>
     </div>
     <div *ngIf="!isEditing" class="comment">
-      <markdown [data]="issue.description"></markdown>
+      <markdown [data]="issue.description" disableInternalLink></markdown>
     </div>
     <div *ngIf="isEditing">
       <app-comment-editor

src/app/shared/shared.module.ts

@@ -4,15 +4,17 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { FormDisableControlDirective } from '../core/directives/form-disable-control.directive';
+import { InternalLinkDisableDirective } from '../core/directives/internal-link-disable.directive';
 import { ActionToasterModule } from './action-toasters/action-toasters.module';
 import { ErrorToasterModule } from './error-toasters/error-toaster.module';
 import { MaterialModule } from './material.module';
 
 @NgModule({
   imports: [CommonModule, FormsModule, ReactiveFormsModule, HttpClientModule, RouterModule, MaterialModule, ErrorToasterModule],
-  declarations: [FormDisableControlDirective],
+  declarations: [FormDisableControlDirective, InternalLinkDisableDirective],
   exports: [
     FormDisableControlDirective,
+    InternalLinkDisableDirective,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,

src/app/shared/view-issue/issue-dispute/issue-dispute.component.html

@@ -9,10 +9,10 @@ <h3 class="mat-title">Disputes</h3>
       <div class="container" *ngFor="let dispute of issue.issueDisputes; index as i; trackBy: trackDisputeList">
         <div style="display: flex; align-items: center">
           <div class="question-mark">?</div>
-          <markdown [data]="this.getItemTitleText(dispute.title)"></markdown>
+          <markdown [data]="this.getItemTitleText(dispute.title)" disableInternalLink></markdown>
         </div>
         <br />
-        <markdown [data]="dispute.description"></markdown>
+        <markdown [data]="dispute.description" disableInternalLink></markdown>
         <br />
         <div>
           <mat-checkbox
@@ -27,7 +27,7 @@ <h3 class="mat-title">Disputes</h3>
         <br />
         <div>
           <markdown data="### Tutor's Response: "></markdown>
-          <markdown [data]="dispute.tutorResponse" *ngIf="!isEditing"></markdown>
+          <markdown [data]="dispute.tutorResponse" *ngIf="!isEditing" disableInternalLink></markdown>
         </div>
         <div *ngIf="isEditing">
           <app-comment-editor

src/app/shared/view-issue/team-response/team-response.component.html

@@ -6,7 +6,7 @@ <h3 class="mat-title">Team's Response</h3>
       <button style="float: right" mat-button *ngIf="canEditIssue() && !isEditing" (click)="changeToEditMode()">Edit</button>
     </div>
     <div *ngIf="!isEditing" class="comment">
-      <markdown [data]="issue.teamResponse"></markdown>
+      <markdown [data]="issue.teamResponse" disableInternalLink></markdown>
     </div>
     <div *ngIf="isEditing">
       <app-comment-editor

src/app/shared/view-issue/tester-response/conflict-dialog/conflict-dialog.component.html

@@ -14,7 +14,7 @@ <h1 mat-dialog-title style="margin: 0">{{ 'The content you are editing has chang
       <mat-expansion-panel-header>
         <mat-panel-title class="response-title">
           <div class="question-mark">?</div>
-          <markdown [data]="data.updatedResponses[i].getTitleInMarkDown()"></markdown>
+          <markdown [data]="data.updatedResponses[i].getTitleInMarkDown()" disableInternalLink></markdown>
         </mat-panel-title>
         <mat-panel-description>
           <mat-chip-list>
@@ -25,7 +25,7 @@ <h1 mat-dialog-title style="margin: 0">{{ 'The content you are editing has chang
         </mat-panel-description>
       </mat-expansion-panel-header>
       <br />
-      <markdown [data]="data.updatedResponses[i].description"></markdown>
+      <markdown [data]="data.updatedResponses[i].description" disableInternalLink></markdown>
       <br />
       <div
         *ngIf="data.updatedResponses[i].isDisagree() === data.outdatedResponses[i].isDisagree() || !showDiff"

src/app/shared/view-issue/tester-response/tester-response.component.html

@@ -10,10 +10,10 @@ <h3 class="mat-title">Tester's Response</h3>
       <div class="container" *ngFor="let response of issue.testerResponses; index as i; trackBy: trackDisagreeList">
         <div style="display: flex; align-items: center">
           <div class="question-mark">?</div>
-          <markdown [data]="response.getTitleInMarkDown()"></markdown>
+          <markdown [data]="response.getTitleInMarkDown()" disableInternalLink></markdown>
         </div>
         <br />
-        <markdown [data]="response.description"></markdown>
+        <markdown [data]="response.description" disableInternalLink></markdown>
         <br />
         <div>
           <mat-radio-group
@@ -31,7 +31,7 @@ <h3 class="mat-title">Tester's Response</h3>
         <div *ngIf="testerResponseForm.get(getDisagreeRadioFormId(i)).value">
           <div>
             <p style="font-weight: 500">Reason for Disagreement:</p>
-            <markdown [data]="response.reasonForDisagreement" *ngIf="!isEditing"></markdown>
+            <markdown [data]="response.reasonForDisagreement" *ngIf="!isEditing" disableInternalLink></markdown>
           </div>
           <div *ngIf="isEditing">
             <app-comment-editor