refactor: update to Angular 13

.gitignore

@@ -18,6 +18,7 @@ capacitor.config.json
 
 .idea/
 .ionic/
+.angular/
 .sourcemaps/
 .sass-cache/
 .tmp/

.gitlab-ci.yml

@@ -33,7 +33,7 @@ setup:
 build:
   stage: build
   script:
-    - npm run build
+    - npm run build:prod
   artifacts:
     paths:
       - www
@@ -125,7 +125,7 @@ executable:
 review:
   stage: deploy
   script:
-    - .gitlab/ci/enableGitlabReviewToolbar.sh www/index.html "$CI_PROJECT_ID" "$CI_OPEN_MERGE_REQUESTS"
+    - npm run build:prod
     - cp www/index.html www/200.html
     - ./node_modules/.bin/surge -p ./www -d https://$CI_PROJECT_PATH_SLUG-$CI_ENVIRONMENT_SLUG.surge.sh/
   environment:
@@ -154,6 +154,7 @@ stop_review:
 staging:
   stage: deploy
   script:
+    - npm run build:prod
     - cp www/index.html www/200.html
     - ./node_modules/.bin/surge -p ./www -d https://$CI_PROJECT_PATH_SLUG-staging.surge.sh/
   environment:

angular.json

@@ -53,13 +53,7 @@
               "./node_modules/leaflet/dist/leaflet.css",
               "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
             ],
-            "scripts": [],
+            "scripts": []
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -69,13 +63,8 @@
                   "with": "src/environments/environment.production.ts"
                 }
               ],
-              "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
+              "subresourceIntegrity": true,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -88,6 +77,14 @@
                 }
               ]
             },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "ci": {
               "budgets": [
                 {
@@ -98,7 +95,7 @@
               "progress": false
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "development"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -109,11 +106,15 @@
             "production": {
               "browserTarget": "app:build:production"
             },
+            "development": {
+              "browserTarget": "app:build:development"
+            },
             "ci": {
               "progress": false,
               "browserTarget": "app:build"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

karma.conf.js

@@ -36,7 +36,7 @@ module.exports = function (config) {
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
-    reporters: config.coverage ? ['mocha', 'coverage-istanbul'] : ['mocha'],
+    reporters: config.buildWebpack.options.codeCoverage ? ['mocha', 'coverage-istanbul'] : ['mocha'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -31,7 +31,7 @@
     "docker:serve": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash -c \"npm run start:external\"",
     "documentation": "compodoc -p tsconfig.json -d docs",
     "e2e": "ng e2e",
-    "licenses": "license-checker --json > src/assets/about/licenses.json && node accumulate-licenses.mjs",
+    "licenses": "license-checker --json > src/assets/about/licenses.json && node scripts/accumulate-licenses.mjs",
     "lint": "ng lint",
     "lint:fix": "eslint --fix -c .eslintrc.json --ignore-path .eslintignore --ext .ts,.html src/",
     "ng": "ng",
@@ -49,18 +49,18 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "12.2.16",
+    "@angular/animations": "13.3.2",
-    "@angular/cdk": "12.2.13",
+    "@angular/cdk": "13.3.2",
-    "@angular/common": "12.2.16",
+    "@angular/common": "13.3.2",
-    "@angular/core": "12.2.16",
+    "@angular/core": "13.3.2",
-    "@angular/forms": "12.2.16",
+    "@angular/forms": "13.3.2",
-    "@angular/platform-browser": "12.2.16",
+    "@angular/platform-browser": "13.3.2",
-    "@angular/platform-browser-dynamic": "12.2.16",
+    "@angular/platform-browser-dynamic": "13.3.2",
-    "@angular/router": "12.2.16",
+    "@angular/router": "13.3.2",
-    "@asymmetrik/ngx-leaflet": "8.1.0",
+    "@asymmetrik/ngx-leaflet": "13.0.2",
-    "@asymmetrik/ngx-leaflet-markercluster": "5.0.1",
+    "@asymmetrik/ngx-leaflet-markercluster": "13.0.1",
-    "@awesome-cordova-plugins/calendar": "5.40.0",
+    "@awesome-cordova-plugins/calendar": "5.41.0",
-    "@awesome-cordova-plugins/core": "5.40.0",
+    "@awesome-cordova-plugins/core": "5.41.0",
     "@capacitor-community/http": "1.4.1",
     "@capacitor/app": "1.1.1",
     "@capacitor/browser": "1.0.7",
@@ -79,92 +79,87 @@
     "@capacitor/storage": "1.2.5",
     "@ionic-native/core": "5.36.0",
     "@ionic-native/file-opener": "5.36.0",
-    "@ionic/angular": "6.0.8",
+    "@ionic/angular": "6.0.16",
     "@ionic/storage-angular": "3.0.6",
-    "@ngx-translate/core": "13.0.0",
+    "@ngx-translate/core": "14.0.0",
-    "@ngx-translate/http-loader": "6.0.0",
+    "@ngx-translate/http-loader": "7.0.0",
-    "@openstapps/api": "0.38.0",
+    "@openstapps/api": "0.40.0",
     "@openstapps/configuration": "0.29.0",
-    "@openstapps/core": "0.63.0",
+    "@openstapps/core": "0.65.1",
     "@transistorsoft/capacitor-background-fetch": "0.0.6",
     "capacitor-secure-storage-plugin": "0.6.2",
     "cordova-plugin-calendar": "5.1.6",
     "cordova-plugin-file-opener2": "3.0.5",
-    "core-js": "2.6.5",
+    "deepmerge": "4.2.2",
-    "deepmerge": "3.3.0",
+    "form-data": "4.0.0",
-    "form-data": "2.5.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.8.5",
     "jsonpath-plus": "6.0.1",
     "leaflet": "1.7.1",
     "leaflet.markercluster": "1.5.3",
-    "webpack-bundle-analyzer": "4.5.0",
+    "moment": "2.29.2",
-    "moment": "2.29.1",
     "ngx-logger": "4.3.3",
-    "ngx-markdown": "12.0.1",
+    "ngx-markdown": "13.1.0",
-    "ngx-moment": "5.0.0",
+    "ngx-moment": "6.0.2",
     "opening_hours": "3.7.0",
-    "qs": "6.10.3",
     "rxjs": "6.6.7",
-    "swiper": "7.1.0",
+    "swiper": "8.1.0",
     "tslib": "2.3.1",
     "zone.js": "0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1202.16",
+    "@angular-devkit/architect": "0.1303.2",
-    "@angular-devkit/build-angular": "12.2.16",
+    "@angular-devkit/build-angular": "13.3.2",
-    "@angular-devkit/core": "12.2.16",
+    "@angular-devkit/core": "13.3.2",
-    "@angular-devkit/schematics": "12.2.16",
+    "@angular-devkit/schematics": "13.3.2",
-    "@angular-eslint/builder": "13.1.0",
+    "@angular-eslint/builder": "13.2.0",
-    "@angular-eslint/eslint-plugin": "13.1.0",
+    "@angular-eslint/eslint-plugin": "13.2.0",
-    "@angular-eslint/eslint-plugin-template": "13.1.0",
+    "@angular-eslint/eslint-plugin-template": "13.2.0",
-    "@angular-eslint/schematics": "13.1.0",
+    "@angular-eslint/schematics": "13.2.0",
-    "@angular-eslint/template-parser": "13.1.0",
+    "@angular-eslint/template-parser": "13.2.0",
-    "@angular/cli": "12.2.16",
+    "@angular/cli": "13.3.2",
-    "@angular/compiler": "12.2.16",
+    "@angular/compiler": "13.3.2",
-    "@angular/compiler-cli": "12.2.16",
+    "@angular/compiler-cli": "13.3.2",
-    "@angular/language-service": "12.2.16",
+    "@angular/language-service": "13.3.2",
     "@capacitor/android": "3.4.3",
     "@capacitor/cli": "3.4.3",
     "@capacitor/ios": "3.4.3",
     "@compodoc/compodoc": "1.1.19",
     "@cypress/schematic": "1.6.0",
-    "@ionic/angular-toolkit": "5.0.3",
+    "@ionic/angular-toolkit": "6.1.0",
-    "@ionic/cli": "6.18.2",
+    "@ionic/cli": "6.19.0",
-    "@types/deepmerge": "2.2.0",
+    "@types/jasmine": "4.0.2",
-    "@types/form-data": "2.5.0",
-    "@types/jasmine": "3.10.3",
     "@types/jasminewd2": "2.0.10",
+    "@types/jsonpath": "0.2.0",
     "@types/leaflet": "1.7.9",
     "@types/leaflet.markercluster": "1.4.6",
     "@types/node": "14.18.12",
-    "@types/qs": "6.9.7",
+    "@typescript-eslint/eslint-plugin": "5.19.0",
-    "@typescript-eslint/eslint-plugin": "5.13.0",
+    "@typescript-eslint/parser": "5.19.0",
-    "@typescript-eslint/parser": "5.13.0",
     "conventional-changelog-cli": "2.2.2",
     "cordova-res": "0.15.4",
-    "cypress": "9.5.2",
+    "cypress": "9.5.4",
-    "eslint": "8.10.0",
+    "eslint": "8.13.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-jsdoc": "37.9.7",
+    "eslint-plugin-jsdoc": "38.1.6",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-unicorn": "41.0.0",
+    "eslint-plugin-unicorn": "42.0.0",
-    "is-docker": "1.1.0",
+    "is-docker": "2.2.1",
-    "jasmine-core": "3.99.1",
+    "jasmine-core": "4.1.0",
     "jasmine-spec-reporter": "7.0.0",
     "jetifier": "2.0.0",
-    "karma": "6.3.17",
+    "karma": "6.3.18",
-    "karma-chrome-launcher": "3.1.0",
+    "karma-chrome-launcher": "3.1.1",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-jasmine": "4.0.1",
+    "karma-jasmine": "4.0.2",
     "karma-jasmine-html-reporter": "1.7.0",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
     "protractor": "7.0.0",
     "surge": "0.23.1",
     "ts-node": "10.7.0",
-    "typescript": "4.3.5",
+    "typescript": "4.4.4",
     "webpack-bundle-analyzer": "4.5.0"
   },
   "cordova": {

src/app/app.module.ts

@@ -65,6 +65,7 @@ import {LibraryModule} from './modules/library/library.module';
 import {StorageProvider} from './modules/storage/storage.provider';
 import {AssessmentsModule} from './modules/assessments/assessments.module';
 import {RoutingStackService} from './util/routing-stack.service';
+import {SCSettingValue} from '@openstapps/core';
 
 registerLocaleData(localeDe);
 
@@ -97,7 +98,7 @@ export function initializerFactory(
         await settingsProvider.setSettingValue(
           'profile',
           'language',
-          translateService.getBrowserLang(),
+          translateService.getBrowserLang() as SCSettingValue,
         );
       }
       const languageCode = (await settingsProvider.getValue(

src/app/modules/auth/auth-helper.service.ts

@@ -64,6 +64,7 @@ export class AuthHelperService {
           key as keyof SCUserConfiguration
         ] as string,
         json: userInfo,
+        preventEval: true,
       })[0];
     }
 

src/app/modules/auth/capacitor-requestor.ts

@@ -1,7 +1,6 @@
 import {Requestor} from '@openid/appauth';
 import {Http, HttpHeaders, HttpResponse} from '@capacitor-community/http';
 import {XhrSettings} from 'ionic-appauth/lib/cordova';
-import qs from 'qs';
 
 // REQUIRES CAPACITOR PLUGIN
 // @capacitor-community/http
@@ -33,7 +32,7 @@ export class CapacitorRequestor extends Requestor {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async post<T>(url: string, data: any, headers: HttpHeaders) {
-    return Http.post({url, data: qs.parse(data), headers}).then(
+    return Http.post({url, data: data, headers}).then(
       (response: HttpResponse) => response.data as T,
     );
   }

src/app/modules/catalog/catalog.component.ts

@@ -105,7 +105,7 @@ export class CatalogComponent implements OnInit, OnDestroy {
         }).compare(a.name, b.name);
       });
     } catch (error) {
-      this.logger.error(error.message);
+      this.logger.error((error as Error).message);
       return;
     }
   }

src/app/modules/config/config.provider.spec.ts

@@ -86,7 +86,7 @@ describe('ConfigProvider', () => {
     try {
       await configProvider.fetch();
     } catch (error_) {
-      error = error_;
+      error = error_ as Error;
     }
     expect(error).toEqual(new ConfigFetchError());
   });
@@ -147,7 +147,7 @@ describe('ConfigProvider', () => {
     try {
       await configProvider.loadLocal();
     } catch (error_) {
-      error = error_;
+      error = error_ as Error;
     }
     expect(error).toEqual(new SavedConfigNotAvailable());
   });

src/app/modules/data/list/search-page.component.ts

@@ -205,7 +205,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
       const alert: HTMLIonAlertElement = await this.alertController.create({
         buttons: ['Dismiss'],
         header: 'Error',
-        subHeader: error.message,
+        subHeader: (error as Error).message,
       });
 
       await alert.present();

src/app/modules/data/stapps-web-http-client.provider.ts

@@ -76,7 +76,7 @@ export class StAppsWebHttpClient implements HttpClientInterface {
         body: response.body || {},
       });
     } catch (error) {
-      throw new Error(error);
+      throw new Error(error as string);
     }
   }
 }

src/app/modules/map/page/map-page.component.ts

@@ -260,7 +260,7 @@ export class MapPageComponent {
       const alert: HTMLIonAlertElement = await this.alertController.create({
         buttons: ['Dismiss'],
         header: 'Error',
-        subHeader: error.message,
+        subHeader: (error as Error).message,
       });
 
       await alert.present();

src/app/modules/settings/settings.provider.spec.ts

@@ -249,7 +249,7 @@ describe('SettingsProvider', () => {
         value as never,
       );
     } catch (error_) {
-      error = error_;
+      error = error_ as Error;
     }
 
     expect(error).toBeDefined();

src/app/modules/storage/storage.provider.spec.ts

@@ -100,7 +100,7 @@ describe('StorageProvider', () => {
     try {
       await storageProvider.get('something-else');
     } catch (error_) {
-      error = error_;
+      error = error_ as Error;
     }
     expect(error).toEqual(new Error('Value not found.'));
   });

src/index.html

@@ -6,6 +6,10 @@
     <title>StApps</title>
 
     <base href="/" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="script-src 'self' 'unsafe-inline' blob:;object-src 'none';base-uri 'none';style-src 'self' 'unsafe-inline';"
+    />
 
     <meta
       name="viewport"

src/polyfills.ts

@@ -22,54 +22,42 @@
  *      file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
  * BROWSER POLYFILLS
  */
 
-/*
- * IE9, IE10 and IE11 requires all of the following polyfills.
- */
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-/*
- * Evergreen browsers require these.
- */
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
-
 /**
- * Required to support Web Animations `@angular/platform-browser/animations`.
+ * By default, zone.js will patch all possible macroTask and DomEvents
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /***************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Zone JS is required by default for Angular itself.
  */
 import 'zone.js'; // Included with Angular CLI.
 

tsconfig.json

@@ -11,6 +11,7 @@
     "downlevelIteration": true,
     "importHelpers": true,
     "module": "es2020",
+    "target": "es2017",
     "lib": [
       "es2020",
       "dom"