Merging angular-upgrade branch

angular.json

@@ -30,7 +30,14 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/uikit/dist/js/uikit.min.js",
               "node_modules/uikit/dist/js/uikit-icons.min.js"
-            ]
+            ],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -43,7 +50,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -67,7 +73,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -81,7 +86,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",

package.json

@@ -11,18 +11,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.0.0",
+    "@angular/animations": "~12.1.1",
-    "@angular/common": "~7.0.0",
+    "@angular/common": "~12.1.1",
-    "@angular/compiler": "~7.0.0",
+    "@angular/compiler": "~12.1.1",
-    "@angular/core": "~7.0.0",
+    "@angular/core": "~12.1.1",
-    "@angular/forms": "~7.0.0",
+    "@angular/forms": "~12.1.1",
-    "@angular/http": "~7.0.0",
+    "@angular/localize": "^12.1.1",
-    "@angular/platform-browser": "~7.0.0",
+    "@angular/platform-browser": "~12.1.1",
-    "@angular/platform-browser-dynamic": "~7.0.0",
+    "@angular/platform-browser-dynamic": "~12.1.1",
-    "@angular/router": "~7.0.0",
+    "@angular/router": "~12.1.1",
     "@highcharts/map-collection": "^1.1.2",
-    "angular-ng-autocomplete": "^2.0.1",
+    "angular-ng-autocomplete": "^2.0.5",
-    "core-js": "^2.5.4",
+    "core-js": "^2.6.12",
     "dom-to-image": "^2.6.0",
     "echarts": "^4.2.1",
     "font-awesome": "^4.7.0",
@@ -32,28 +32,28 @@
     "jspdf": "^1.5.3",
     "ngx-echarts": "^4.2.2",
     "proj4": "^2.5.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.6.7",
+    "tslib": "^2.0.0",
     "uikit": "^3.2.1",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular-devkit/build-angular": "~12.1.1",
-    "@angular/cli": "~7.0.4",
+    "@angular/cli": "~12.1.1",
-    "@angular/compiler-cli": "~7.0.0",
+    "@angular/compiler-cli": "~12.1.1",
-    "@angular/language-service": "~7.0.0",
+    "@angular/language-service": "~12.1.1",
-    "@types/jasmine": "~2.8.8",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^6.0.0",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~3.0.0",
+    "karma": "~6.3.4",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~1.1.2",
+    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~7.0.0",
-    "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
+    "eslint": "^7.30.0",
-    "typescript": "~3.1.1"
+    "typescript": "~4.3.5"
   }
 }

src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule

src/app/shared/reusablecomponents/read-more.component.ts

@@ -22,7 +22,7 @@ export class ReadMoreComponent implements AfterContentInit {
     //@Input() text: string;
     //maximum height of the container
     @Input("maxHeight") maxHeight: number = 100;
-    @ViewChild("readMoreDiv")
+    @ViewChild("readMoreDiv", {static: true})
     readMoreDiv: ElementRef;
     //set these to false to get the height of the expended container
     public isCollapsed: boolean = false;

src/environments/environment.ts

@@ -6,8 +6,8 @@ export const environment = {
   production: false,
   // API_ENDPOINT: '/uoa-repository-manager-service',
   environmentName: 'dev',
-  //API_ENDPOINT: 'http://stats.madgik.di.uoa.gr:8080/stats-api/',
+  API_ENDPOINT: 'http://stats.madgik.di.uoa.gr:8080/stats-api/',
-  API_ENDPOINT: 'http://stats.madgik.di.uoa.gr:8180/',
+  // API_ENDPOINT: 'http://stats.madgik.di.uoa.gr:8180/',
   // API_ENDPOINT: 'https://beta.services.openaire.eu/stats-tool/',
   FAQ_ENDPOINT: 'http://audrey.athenarc.gr:5555/api',
   FAQ_HOMEPAGE: 'http://audrey.athenarc.gr:5555',
@@ -21,4 +21,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -18,30 +22,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+/** IE10 and IE11 requires the following for NgClass support on SVG elements **/
-// 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';
-
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
-/** 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. */
@@ -57,22 +38,31 @@
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * 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.ts';
+ *
+ * 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;
+ *
  */
 
- // (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__BLACK_LISTED_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;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

src/tsconfig.app.json

@@ -4,6 +4,13 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
   "exclude": [
     "test.ts",
     "**/*.spec.ts"

tsconfig.json

@@ -2,14 +2,15 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
+    "importHelpers": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "es2020",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -73,7 +73,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [
@@ -118,12 +117,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
+    "no-inputs-metadata-property": true,
-    "use-output-property-decorator": true,
+    "no-outputs-metadata-property": true,
-    "use-host-property-decorator": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true