Update to Angular 13

src-ui/.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

src-ui/angular.json

@@ -139,19 +139,6 @@
 						"scripts": []
 					}
 				},
-				"lint": {
-					"builder": "@angular-devkit/build-angular:tslint",
-					"options": {
-						"tsConfig": [
-							"tsconfig.app.json",
-							"tsconfig.spec.json",
-							"e2e/tsconfig.json"
-						],
-						"exclude": [
-							"**/node_modules/**"
-						]
-					}
-				},
 				"e2e": {
 					"builder": "@angular-devkit/build-angular:protractor",
 					"options": {

src-ui/package.json

@@ -11,15 +11,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.16",
+    "@angular/animations": "~13.2.2",
-    "@angular/common": "~12.2.16",
+    "@angular/common": "~13.2.2",
-    "@angular/compiler": "~12.2.16",
+    "@angular/compiler": "~13.2.2",
-    "@angular/core": "~12.2.16",
+    "@angular/core": "~13.2.2",
-    "@angular/forms": "~12.2.16",
+    "@angular/forms": "~13.2.2",
-    "@angular/localize": "~12.2.16",
+    "@angular/localize": "~13.2.2",
-    "@angular/platform-browser": "~12.2.16",
+    "@angular/platform-browser": "~13.2.2",
-    "@angular/platform-browser-dynamic": "~12.2.16",
+    "@angular/platform-browser-dynamic": "~13.2.2",
-    "@angular/router": "~12.2.16",
+    "@angular/router": "~13.2.2",
     "@ng-bootstrap/ng-bootstrap": "^9.1.2",
     "@ng-select/ng-select": "^7.0.0",
     "@ngneat/dirty-check-forms": "^1.1.0",
@@ -37,9 +37,9 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.16",
+    "@angular-devkit/build-angular": "~13.2.3",
-    "@angular/cli": "~12.2.16",
+    "@angular/cli": "~13.2.3",
-    "@angular/compiler-cli": "~12.2.16",
+    "@angular/compiler-cli": "~13.2.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
@@ -54,6 +54,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.5.5"
   }
 }

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -100,7 +100,7 @@
             </a>
           </li>
           <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
-            <a class="nav-link text-truncate" [routerLink]="" (click)="closeAll()">
+            <a class="nav-link text-truncate" [routerLink]="[]" (click)="closeAll()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
               </svg>&nbsp;<ng-container i18n>Close all</ng-container>

src-ui/src/app/components/common/input/select/select.component.html

@@ -30,7 +30,7 @@
   <small *ngIf="getSuggestions().length > 0">
     <span i18n>Suggestions:</span>&nbsp;
     <ng-container *ngFor="let s of getSuggestions()">
-      <a (click)="value = s.id; onChange(value)" [routerLink]="">{{s.name}}</a>&nbsp;
+      <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
     </ng-container>
 
 

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -43,7 +43,7 @@
   <small *ngIf="getSuggestions().length > 0">
     <span i18n>Suggestions:</span>&nbsp;
     <ng-container *ngFor="let tag of getSuggestions()">
-      <a (click)="addTag(tag.id)" [routerLink]="">{{tag.name}}</a>&nbsp;
+      <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag.name}}</a>&nbsp;
     </ng-container>
 
 

src-ui/src/app/components/common/tag/tag.component.html

@@ -1,2 +1,2 @@
 <span *ngIf="!clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
-<a [routerLink]="" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>
+<a [routerLink]="[][]" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -1,6 +1,6 @@
 <app-widget-frame [title]="savedView.name">
 
-  <a header-buttons [routerLink]="" (click)="showAll()" i18n>Show all</a>
+  <a header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
 
 
   <table content class="table table-sm table-hover table-borderless">

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -1,6 +1,6 @@
 <app-widget-frame title="Upload new documents" i18n-title>
   <div header-buttons>
-    <a *ngIf="getStatusSuccess().length > 0" (click)="dismissCompleted()" [routerLink]="" >
+    <a *ngIf="getStatusSuccess().length > 0" (click)="dismissCompleted()" [routerLink]="[][]" >
       <span i18n="This button dismisses all status messages about processed documents on the dashboard (failed and successful)">Dismiss completed</span>&nbsp;
       <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-check2-all" viewBox="0 0 16 16">
         <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7l-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"/>
@@ -24,7 +24,7 @@
       <p *ngIf="!alertsExpanded" class="mt-3 mb-0 text-center">
         <span i18n="This is shown as a summary line when there are more than 5 document in the processing pipeline.">{getStatusHidden().length, plural, =1 {One more document} other {{{getStatusHidden().length}} more documents}}</span>
         &nbsp;&bull;&nbsp;
-        <a [routerLink]="" (click)="alertsExpanded = !alertsExpanded" aria-controls="hiddenAlerts" [attr.aria-expanded]="alertsExpanded" i18n>Show all</a>
+        <a [routerLink]="[]" (click)="alertsExpanded = !alertsExpanded" aria-controls="hiddenAlerts" [attr.aria-expanded]="alertsExpanded" i18n>Show all</a>
       </p>
       <div #hiddenAlerts="ngbCollapse" [(ngbCollapse)]="!alertsExpanded">
         <div *ngFor="let status of getStatusHidden()">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -17,7 +17,7 @@
         <div class="d-flex justify-content-between align-items-center">
           <h5 class="card-title">
             <ng-container *ngIf="document.correspondent">
-              <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>
+              <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="[][]" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>
               <ng-template #nolink>{{(document.correspondent$ | async)?.name}}</ng-template>:
             </ng-container>
             {{document.title | documentTitle}}

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -23,7 +23,7 @@
     <div class="card-body p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">
-          <a [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
+          <a [routerLink]="[]" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
         {{document.title | documentTitle}}
       </p>

src-ui/src/app/components/document-list/document-list.component.html

@@ -159,7 +159,7 @@
         </td>
         <td class="d-none d-md-table-cell">
           <ng-container *ngIf="d.correspondent">
-            <a [routerLink]="" (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
+            <a [routerLink]="[]" (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
           </ng-container>
         </td>
         <td>
@@ -168,7 +168,7 @@
         </td>
         <td class="d-none d-xl-table-cell">
           <ng-container *ngIf="d.document_type">
-            <a [routerLink]="" (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
+            <a [routerLink]="[]" (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
           </ng-container>
         </td>
         <td>

src-ui/src/polyfills.ts

@@ -22,16 +22,6 @@ import '@angular/localize/init';
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src-ui/src/test.ts

@@ -17,7 +17,9 @@ declare const require: {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);