From 08e036322589d532138de0aa9fdb269e0ff04c9e Mon Sep 17 00:00:00 2001 From: Chee Hong Date: Tue, 19 Sep 2023 03:45:07 +0800 Subject: [PATCH] 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. --- angular.json | 5 +- codegen.yml | 14 +++--- package.json | 49 +++++++++---------- src/app/app.module.ts | 18 +++---- src/app/core/services/github.service.ts | 2 +- .../duplicated-issues.component.html | 2 +- tsconfig.json | 3 +- 7 files changed, 41 insertions(+), 52 deletions(-) diff --git a/angular.json b/angular.json index 8cda40664..665546e71 100644 --- 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 index 901a4fd51..c55b2c464 100644 --- a/codegen.yml +++ b/codegen.yml @@ -1,5 +1,5 @@ overwrite: true -schema: "graphql/schema/github-schema.ts" +schema: 'graphql/schema/github-schema.ts' documents: - graphql/fragments/*.graphql - graphql/queries/*.graphql @@ -7,8 +7,10 @@ documents: 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 index ed488890f..46d600b5d 100644 --- 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 index ba6f95067..e82cbd181 100644 --- 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 index db45956fa..1b9042842 100644 --- 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 index be1d58882..af561b623 100644 --- 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)" > - #{{ duplicatedIssue.id }} + #{{ duplicatedIssue.id }} cancel diff --git a/tsconfig.json b/tsconfig.json index abad11627..8e5ad9b0b 100644 --- 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"]