build: update angular packages to version 12

BREAKING CHANGE:
Drop support for Angular versions prior to 12.0

angular.json

@@ -15,18 +15,23 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "es5BrowserSupport": true,
             "polyfills": "src/polyfills.ts",
             "assets": ["src/assets", "src/favicon.ico"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -39,13 +44,13 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app-uploadx:build",
-            "progress": false
+            "browserTarget": "app-uploadx:build"
           },
           "configurations": {
             "production": {
@@ -114,11 +119,10 @@
   "defaultProject": "app-uploadx",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "app",
-      "styleext": "scss"
+      "style": "scss"
     },
-    "@schematics/angular:directive": {
-      "prefix": "app"
+    "@schematics/angular:application": {
+      "strict": true
     }
   }
 }

e2e/app.e2e-spec.ts

@@ -12,8 +12,8 @@ describe('uploader App', async () => {
     page.getButton('Cancel All').click();
 
     const caps = await browser.driver.getCapabilities();
-    browser.browserName = caps.get('browserName');
-    if (browser.browserName === 'chrome') {
+    browser['browserName'] = caps.get('browserName');
+    if (browser['browserName'] === 'chrome') {
       // Assert that there are no errors emitted from the browser
       const logs = await browser.manage().logs().get(logging.Type.BROWSER);
       expect(logs).not.toContain(

package.json

@@ -34,7 +34,7 @@
     "server": "node ./server/ --debug",
     "build:pkg": "node scripts/build.js",
     "build:ng": "node scripts/build-app",
-    "build:prod": "ng build --prod",
+    "build:prod": "ng build --configuration production",
     "serve:prod": "angular-http-server --path dist/app",
     "build:latest": "npm run build:ng latest",
     "serve:latest": "angular-http-server --path integrations/latest/dist/latest",
@@ -43,53 +43,53 @@
     "prettier": "prettier --write \"**/*.{js,json,scss,md,ts,html}\""
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.10",
-    "@angular/cli": "~7.3.10",
-    "@angular/common": "~7.2.16",
-    "@angular/compiler": "~7.2.16",
-    "@angular/compiler-cli": "~7.2.16",
-    "@angular/core": "~7.2.16",
-    "@angular/platform-browser": "~7.2.16",
-    "@angular/platform-browser-dynamic": "~7.2.16",
-    "@angular/router": "~7.2.16",
+    "@angular-devkit/build-angular": "~12.2.13",
+    "@angular/cli": "~12.2.13",
+    "@angular/common": "~12.2.13",
+    "@angular/compiler": "~12.2.13",
+    "@angular/compiler-cli": "~12.2.13",
+    "@angular/core": "~12.2.13",
+    "@angular/platform-browser": "~12.2.13",
+    "@angular/platform-browser-dynamic": "~12.2.13",
+    "@angular/router": "~12.2.13",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@types/cpx": "^1.5.2",
-    "@types/jasmine": "~3.10.1",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "12.12.41",
     "@uploadx/core": "^4.5.0",
     "angular-http-server": "^1.10.0",
     "browserstack-local": "^1.4.8",
-    "codelyzer": "^5.2.2",
+    "codelyzer": "^6.0.0",
     "core-js": "2.6.11",
     "cpx": "^1.5.0",
     "husky": "^7.0.2",
-    "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "^7.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.5",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "lint-staged": "^11.1.2",
-    "ng-packagr": "^5.7.1",
+    "ng-packagr": "^12.2.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.4.1",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.6.7",
     "ts-node": "^10.2.1",
-    "tslib": "^1.9.0",
-    "tslint": "^5.20.1",
+    "tslib": "^2.0.0",
+    "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
-    "typescript": "~3.2.4",
-    "zone.js": "0.8.26"
+    "typescript": "~4.3.5",
+    "zone.js": "~0.11.4"
   },
   "peerDependencies": {
-    "@angular/core": ">=7.0.0 <13.0.0",
-    "rxjs": "^6.3.0"
+    "@angular/core": ">=12.0.0 <14.0.0",
+    "rxjs": "^6.6.0"
   },
   "lint-staged": {
     "*.{js,json,scss,md,ts,html}": [

scripts/build-app.js

@@ -10,9 +10,9 @@ const TEMP = join(require('os').tmpdir(), 'ngx-uploadx-build');
 const baseDir = resolve(`${__dirname}/..`);
 const integrationsPath = resolve(baseDir, `integrations`);
 const buildCmd = 'ng build --configuration production';
-const ngUpdateCmd = 'ng update @angular/core --allow-dirty --migrateOnly=true --from=7.2';
+const ngUpdateCmd = 'ng update @angular/core --allow-dirty --migrateOnly=true --from=12';
 const ngNewCmd = projectName =>
-  `ng new ${projectName} --style=scss --strict=true --skipInstall=true --skipGit=true --routing=true`;
+  `ng new ${projectName} --style=scss --skipInstall=true --skipGit=true --routing=true`;
 
 const cleanup = directory => new Promise(resolve => require('rimraf')(directory, resolve));
 

src/app/app.module.ts

@@ -32,7 +32,7 @@ import { TusComponent } from './tus/tus.component';
     TusComponent
   ],
   imports: [
-    RouterModule.forRoot(appRoutes),
+    RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' }),
     BrowserModule,
     UploadxModule.withConfig({
       headers: { 'ngsw-bypass': 'true' },

src/app/directive-way/directive-way.component.spec.ts

@@ -2,7 +2,7 @@
 import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { UPLOADX_AJAX, UploadxDirective } from 'ngx-uploadx';
+import { UploadxDirective, UPLOADX_AJAX } from 'ngx-uploadx';
 import { timer } from 'rxjs';
 import { DirectiveWayComponent } from './directive-way.component';
 
@@ -41,7 +41,7 @@ describe('DirectiveWayComponent', () => {
     await timer(10).toPromise();
     const { headers, url, data } = ajaxSpy.calls.mostRecent().args[0];
     expect(url).toBe(comp.options.endpoint!);
-    expect(headers!.Authorization).toContain('Bearer ');
+    expect(headers!['Authorization']).toContain('Bearer ');
     expect(headers!['X-Upload-Content-Length']).toBe('0');
     expect(JSON.parse(data as string)).toEqual(jasmine.objectContaining({ size: 0 }));
   });

src/app/file-generator/download/download.component.spec.ts

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DownloadComponent } from './download.component';
 
 describe('DownloadComponent', () => {
   let component: DownloadComponent;
   let fixture: ComponentFixture<DownloadComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [DownloadComponent]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [DownloadComponent]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DownloadComponent);

src/app/multi-service/a/a.component.spec.ts

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AComponent } from './a.component';
 
 describe('AComponent', () => {
   let component: AComponent;
   let fixture: ComponentFixture<AComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [AComponent]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [AComponent]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AComponent);

src/app/multi-service/b/b.component.spec.ts

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { BComponent } from './b.component';
 
 describe('BComponent', () => {
   let component: BComponent;
   let fixture: ComponentFixture<BComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [BComponent]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [BComponent]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BComponent);

src/app/multi-service/multi-service.component.spec.ts

@@ -1,17 +1,19 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MultiServiceComponent } from './multi-service.component';
 
 describe('MultiServiceComponent', () => {
   let component: MultiServiceComponent;
   let fixture: ComponentFixture<MultiServiceComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [MultiServiceComponent],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [MultiServiceComponent],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MultiServiceComponent);

src/app/multiple-directive/multiple-directive.component.spec.ts

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { UploadxDirective } from 'ngx-uploadx';
 import { MultipleDirectiveComponent } from './multiple-directive.component';
 
 describe('MultipleDirectiveComponent', () => {
   let component: MultipleDirectiveComponent;
   let fixture: ComponentFixture<MultipleDirectiveComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [MultipleDirectiveComponent, UploadxDirective]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [MultipleDirectiveComponent, UploadxDirective]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MultipleDirectiveComponent);

src/app/on-push/on-push.component.spec.ts

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OnPushComponent } from './on-push.component';
 
 describe('OnPushComponent', () => {
   let component: OnPushComponent;
   let fixture: ComponentFixture<OnPushComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [OnPushComponent]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [OnPushComponent]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(OnPushComponent);

src/app/service-code-way/service-code-way.component.spec.ts

@@ -1,5 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { UploadxService } from 'ngx-uploadx';
 import { Observable } from 'rxjs';
 import { ServiceCodeWayComponent } from './service-code-way.component';
@@ -56,12 +56,15 @@ describe('ServiceCodeWayComponent', () => {
   });
 
   describe('onChange', () => {
-    it('should upload the files after the input files change', async(() => {
-      const dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
-      dataTransfer.items.add(new File(['foo'], 'programmatically_created.txt'));
-      spyOn(comp, 'getFiles').and.returnValue(dataTransfer.files);
-      comp.onChange();
-      expect(uploadService.handleFiles).toHaveBeenCalled();
-    }));
+    it(
+      'should upload the files after the input files change',
+      waitForAsync(() => {
+        const dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
+        dataTransfer.items.add(new File(['foo'], 'programmatically_created.txt'));
+        spyOn(comp, 'getFiles').and.returnValue(dataTransfer.files);
+        comp.onChange();
+        expect(uploadService.handleFiles).toHaveBeenCalled();
+      })
+    );
   });
 });

src/polyfills.ts

@@ -36,7 +36,7 @@
 /***************************************************************************************************
  * 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.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS