Merge pull request #3911 from crazyserver/MOBILE-3947

MOBILE-3947 angular: Update angular to v17
2024-01-24 15:11:57 +01:00 · 2024-01-24 15:11:57 +01:00 · d740f601bc
parent 0f441d199e f20a30dbb1
commit d740f601bc
23 changed files with 6248 additions and 2823 deletions
--- a/.github/workflows/testing.yml
+++ b/.github/workflows/testing.yml
@ -59,8 +59,6 @@ jobs:
        npm run build:prod
        npm run prod --prefix cordova-plugin-moodleapp
    - name: JavaScript code compatibility
-      # 6 BigInt usage errors are expected, they are fine without polyfill because they are only used if available.
-      # See https://github.com/videojs/mpd-parser/blob/v0.22.1/src/segment/urlType.js
      run: |
-        result=$(npx check-es-compat www/*.js --polyfills="{Array,String,TypedArray}.prototype.at,Array.prototype.flatMap,Array.prototype.flat,Array.prototype.includes,globalThis,Object.fromEntries,Object.hasOwn,Promise.prototype.finally,String.prototype.matchAll,String.prototype.trimRight" | grep "6 problems (6 errors, 0 warnings)" | wc -l); test $result -eq 1
+        npx check-es-compat www/*.js --polyfills="\{Array,String,TypedArray\}.prototype.at,Array.prototype.flatMap,Array.prototype.flat,Array.prototype.includes,globalThis,Object.fromEntries,Object.hasOwn,Promise.prototype.finally,String.prototype.matchAll,String.prototype.trimRight" | grep "No issues found. Files are compatible with the target runtimes."
        npx check-es-compat cordova-plugin-moodleapp/www/*.js
--- a/angular.json
+++ b/angular.json
@ -93,16 +93,16 @@
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
-            "browserTarget": "app:build",
            "disableHostCheck": true,
-            "port": 8100
+            "port": 8100,
+            "buildTarget": "app:build"
          },
          "configurations": {
            "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
            },
            "development": {
-              "browserTarget": "app:build:development"
+              "buildTarget": "app:build:development"
            }
          },
          "defaultConfiguration": "development"
@ -110,7 +110,7 @@
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
          }
        },
        "lint": {
--- a/6
+++ b/6
@ -10,6 +10,6 @@
 #
 # More info: https://github.com/browserslist/browserslist

-Android >= 5
-iOS >= 11
-Chrome >= 61
+Android >= 5.1
+iOS >= 14
+Chrome >= 79
--- a/cordova-plugin-moodleapp/package-lock.json
+++ b/cordova-plugin-moodleapp/package-lock.json
--- a/cordova-plugin-moodleapp/package.json
+++ b/cordova-plugin-moodleapp/package.json
@ -1,19 +1,19 @@
 {
-    "name": "cordova-plugin-moodleapp",
-    "private": true,
-    "types": "./types/index.d.ts",
-    "version": "0.0.0",
-    "scripts": {
-        "dev": "concurrently \"npm run dev:ts\" \"npm run dev:cordova\"",
-        "dev:ts": "scripts/build.js --watch",
-        "dev:cordova": "chokidar www/index.js -c scripts/copy-javascript.js",
-        "prod": "NODE_ENV=production scripts/build.js",
-        "lint": "tsc --noEmit"
-    },
-    "devDependencies": {
-        "chokidar-cli": "^3.0.0",
-        "concurrently": "^8.2.0",
-        "esbuild": "^0.18.11",
-        "typescript": "^5.1.6"
-    }
+  "name": "cordova-plugin-moodleapp",
+  "private": true,
+  "types": "./types/index.d.ts",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:ts\" \"npm run dev:cordova\"",
+    "dev:ts": "scripts/build.js --watch",
+    "dev:cordova": "chokidar www/index.js -c scripts/copy-javascript.js",
+    "prod": "NODE_ENV=production scripts/build.js",
+    "lint": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^8.2.0",
+    "esbuild": "^0.18.20",
+    "typescript": "^5.3.3"
+  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -45,38 +45,38 @@
    "lang:create-langindex": "./scripts/create_langindex.sh"
  },
  "dependencies": {
-    "@angular/animations": "^16.2.0",
-    "@angular/common": "^16.2.0",
-    "@angular/compiler": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
-    "@angular/platform-browser": "^16.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.0",
-    "@angular/router": "^16.2.0",
-    "@awesome-cordova-plugins/badge": "^6.3.0",
-    "@awesome-cordova-plugins/camera": "^6.3.0",
-    "@awesome-cordova-plugins/clipboard": "^6.3.0",
-    "@awesome-cordova-plugins/core": "^6.3.0",
-    "@awesome-cordova-plugins/device": "^6.3.0",
-    "@awesome-cordova-plugins/diagnostic": "^6.3.0",
-    "@awesome-cordova-plugins/file": "^6.3.0",
-    "@awesome-cordova-plugins/file-opener": "^6.3.0",
-    "@awesome-cordova-plugins/file-transfer": "^6.3.0",
-    "@awesome-cordova-plugins/geolocation": "^6.3.0",
-    "@awesome-cordova-plugins/http": "^6.3.0",
-    "@awesome-cordova-plugins/in-app-browser": "^6.3.0",
-    "@awesome-cordova-plugins/ionic-webview": "^6.3.0",
-    "@awesome-cordova-plugins/keyboard": "^6.3.0",
-    "@awesome-cordova-plugins/local-notifications": "^6.3.0",
-    "@awesome-cordova-plugins/media-capture": "^6.3.0",
-    "@awesome-cordova-plugins/network": "^6.3.0",
-    "@awesome-cordova-plugins/push": "^6.3.0",
-    "@awesome-cordova-plugins/splash-screen": "^6.3.0",
-    "@awesome-cordova-plugins/sqlite": "^6.3.0",
-    "@awesome-cordova-plugins/status-bar": "^6.3.0",
-    "@awesome-cordova-plugins/web-intent": "^6.3.0",
+    "@angular/animations": "^17.1.0",
+    "@angular/common": "^17.1.0",
+    "@angular/compiler": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/forms": "^17.1.0",
+    "@angular/platform-browser": "^17.1.0",
+    "@angular/platform-browser-dynamic": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "@awesome-cordova-plugins/badge": "^6.6.0",
+    "@awesome-cordova-plugins/camera": "^6.6.0",
+    "@awesome-cordova-plugins/clipboard": "^6.6.0",
+    "@awesome-cordova-plugins/core": "^6.6.0",
+    "@awesome-cordova-plugins/device": "^6.6.0",
+    "@awesome-cordova-plugins/diagnostic": "^6.6.0",
+    "@awesome-cordova-plugins/file": "^6.6.0",
+    "@awesome-cordova-plugins/file-opener": "^6.6.0",
+    "@awesome-cordova-plugins/file-transfer": "^6.6.0",
+    "@awesome-cordova-plugins/geolocation": "^6.6.0",
+    "@awesome-cordova-plugins/http": "^6.6.0",
+    "@awesome-cordova-plugins/in-app-browser": "^6.6.0",
+    "@awesome-cordova-plugins/ionic-webview": "^6.6.0",
+    "@awesome-cordova-plugins/keyboard": "^6.6.0",
+    "@awesome-cordova-plugins/local-notifications": "^6.6.0",
+    "@awesome-cordova-plugins/media-capture": "^6.6.0",
+    "@awesome-cordova-plugins/network": "^6.6.0",
+    "@awesome-cordova-plugins/push": "^6.6.0",
+    "@awesome-cordova-plugins/splash-screen": "^6.6.0",
+    "@awesome-cordova-plugins/sqlite": "^6.6.0",
+    "@awesome-cordova-plugins/status-bar": "^6.6.0",
+    "@awesome-cordova-plugins/web-intent": "^6.6.0",
    "@ionic/angular": "^7.6.5",
-    "@ionic/cordova-builders": "^10.0.0",
+    "@ionic/cordova-builders": "^10.1.1",
    "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1",
    "@moodlehq/cordova-plugin-camera": "6.0.0-moodle.2",
    "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.5",
@ -131,19 +131,19 @@
    "ts-md5": "^1.2.7",
    "tslib": "^2.3.0",
    "video.js": "^7.21.1",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.3"
  },
  "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.1",
-    "@angular-devkit/build-angular": "^16.2.11",
-    "@angular-eslint/builder": "^16.2.0",
-    "@angular-eslint/eslint-plugin": "^16.2.0",
-    "@angular-eslint/eslint-plugin-template": "^16.2.0",
-    "@angular-eslint/schematics": "^16.2.0",
-    "@angular-eslint/template-parser": "^16.2.0",
-    "@angular/cli": "^16.2.10",
-    "@angular/compiler-cli": "^16.2.0",
-    "@angular/language-service": "^16.2.0",
+    "@angular-builders/custom-webpack": "^17.0.0",
+    "@angular-devkit/build-angular": "^17.1.0",
+    "@angular-eslint/builder": "^17.1.0",
+    "@angular-eslint/eslint-plugin": "^17.1.0",
+    "@angular-eslint/eslint-plugin-template": "^17.1.0",
+    "@angular-eslint/schematics": "^17.1.0",
+    "@angular-eslint/template-parser": "^17.1.0",
+    "@angular/cli": "^17.1.0",
+    "@angular/compiler-cli": "^17.1.0",
+    "@angular/language-service": "^17.1.0",
    "@ionic/angular-toolkit": "^10.0.0",
    "@ionic/cli": "^7.2.0",
    "@types/faker": "^5.1.3",
@ -153,7 +153,7 @@
    "@types/webpack-env": "^1.18.4",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
-    "check-es-compat": "3.1.0",
+    "check-es-compat": "3.2.0",
    "concurrently": "^8.2.0",
    "cordova-plugin-moodleapp": "file:cordova-plugin-moodleapp",
    "cross-env": "^7.0.3",
@ -182,7 +182,7 @@
    "terser-webpack-plugin": "^5.3.9",
    "ts-jest": "^29.1.1",
    "ts-node": "^8.3.0",
-    "typescript": "~5.1.3"
+    "typescript": "~5.3.3"
  },
  "engines": {
    "node": ">=18.18.2 <19"
--- a/patches/check-es-compat+3.1.0.patch
+++ b/patches/check-es-compat+3.1.0.patch
@ -1,65 +0,0 @@
-diff --git a/node_modules/check-es-compat/bin/cli.mjs b/node_modules/check-es-compat/bin/cli.mjs
-index 25c53f5..26ce475 100755
--- a/node_modules/check-es-compat/bin/cli.mjs
-+++ b/node_modules/check-es-compat/bin/cli.mjs
-@@ -17,7 +17,8 @@ if (args.length === 0) {
-   }
- }
- 
-async function execute(files) {
-+async function execute(args) {
-+  const { files, polyfills } = parseArguments(args);
-   const eslint = new ESLint({
-     // Ignore any config files
-     useEslintrc: false,
-@@ -34,7 +35,7 @@ async function execute(files) {
-         es2021: true,
-       },
-       rules: {
-        'ecmascript-compat/compat': 'error',
-+        'ecmascript-compat/compat': ['error', { polyfills }],
-       },
-     },
-   });
-@@ -46,3 +47,41 @@ async function execute(files) {
- 
-   return { hasErrors: results.some((result) => result.errorCount > 0) };
- }
-+
-+function parseArguments(args) {
-+    const files = [];
-+    const polyfills = [];
-+    let nextArgIsPolyfills = false;
-+
-+    for (const arg of args) {
-+        if (nextArgIsPolyfills) {
-+            nextArgIsPolyfills = false;
-+            polyfills.push(...splitPolyfillsArgument(arg));
-+            continue;
-+        }
-+
-+        if (arg.startsWith('--polyfills')) {
-+            if (arg.startsWith('--polyfills=')) {
-+                polyfills.push(...splitPolyfillsArgument(arg.slice(12)));
-+            } else {
-+                nextArgIsPolyfills = true;
-+            }
-+
-+            continue;
-+        }
-+
-+        files.push(arg);
-+    }
-+
-+    return { files, polyfills };
-+}
-+
-+function splitPolyfillsArgument(polyfills) {
-+    const prototypeAtPolyfill = '{Array,String,TypedArray}.prototype.at';
-+    const prototypeAtPlaceholder = '{{PROTOTYPEAT}}';
-+
-+    return polyfills
-+        .replace(prototypeAtPolyfill, prototypeAtPlaceholder)
-+        .split(',')
-+        .map(polyfill => polyfill === prototypeAtPlaceholder ? prototypeAtPolyfill : polyfill);
-+}
--- a/patches/check-es-compat+3.2.0.patch
+++ b/patches/check-es-compat+3.2.0.patch
@ -0,0 +1,66 @@
+diff --git a/node_modules/check-es-compat/bin/cli.mjs b/node_modules/check-es-compat/bin/cli.mjs
+index f4c0b55..381c321 100755
+--- a/node_modules/check-es-compat/bin/cli.mjs
+++ b/node_modules/check-es-compat/bin/cli.mjs
+@@ -17,7 +17,8 @@ if (args.length === 0) {
+   }
+ }
+ 
+-async function execute(files) {
+async function execute(args) {
+  const { files, polyfills } = parseArguments(args);
+   const eslint = new ESLint({
+     // Ignore any config files
+     useEslintrc: false,
+@@ -34,7 +35,7 @@ async function execute(files) {
+         es2023: true,
+       },
+       rules: {
+-        'ecmascript-compat/compat': 'error',
+        'ecmascript-compat/compat': ['error', { polyfills }],
+       },
+     },
+   });
+@@ -46,3 +47,42 @@ async function execute(files) {
+ 
+   return { hasErrors: results.some((result) => result.errorCount > 0) };
+ }
+
+function parseArguments(args) {
+  const files = [];
+  const polyfills = [];
+  let nextArgIsPolyfills = false;
+
+  for (const arg of args) {
+    if (nextArgIsPolyfills) {
+      nextArgIsPolyfills = false;
+      polyfills.push(...splitPolyfillsArgument(arg));
+      continue;
+    }
+
+    if (arg.startsWith('--polyfills')) {
+      if (arg.startsWith('--polyfills=')) {
+        polyfills.push(...splitPolyfillsArgument(arg.slice(12)));
+      } else {
+        nextArgIsPolyfills = true;
+      }
+
+      continue;
+    }
+
+    files.push(arg);
+  }
+
+  return { files, polyfills };
+}
+
+function splitPolyfillsArgument(polyfills) {
+  const prototypeAtPolyfill = '{Array,String,TypedArray}.prototype.at';
+  const prototypeAtPlaceholder = '{{PROTOTYPEAT}}';
+
+  return polyfills
+    .replaceAll('\\', '')
+    .replace(prototypeAtPolyfill, prototypeAtPlaceholder)
+    .split(',')
+    .map(polyfill => polyfill === prototypeAtPlaceholder ? prototypeAtPolyfill : polyfill);
+}
--- a/src/core/components/button-with-spinner/core-button-with-spinner.html
+++ b/src/core/components/button-with-spinner/core-button-with-spinner.html
@ -1,5 +1,5 @@
 <div *ngIf="!loading" @coreShowHideAnimation>
-    <ng-content></ng-content>
+    <ng-content />
 </div>

 <!-- Spinner. -->
--- a/src/core/components/combobox/core-combobox.html
+++ b/src/core/components/combobox/core-combobox.html
@ -5,7 +5,7 @@
        <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
    </div>

-    <ng-content></ng-content>
+    <ng-content />
 </ion-select>

 <ion-button *ngIf="interface === 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
--- a/src/core/components/context-menu/core-context-menu.html
+++ b/src/core/components/context-menu/core-context-menu.html
@ -2,4 +2,4 @@
    [attr.aria-controls]="uniqueId">
    <ion-icon [name]="icon" slot="icon-only" aria-hidden="true" />
 </ion-button>
-<ng-content></ng-content>
+<ng-content />
--- a/src/core/components/dynamic-component/core-dynamic-component.html
+++ b/src/core/components/dynamic-component/core-dynamic-component.html
@ -1,5 +1,5 @@
 <!-- Content to display if no dynamic component. -->
-<ng-content *ngIf="!instance"></ng-content>
+<ng-content *ngIf="!instance" />

 <!-- Container of the dynamic component -->
 <ng-container #dynamicComponent />
--- a/src/core/components/empty-box/core-empty-box.html
+++ b/src/core/components/empty-box/core-empty-box.html
@ -1,4 +1,4 @@
 <img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
 <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
 <p *ngIf="message">{{ message }}</p>
-<ng-content></ng-content>
+<ng-content />
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@ -2,4 +2,4 @@
    <ion-spinner color="primary" aria-hidden="true" />
    <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
 </div>
-<ng-content *ngIf="loaded" @coreShowHideAnimation></ng-content>
+<ng-content *ngIf="loaded" @coreShowHideAnimation />
--- a/src/core/components/mark-required/core-mark-required.html
+++ b/src/core/components/mark-required/core-mark-required.html
@ -1,3 +1,3 @@
-<ng-content></ng-content>
+<ng-content />
 <ion-icon *ngIf="coreMarkRequired" class="core-input-required-asterisk" name="fas-circle-exclamation" color="danger"
    [attr.aria-label]="requiredLabel" />
--- a/src/core/components/navbar-buttons/navbar-buttons.ts
+++ b/src/core/components/navbar-buttons/navbar-buttons.ts
@ -52,7 +52,7 @@ const BUTTON_HIDDEN_CLASS = 'core-navbar-button-hidden';
 */
@Component({
    selector: 'core-navbar-buttons',
-    template: '<ng-content></ng-content><template #contextMenuContainer>-</template>',
+    template: '<ng-content/><template #contextMenuContainer>-</template>',
    styleUrls: ['navbar-buttons.scss'],
 })
 export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
--- a/src/core/components/split-view/split-view.html
+++ b/src/core/components/split-view/split-view.html
@ -1,5 +1,5 @@
 <ion-content class="menu">
-    <ng-content></ng-content>
+    <ng-content />
 </ion-content>
 <ion-router-outlet class="content-outlet" />
 <core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true" />
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@ -33,5 +33,5 @@
    </ng-container>
 </ion-tab-bar>
 <div class="core-tabs-content-container" #originalTabs>
-    <ng-content></ng-content>
+    <ng-content />
 </div>
--- a/src/core/components/user-avatar/core-user-avatar.html
+++ b/src/core/components/user-avatar/core-user-avatar.html
@ -26,4 +26,4 @@
 <span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">
 </span>

-<ng-content></ng-content>
+<ng-content />
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@ -7,7 +7,7 @@
            <ion-icon name="fas-lock" *ngIf="module.visible === 0 || module.uservisible === false"
                [attr.aria-label]="'core.restricted' | translate" />
        </h1>
-        <ng-content select="[title]"></ng-content>
+        <ng-content select="[title]" />
    </ion-label>
 </ion-item>

@ -37,10 +37,10 @@
        <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
            [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : ''" />
    </div>
-    <ng-content select="[description]"></ng-content>
+    <ng-content select="[description]" />
 </div>

-<ng-content></ng-content>
+<ng-content />

 <!-- Activity has something offline. -->
 <ion-card class="core-warning-card" *ngIf="hasDataToSync">
--- a/src/core/features/login/components/exceeded-attempts/exceeded-attempts.html
+++ b/src/core/features/login/components/exceeded-attempts/exceeded-attempts.html
@ -3,7 +3,7 @@
        <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
        <ion-label>
            <p>
-                <ng-content></ng-content>
+                <ng-content />
            </p>
            <ion-button *ngIf="canContactSupport" fill="outline" color="medium" (click)="contactSupport()">
                {{ 'core.contactsupport' | translate }}
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@ -26,19 +26,19 @@
                <ng-container *ngFor="let item of items">
                    <ng-container [ngSwitch]="item">
                        <ng-container *ngSwitchCase="'LIST_OF_COURSE'">
-                            <ng-template *ngTemplateOutlet="allCourseList"></ng-template>
+                            <ng-template *ngTemplateOutlet="allCourseList" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'LIST_OF_CATEGORIES'">
-                            <ng-template *ngTemplateOutlet="categories"></ng-template>
+                            <ng-template *ngTemplateOutlet="categories" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'COURSE_SEARCH_BOX'">
-                            <ng-template *ngTemplateOutlet="courseSearch"></ng-template>
+                            <ng-template *ngTemplateOutlet="courseSearch" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'ENROLLED_COURSES'">
-                            <ng-template *ngTemplateOutlet="enrolledCourseList"></ng-template>
+                            <ng-template *ngTemplateOutlet="enrolledCourseList" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'NEWS_ITEMS'">
-                            <ng-template *ngTemplateOutlet="news"></ng-template>
+                            <ng-template *ngTemplateOutlet="news" />
                        </ng-container>
                    </ng-container>
                </ng-container>