87968: Automatic upgrade to Angular 13

.gitignore

@@ -1,3 +1,4 @@
+/.angular/cache
 /__build__
 /__server_build__
 /node_modules

angular.json

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

package.json

@@ -51,17 +51,17 @@
     "ts-node": "10.2.1"
   },
   "dependencies": {
-    "@angular/animations": "~12.2.16",
+    "@angular/animations": "~13.2.6",
     "@angular/cdk": "^12.2.13",
-    "@angular/common": "~12.2.16",
+    "@angular/common": "~13.2.6",
-    "@angular/compiler": "~12.2.16",
+    "@angular/compiler": "~13.2.6",
-    "@angular/core": "~12.2.16",
+    "@angular/core": "~13.2.6",
-    "@angular/forms": "~12.2.16",
+    "@angular/forms": "~13.2.6",
-    "@angular/localize": "12.2.16",
+    "@angular/localize": "13.2.6",
-    "@angular/platform-browser": "~12.2.16",
+    "@angular/platform-browser": "~13.2.6",
-    "@angular/platform-browser-dynamic": "~12.2.16",
+    "@angular/platform-browser-dynamic": "~13.2.6",
-    "@angular/platform-server": "~12.2.16",
+    "@angular/platform-server": "~13.2.6",
-    "@angular/router": "~12.2.16",
+    "@angular/router": "~13.2.6",
     "@babel/runtime": "^7.17.2",
     "@kolkov/ngx-gallery": "1.2.3",
     "@material-ui/core": "^4.11.0",
@@ -128,10 +128,10 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~12.1.3",
-    "@angular-devkit/build-angular": "~12.2.16",
+    "@angular-devkit/build-angular": "~13.2.6",
-    "@angular/cli": "~12.2.16",
+    "@angular/cli": "~13.2.6",
-    "@angular/compiler-cli": "~12.2.16",
+    "@angular/compiler-cli": "~13.2.6",
-    "@angular/language-service": "~12.2.16",
+    "@angular/language-service": "~13.2.6",
     "@cypress/schematic": "^1.5.0",
     "@fortawesome/fontawesome-free": "^5.5.0",
     "@ngrx/store-devtools": "^12.5.1",
@@ -190,7 +190,7 @@
     "ts-loader": "^5.2.0",
     "ts-node": "^8.10.2",
     "tslint": "^6.1.3",
-    "typescript": "~4.3.5",
+    "typescript": "~4.5.5",
     "webpack": "^5.69.1",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.2.0",

src/app/community-list-page/community-list/community-list.component.html

@@ -8,7 +8,7 @@
         <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
       </button>
       <div class="align-middle pt-2">
-        <a *ngIf="node!==loadingNode" [routerLink]="" (click)="getNextPage(node)"
+        <a *ngIf="node!==loadingNode" [routerLink]="[][]" (click)="getNextPage(node)"
            class="btn btn-outline-primary btn-sm" role="button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </a>

src/app/item-page/simple/field-components/file-section/file-section.component.html

@@ -8,10 +8,10 @@
       </ds-file-download-link>
       <ds-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-loading>
       <div *ngIf="!isLastPage" class="mt-1" id="view-more">
-        <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
+        <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
       </div>
       <div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="collapse">
-        <a class="bitstream-collapse btn btn-outline-secondary btn-sm" [routerLink]="" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</a>
+        <a class="bitstream-collapse btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</a>
       </div>
     </div>
   </ds-metadata-field-wrapper>

src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html

@@ -7,11 +7,11 @@
       <ds-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
         <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
-          <a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' |
+          <a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
             translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</a>
         </div>
         <div *ngIf="objects.length > 1" class="float-right">
-          <a [routerLink]="" (click)="decrease()">{{'item.page.related-items.view-less' |
+          <a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
             translate:{ amount: representations?.length } }}</a>
         </div>
       </div>

src/app/item-page/simple/related-items/related-items.component.html

@@ -7,11 +7,11 @@
       <ds-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
         <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
-          <a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' |
+          <a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
             translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</a>
         </div>
         <div *ngIf="objects.length > 1" class="float-right" id="view-less">
-          <a [routerLink]="" (click)="decrease()">{{'item.page.related-items.view-less' |
+          <a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
             translate:{ amount: itemsRD?.payload?.page?.length } }}</a>
         </div>
       </div>

src/app/navbar/navbar.module.ts

@@ -38,13 +38,7 @@ const ENTRY_COMPONENTS = [
         NavbarSectionComponent,
         ExpandableNavbarSectionComponent
     ],
-  providers: [
+    providers: [],
-
-  ],
-  entryComponents: [
-    NavbarSectionComponent,
-    ExpandableNavbarSectionComponent
-  ],
     exports: [
         ThemedNavbarComponent,
         NavbarSectionComponent,

src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.spec.ts

@@ -33,8 +33,7 @@ import { ExportMetadataSelectorComponent } from './export-metadata-selector.comp
     ],
     exports: [],
     declarations: [ConfirmationModalComponent],
-  providers: [],
+    providers: []
-  entryComponents: [ConfirmationModalComponent],
 })
 class ModelTestModule {
 }

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="" [queryParams]="getQueryParams()" [queryParamsHandling]="'merge'" class="lead">
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[][]" [queryParams]="getQueryParams()" [queryParamsHandling]="'merge'" class="lead">
         {{object.value}}
     </a>
     <span *ngIf="linkType == linkTypes.None" class="lead">

src/polyfills.ts

@@ -18,16 +18,6 @@
  * 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/test.ts

@@ -12,7 +12,9 @@ declare const require: any;
 // 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$/);