Upgrade to Angular 17.x and to TS 5.4

e2e/package.json

@@ -54,7 +54,7 @@
     "prompts": "^2.4.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "typescript": "~5.1",
+    "typescript": "~5.4",
     "vue": "^3.2.33"
   }
 }

examples/angular-example/angular.json

@@ -53,18 +53,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "angular-example:build:production"
+              "buildTarget": "angular-example:build:production"
             },
             "development": {
-              "browserTarget": "angular-example:build:development"
+              "buildTarget": "angular-example:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-example:build"
+            "buildTarget": "angular-example:build"
           }
         },
         "test": {

examples/angular-example/package.json

@@ -11,14 +11,14 @@
   },
   "private": true,
   "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",
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/router": "^17.3.0",
     "@uppy/angular": "workspace:*",
     "@uppy/core": "workspace:*",
     "@uppy/drag-drop": "workspace:*",
@@ -28,27 +28,27 @@
     "@uppy/webcam": "workspace:*",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular-eslint/builder": "16.1.1",
-    "@angular-eslint/eslint-plugin": "16.1.1",
-    "@angular-eslint/eslint-plugin-template": "16.1.1",
-    "@angular-eslint/schematics": "16.1.1",
-    "@angular-eslint/template-parser": "16.1.1",
-    "@angular/cli": "~16.2.0",
-    "@angular/compiler-cli": "^16.2.0",
-    "@types/jasmine": "~4.3.0",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "eslint": "^8.0.0",
-    "jasmine-core": "~4.6.0",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/cli": "~17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
+    "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.1"
+    "typescript": "~5.4"
   }
 }

examples/svelte-example/package.json

@@ -28,7 +28,7 @@
     "svelte-check": "^1.6.0",
     "svelte-preprocess": "^5.0.0",
     "tslib": "^2.0.0",
-    "typescript": "~5.1"
+    "typescript": "~5.4"
   },
   "dependencies": {
     "@uppy/core": "workspace:*",

package.json

@@ -106,7 +106,7 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
     "tar": "^6.1.0",
-    "typescript": "~5.1",
+    "typescript": "~5.4",
     "vitest": "^1.2.1",
     "vue-template-compiler": "workspace:*"
   },
@@ -119,11 +119,11 @@
     "build:css": "yarn node ./bin/build-css.js",
     "build:svelte": "yarn workspace @uppy/svelte build",
     "build:angular": "yarn workspace angular build",
-    "build:js": "npm-run-all build:lib build:companion build:locale-pack build:svelte build:bundle",
+    "build:js": "npm-run-all build:lib build:companion build:locale-pack build:svelte build:angular build:bundle",
     "build:ts": "yarn workspaces list --no-private --json | yarn node ./bin/build-ts.mjs",
     "build:lib": "yarn node ./bin/build-lib.js",
     "build:locale-pack": "yarn workspace @uppy-dev/locale-pack build && eslint packages/@uppy/locales/src/en_US.js --fix && yarn workspace @uppy-dev/locale-pack test unused",
-    "build": "npm-run-all --parallel build:ts build:js build:css --serial size",
+    "build": "npm-run-all --serial build:ts --parallel build:js build:css --serial size",
     "contributors:save": "yarn node ./bin/update-contributors.mjs",
     "dev:with-companion": "npm-run-all --parallel start:companion dev",
     "dev": "yarn workspace @uppy-dev/dev dev",

packages/@uppy/angular/package.json

@@ -10,37 +10,37 @@
   },
   "private": true,
   "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",
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/router": "^17.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular-eslint/builder": "16.1.1",
-    "@angular-eslint/eslint-plugin": "16.1.1",
-    "@angular-eslint/eslint-plugin-template": "16.1.1",
-    "@angular-eslint/schematics": "16.1.1",
-    "@angular-eslint/template-parser": "16.1.1",
-    "@angular/cli": "~16.2.0",
-    "@angular/compiler-cli": "^16.2.0",
-    "@types/jasmine": "~4.3.0",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "jasmine-core": "~4.6.0",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/cli": "~17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^16.2.0",
-    "typescript": "~5.1"
+    "ng-packagr": "^17.3.0",
+    "typescript": "~5.4"
   }
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard-modal/dashboard-modal-demo.component.ts

@@ -1,8 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-// @ts-expect-error
 import * as Dashboard from '@uppy/dashboard';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 
 @Component({
   selector: 'uppy-dashboard-demo',
@@ -12,7 +11,7 @@ import { Uppy } from '@uppy/core';
   ></uppy-dashboard-modal>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardModalDemoComponent {
-  uppy: Uppy = new Uppy({ debug: true, autoProceed: true });
-  props: Dashboard.DashboardOptions;
+export class DashboardModalDemoComponent<M extends Meta, B extends Body> {
+  uppy: Uppy<M, B> = new Uppy({ debug: true, autoProceed: true });
+  props?: Dashboard.DashboardOptions<M, B>;
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard-modal/dashboard-modal.component.ts

@@ -7,25 +7,23 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
-// @ts-expect-error
 import Dashboard from '@uppy/dashboard';
-// @ts-expect-error
 import type { DashboardOptions } from '@uppy/dashboard';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
 import { UppyAngularWrapper } from '../../utils/wrapper';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 
 @Component({
   selector: 'uppy-dashboard-modal',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardModalComponent
-  extends UppyAngularWrapper<Dashboard>
+export class DashboardModalComponent<M extends Meta, B extends Body>
+  extends UppyAngularWrapper<M, B, DashboardOptions<M, B>, Dashboard<M, B>>
   implements OnDestroy, OnChanges
 {
-  @Input() uppy: Uppy = new Uppy();
-  @Input() props: DashboardOptions = {};
+  @Input() uppy: Uppy<M, B> = new Uppy();
+  @Input() props: DashboardOptions<M, B> = {};
   @Input() open: boolean = false;
 
   constructor(public el: ElementRef) {

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard/dashboard-demo.component.ts

@@ -1,15 +1,14 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-// @ts-expect-error
 import * as Dashboard from '@uppy/dashboard';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 
 @Component({
   selector: 'uppy-dashboard-demo',
   template: `<uppy-dashboard [uppy]="uppy" [props]="props"></uppy-dashboard>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardDemoComponent {
-  uppy: Uppy = new Uppy({ debug: true, autoProceed: true });
-  props: Dashboard.DashboardOptions;
+export class DashboardDemoComponent<M extends Meta, B extends Body> {
+  uppy: Uppy<M, B> = new Uppy({ debug: true, autoProceed: true });
+  props?: Dashboard.DashboardOptions<M, B>;
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard/dashboard.component.ts

@@ -7,25 +7,23 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
-// @ts-expect-error
 import Dashboard from '@uppy/dashboard';
-// @ts-expect-error
 import type { DashboardOptions } from '@uppy/dashboard';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
 import { UppyAngularWrapper } from '../../utils/wrapper';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 
 @Component({
   selector: 'uppy-dashboard',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardComponent
-  extends UppyAngularWrapper
+export class DashboardComponent<M extends Meta, B extends Body>
+  extends UppyAngularWrapper<M, B, DashboardOptions<M,B>>
   implements OnDestroy, OnChanges
 {
-  @Input() uppy: Uppy = new Uppy();
-  @Input() props: DashboardOptions = {};
+  @Input() uppy: Uppy<M, B> = new Uppy();
+  @Input() props: DashboardOptions<M, B> = {};
 
   constructor(public el: ElementRef) {
     super();

packages/@uppy/angular/projects/uppy/angular/src/lib/components/drag-drop/drag-drop-demo.component.ts

@@ -1,15 +1,14 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-// @ts-expect-error
 import * as DragDrop from '@uppy/drag-drop';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 
 @Component({
   selector: 'uppy-drag-drop-demo',
   template: ` <uppy-drag-drop [uppy]="uppy" [props]="props"></uppy-drag-drop> `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DragDropDemoComponent {
-  uppy: Uppy = new Uppy({ debug: true, autoProceed: true });
+export class DragDropDemoComponent<M extends Meta, B extends Body> {
+  uppy: Uppy<M, B> = new Uppy({ debug: true, autoProceed: true });
   props: DragDrop.DragDropOptions = {};
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/drag-drop/drag-drop.component.ts

@@ -7,24 +7,22 @@ import {
   SimpleChanges,
   ElementRef,
 } from '@angular/core';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
-// @ts-expect-error
 import DragDrop from '@uppy/drag-drop';
-// @ts-expect-error
 import type { DragDropOptions } from '@uppy/drag-drop';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 import { UppyAngularWrapper } from '../../utils/wrapper';
 
 @Component({
   selector: 'uppy-drag-drop',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DragDropComponent
-  extends UppyAngularWrapper
+export class DragDropComponent<M extends Meta, B extends Body>
+  extends UppyAngularWrapper<M, B, DragDropOptions>
   implements OnDestroy, OnChanges
 {
-  @Input() uppy: Uppy = new Uppy();
+  @Input() uppy: Uppy<M, B> = new Uppy();
   @Input() props: DragDropOptions = {};
 
   constructor(public el: ElementRef) {

packages/@uppy/angular/projects/uppy/angular/src/lib/components/progress-bar/progress-bar-demo.component.ts

@@ -4,10 +4,10 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
 } from '@angular/core';
-// @ts-expect-error
 import { Uppy } from '@uppy/core';
-// @ts-expect-error
-import { Tus, ProgressBar } from 'uppy';
+import Tus from '@uppy/tus';
+import type {ProgressBarOptions} from '@uppy/progress-bar';
+import { Body, Meta } from '@uppy/utils/lib/UppyFile';
 
 @Component({
   selector: 'uppy-progress-bar-demo',
@@ -56,12 +56,14 @@ import { Tus, ProgressBar } from 'uppy';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProgressBarDemoComponent implements OnInit {
-  uppyOne: Uppy;
-  uppyTwo: Uppy;
+export class ProgressBarDemoComponent<M extends Meta, B extends Body>
+  implements OnInit
+{
+  uppyOne!: Uppy<M, B>;
+  uppyTwo!: Uppy<M, B>;
   fileListOne: { url: string; fileName: string }[] = [];
   fileListTwo: { url: string; fileName: string }[] = [];
-  props: ProgressBar.ProgressBarOptions = {
+  props: ProgressBarOptions = {
     hideAfterFinish: false,
   };
 
@@ -82,10 +84,10 @@ export class ProgressBarDemoComponent implements OnInit {
     };
 
   ngOnInit(): void {
-    this.uppyOne = new Uppy({ debug: true, autoProceed: true })
+    this.uppyOne = new Uppy<M, B>({ debug: true, autoProceed: true })
       .use(Tus, { endpoint: 'https://master.tus.io/files/' })
       .on('upload-success', this.updateFileList('fileListOne'));
-    this.uppyTwo = new Uppy({ debug: true, autoProceed: false })
+    this.uppyTwo = new Uppy<M, B>({ debug: true, autoProceed: false })
       .use(Tus, { endpoint: 'https://master.tus.io/files/' })
       .on('upload-success', this.updateFileList('fileListTwo'));
   }