Upgrade to Angular 11 (#1203)

Upgrade to Angular 11 Some of our packages are old and outdated. We should actively maintain and keep these packages up-to-date so it is easier to maintain in the future. Let's upgrade to Angular 11 to keep our packages up-to-date.
CATcher-org · Sep 18, 2023 · 08e0363 · 08e0363
1 parent 564b8ca
commit 08e0363
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 52 deletions.
diff --git a/angular.json b/angular.json
@@ -32,7 +32,7 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": [
-              "node_modules/marked/lib/marked.js",
+              "node_modules/marked/marked.min.js",
               "node_modules/prismjs/prism.js",
               "node_modules/prismjs/components/prism-csharp.min.js",
               "node_modules/prismjs/components/prism-css.min.js"
@@ -49,7 +49,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -72,7 +71,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -95,7 +93,6 @@
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": false,
               "aot": false,
               "extractLicenses": true,

diff --git a/codegen.yml b/codegen.yml
@@ -1,14 +1,16 @@
 overwrite: true
-schema: "graphql/schema/github-schema.ts"
+schema: 'graphql/schema/github-schema.ts'
 documents:
   - graphql/fragments/*.graphql
   - graphql/queries/*.graphql
   - graphql/mutations/*.graphql
 generates:
   graphql/graphql-types.ts:
     plugins:
-      - "typescript"
-      - "typescript-operations"
-      - "typescript-document-nodes"
-      - "typescript-resolvers"
-      - "fragment-matcher"
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-document-nodes'
+      - 'typescript-resolvers'
+      - 'fragment-matcher'
+    config:
+      apolloClientVersion: 3
diff --git a/package.json b/package.json
@@ -29,48 +29,44 @@
     }
   },
   "dependencies": {
-    "@angular/animations": "^10.2.5",
-    "@angular/cdk": "^10.2.7",
-    "@angular/common": "^10.2.5",
-    "@angular/compiler": "^10.2.5",
-    "@angular/core": "^10.2.5",
-    "@angular/forms": "^10.2.5",
-    "@angular/localize": "^10.2.5",
-    "@angular/material": "^10.2.7",
-    "@angular/platform-browser": "^10.2.5",
-    "@angular/platform-browser-dynamic": "^10.2.5",
-    "@angular/router": "^10.2.5",
+    "@angular/animations": "^11.2.14",
+    "@angular/cdk": "^11.2.13",
+    "@angular/common": "^11.2.14",
+    "@angular/compiler": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/forms": "^11.2.14",
+    "@angular/localize": "^11.2.14",
+    "@angular/material": "^11.2.13",
+    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/router": "^11.2.14",
     "@github/markdown-toolbar-element": "^2.1.1",
     "@octokit/rest": "^16.37.0",
     "ajv": "^6.11.0",
-    "apollo-angular": "^1.9.1",
-    "apollo-angular-link-http": "^1.10.0",
-    "apollo-cache-inmemory": "^1.6.0",
-    "apollo-client": "^2.6.0",
-    "apollo-link": "^1.2.14",
-    "apollo-link-context": "^1.0.20",
+    "apollo-angular": "^2.6.0",
     "arcsecond": "^4.1.0",
     "core-js": "^3.16.4",
     "diff-match-patch": "^1.0.4",
     "dompurify": "^2.3.1",
-    "graphql": "^14.6.0",
-    "graphql-tag": "2.11.0",
+    "graphql": "^15.0.0",
     "karma-spec-reporter": "0.0.32",
     "moment": "^2.24.0",
-    "ngx-markdown": "^10.1.1",
+    "ngx-markdown": "^11.2.0",
     "ngx-mat-select-search": "^3.3.3",
     "node-fetch": "^2.6.8",
     "rxjs": "6.6.7",
     "tslib": "^2.0.0",
     "uuid": "7.0.3",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "@apollo/client": "3.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.4",
-    "@angular/cli": "^10.2.4",
-    "@angular/compiler-cli": "^10.2.5",
-    "@angular/language-service": "^10.2.5",
+    "@angular-devkit/build-angular": "~0.1102.19",
+    "@angular/cli": "^11.2.19",
+    "@angular/compiler-cli": "^11.2.14",
+    "@angular/language-service": "^11.2.14",
     "@graphql-codegen/cli": "^2.6.4",
+    "@graphql-codegen/fragment-matcher": "^1.17.7",
     "@graphql-codegen/typescript": "1.17.7",
     "@graphql-codegen/typescript-document-nodes": "1.17.7",
     "@graphql-codegen/typescript-operations": "^1.18.4",
@@ -83,12 +79,11 @@
     "@types/node": "^15.6.1",
     "angular-cli-ghpages": "^1.0.0-rc.2",
     "codelyzer": "^6.0.2",
-    "graphql-codegen-fragment-matcher": "^0.18.2",
     "husky": "^4.2.5",
     "jasmine": "^3.9.0",
     "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.4.2",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-firefox-launcher": "^2.1.1",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,11 +3,10 @@ import { ErrorHandler, NgModule, NgZone } from '@angular/core';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NavigationEnd, Router } from '@angular/router';
-import { Apollo, ApolloModule } from 'apollo-angular';
-import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
-import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
-import { ApolloLink } from 'apollo-link';
-import { setContext } from 'apollo-link-context';
+import { ApolloLink, InMemoryCache } from '@apollo/client/core';
+import { setContext } from '@apollo/client/link/context';
+import { Apollo } from 'apollo-angular';
+import { HttpLink } from 'apollo-angular/http';
 import { MarkdownModule, MarkedOptions } from 'ngx-markdown';
 import 'reflect-metadata';
 import graphqlTypes from '../../graphql/graphql-types';
@@ -56,9 +55,7 @@ import { SharedModule } from './shared/shared.module';
         useFactory: markedOptionsFactory
       }
     }),
-    AppRoutingModule,
-    ApolloModule,
-    HttpLinkModule
+    AppRoutingModule
   ],
   providers: [
     {
@@ -99,10 +96,7 @@ export class AppModule {
       return { headers: { Authorization: `Token ${this.authService.accessToken.getValue()}` } };
     });
     const link = ApolloLink.from([basic, auth, this.httpLink.create({ uri: URI })]);
-    const fragmentMatcher = new IntrospectionFragmentMatcher({
-      introspectionQueryResultData: graphqlTypes
-    });
-    const cache = new InMemoryCache({ fragmentMatcher });
+    const cache = new InMemoryCache({ possibleTypes: graphqlTypes.possibleTypes });
     this.apollo.create({
       link: link,
       cache: cache

diff --git a/src/app/core/services/github.service.ts b/src/app/core/services/github.service.ts
@@ -1,7 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { ApolloQueryResult } from '@apollo/client/core';
 import { Apollo, QueryRef } from 'apollo-angular';
-import { ApolloQueryResult } from 'apollo-client';
 import { DocumentNode } from 'graphql';
 import { forkJoin, from, Observable, of, throwError } from 'rxjs';
 import { catchError, filter, map, mergeMap, throwIfEmpty } from 'rxjs/operators';

diff --git a/src/app/shared/issue/duplicatedIssues/duplicated-issues.component.html b/src/app/shared/issue/duplicatedIssues/duplicated-issues.component.html
@@ -8,7 +8,7 @@
       matTooltipPosition="above"
       (removed)="removeDuplicateStatus(duplicatedIssue)"
     >
-      <a class="no-underline link-grey-dark" [routerLink]="['../' + duplicatedIssue.id]"> #{{ duplicatedIssue.id }} </a>
+      <a class="no-underline link-grey-dark" [routerLink]="['./' + duplicatedIssue.id]"> #{{ duplicatedIssue.id }} </a>
       <mat-icon *ngIf="permissions.isTeamResponseEditable() || permissions.isTutorResponseEditable()" matChipRemove>cancel</mat-icon>
     </mat-chip>
   </mat-chip-list>

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,7 +17,8 @@
     "paths": {
       "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
       "core-js/es6/": ["node_modules/core-js/es/"]
-    }
+    },
+    "allowSyntheticDefaultImports": true
   },
   "include": ["main.ts", "src/**/*"],
   "exclude": ["node_modules"]