Upgrade to Angular 11 (#252)

Co-authored-by: Misra Aditya <[email protected]>
Co-authored-by: Chee Hong <[email protected]>

package.json

@@ -28,29 +28,24 @@
     }
   },
   "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/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/material": "^11.2.13",
+    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/router": "^11.2.14",
+    "@apollo/client": "3.2.0",
     "@octokit/rest": "^16.37.0",
     "@primer/octicons": "^17.12.0",
     "@types/geojson": "7946.0.8",
-    "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",
     "core-js": "^3.28.0",
     "diff-match-patch": "^1.0.4",
-    "graphql": "^14.6.0",
-    "graphql-tag": "2.11.0",
+    "graphql": "^15.0.0",
     "karma-spec-reporter": "0.0.32",
     "moment": "^2.24.0",
     "ngx-mat-select-search": "^3.3.3",
@@ -61,10 +56,10 @@
     "zone.js": "~0.10.2"
   },
   "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.14",
+    "@angular/compiler-cli": "^11.2.14",
+    "@angular/language-service": "^11.2.14",
     "@graphql-codegen/cli": "1.17.7",
     "@graphql-codegen/typescript": "1.17.7",
     "@graphql-codegen/typescript-document-nodes": "1.17.7",

src/app/app-routing.module.ts

@@ -14,7 +14,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -3,11 +3,11 @@ import { ErrorHandler, NgModule, NgZone } from '@angular/core';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { 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, PossibleTypesMap } from '@apollo/client/core';
+import { setContext } from '@apollo/client/link/context';
+import { Apollo } from 'apollo-angular';
+import { HttpLink } from 'apollo-angular/http';
+
 import 'reflect-metadata';
 import graphqlTypes from '../../graphql/graphql-types';
 import '../polyfills';
@@ -46,9 +46,7 @@ import { SharedModule } from './shared/shared.module';
     ActivityDashboardModule,
     SharedModule,
     HttpClientModule,
-    AppRoutingModule,
-    ApolloModule,
-    HttpLinkModule
+    AppRoutingModule
   ],
   providers: [
     {
@@ -109,10 +107,14 @@ export class AppModule {
       return { headers: { Authorization: `Token ${this.authService.accessToken.getValue()}` } };
     });
     const link = ApolloLink.from([log, basic, auth, this.httpLink.create({ uri: URI })]);
-    const fragmentMatcher = new IntrospectionFragmentMatcher({
-      introspectionQueryResultData: graphqlTypes
+    const possibleTypes: PossibleTypesMap = {};
+
+    graphqlTypes.__schema.types.forEach((type: any) => {
+      if (type.kind === 'UNION' || type.kind === 'INTERFACE') {
+        possibleTypes[type.name] = type.possibleTypes.map((possibleType: any) => possibleType.name);
+      }
     });
-    const cache = new InMemoryCache({ fragmentMatcher });
+    const cache = new InMemoryCache({ possibleTypes });
     this.apollo.create({
       link: link,
       cache: cache

src/app/core/services/factories/factory.github.service.ts

@@ -1,4 +1,5 @@
 import { Apollo } from 'apollo-angular';
+
 // import { AppConfig } from '../../../../environments/environment';
 import { ErrorHandlingService } from '../error-handling.service';
 import { GithubService } from '../github.service';

src/app/core/services/github.service.ts

@@ -1,7 +1,8 @@
 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 { BehaviorSubject, forkJoin, from, merge, Observable, of, throwError } from 'rxjs';
 import { catchError, filter, flatMap, map, throwIfEmpty } from 'rxjs/operators';

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"]