Merge pull request #86 from itsaplev/master

Add angular 13 support

Author: itsaplev

.gitignore

@@ -31,6 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -6,6 +6,113 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
+    "ngx-flow-demo": {
+        "root": "",
+        "sourceRoot": "src",
+        "projectType": "application",
+        "prefix": "app",
+        "schematics": {},
+        "architect": {
+          "build": {
+            "builder": "@angular-devkit/build-angular:browser",
+            "options": {
+              "outputPath": "dist/ngx-flow-demo",
+              "index": "src/index.html",
+              "main": "src/main.ts",
+              "polyfills": "src/polyfills.ts",
+              "tsConfig": "src/tsconfig.app.json",
+              "assets": [
+                "src/favicon.ico",
+                "src/assets"
+              ],
+              "styles": [
+                "src/styles.css"
+              ],
+              "scripts": []
+            },
+            "configurations": {
+              "production": {
+                "fileReplacements": [
+                  {
+                    "replace": "src/environments/environment.ts",
+                    "with": "src/environments/environment.prod.ts"
+                  }
+                ],
+                "optimization": false,
+                "outputHashing": "all",
+                "sourceMap": true,
+                "namedChunks": false,
+                "aot": false,
+                "extractLicenses": true,
+                "vendorChunk": false,
+                "buildOptimizer": false
+              },
+              "development": {
+                "fileReplacements": [
+                  {
+                    "replace": "src/environments/environment.ts",
+                    "with": "src/environments/environment.prod.ts"
+                  }
+                ],
+                "optimization": false,
+                "outputHashing": "all",
+                "sourceMap": true,
+                "namedChunks": false,
+                "aot": false,
+                "extractLicenses": true,
+                "vendorChunk": false,
+                "buildOptimizer": false
+              }
+            }
+          },
+          "serve": {
+            "builder": "@angular-devkit/build-angular:dev-server",
+            "options": {
+              "browserTarget": "ngx-flow-demo:build"
+            },
+            "configurations": {
+              "production": {
+                "browserTarget": "ngx-flow-demo:build:browser"
+              }
+            }
+          },
+          "extract-i18n": {
+            "builder": "@angular-devkit/build-angular:extract-i18n",
+            "options": {
+              "browserTarget": "ngx-flow-demo:build"
+            }
+          },
+          "test": {
+            "builder": "@angular-devkit/build-angular:karma",
+            "options": {
+              "main": "src/test.ts",
+              "polyfills": "src/polyfills.ts",
+              "tsConfig": "src/tsconfig.spec.json",
+              "karmaConfig": "src/karma.conf.js",
+              "styles": [
+                "src/styles.css"
+              ],
+              "scripts": [],
+              "assets": [
+                "src/favicon.ico",
+                "src/assets"
+              ]
+            }
+          },
+          "lint": {
+            "builder": "@angular-devkit/build-angular:tslint",
+            "options": {
+              "tsConfig": [
+                "src/tsconfig.app.json",
+                "src/tsconfig.spec.json"
+              ],
+              "exclude": [
+                "**/node_modules/**"
+              ]
+            }
+          }
+        }
+      },
     "ngx-flow": {
       "projectType": "library",
       "root": "projects/ngx-flow",

package.json

@@ -21,23 +21,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.1.0-",
-    "@angular/common": "~12.1.0-",
-    "@angular/compiler": "~12.1.0-",
-    "@angular/core": "~12.1.0-",
-    "@angular/forms": "~12.1.0-",
-    "@angular/platform-browser": "~12.1.0-",
-    "@angular/platform-browser-dynamic": "~12.1.0-",
-    "@angular/router": "~12.1.0-",
+    "@angular/animations": "~13.3.1",
+    "@angular/common": "~13.3.1",
+    "@angular/compiler": "~13.3.1",
+    "@angular/core": "~13.3.1",
+    "@angular/forms": "~13.3.1",
+    "@angular/platform-browser": "~13.3.1",
+    "@angular/platform-browser-dynamic": "~13.3.1",
+    "@angular/router": "~13.3.1",
     "@flowjs/flow.js": "^2.13.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.1.3",
-    "@angular/cli": "~12.1.3",
-    "@angular/compiler-cli": "~12.1.0-",
+    "@angular-devkit/build-angular": "~13.3.1",
+    "@angular/cli": "~13.3.1",
+    "@angular/compiler-cli": "~13.3.1",
     "@types/flowjs": "2.13.3",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
@@ -47,7 +47,7 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^12.1.0",
-    "typescript": "~4.3.2"
+    "ng-packagr": "^13.3.0",
+    "typescript": "~4.6.3"
   }
 }

projects/ngx-flow/package.json

@@ -11,8 +11,8 @@
     "url": "https://github.com/flowjs/ngx-flow"
   },
   "peerDependencies": {
-    "@angular/common": "^12.1.0-",
-    "@angular/core": "^12.1.0-",
+    "@angular/common": "^13.3.1-",
+    "@angular/core": "^13.3.1-",
     "@flowjs/flow.js": "^2.13.0"
   },
   "dependencies": {

projects/ngx-flow/src/test.ts

@@ -18,7 +18,9 @@ declare const require: {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

src/app/app.component.html

@@ -27,7 +27,7 @@ <h1>ngx-flow example</h1>
 <div class="transfers">
   <div class="transfer"
        [ngClass]="{'transfer--error': transfer.error, 'transfer--success': transfer.success}"
-       *ngFor="let transfer of (flow.transfers$ | async).transfers; trackBy: trackTransfer">
+       *ngFor="let transfer of (flow.transfers$ | async)?.transfers; trackBy: trackByTransfer">
     <div class="name">name: {{transfer.name}}</div>
     <div>progress: {{transfer.progress | percent}}</div>
     <div>size: {{transfer.size | number: '1.0'}} bytes</div>
@@ -47,5 +47,5 @@ <h1>ngx-flow example</h1>
   </div>
 </div>
 <button type="button" (click)="flow.upload()" [disabled]="!(flow.somethingToUpload$ | async)">Start upload</button>
-<button type="button" (click)="flow.cancel()" [disabled]="!(flow.transfers$ | async).transfers.length">Cancel all</button>
-Total progress: {{(flow.transfers$ | async).totalProgress | percent}}
+<button type="button" (click)="flow.cancel()" [disabled]="!(flow.transfers$ | async)?.transfers?.length">Cancel all</button>
+Total progress: {{(flow.transfers$ | async)?.totalProgress | percent}}

src/app/app.component.ts

@@ -4,7 +4,8 @@ import {
   ViewChild,
   AfterViewInit,
   OnDestroy,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  TrackByFunction
 } from '@angular/core';
 import { Transfer } from 'projects/ngx-flow/src/public_api';
 import { FlowDirective } from 'projects/ngx-flow/src/lib/flow.directive';
@@ -17,29 +18,28 @@ import { Subscription } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('flow', { static: false })
-  flow: FlowDirective;
+  @ViewChild('flow', { static: false }) flow: FlowDirective | undefined;
 
-  autoUploadSubscription: Subscription;
+  autoUploadSubscription: Subscription | undefined;
 
   constructor(private cd: ChangeDetectorRef) {}
 
   ngAfterViewInit() {
-    this.autoUploadSubscription = this.flow.events$.subscribe(event => {
+    this.autoUploadSubscription = this.flow?.events$.subscribe(event => {
       switch (event.type) {
         case 'filesSubmitted':
-          return this.flow.upload();
+          return this.flow?.upload();
         case 'newFlowJsInstance':
           this.cd.detectChanges();
       }
     });
   }
 
   ngOnDestroy() {
-    this.autoUploadSubscription.unsubscribe();
+    this.autoUploadSubscription?.unsubscribe();
   }
 
-  trackTransfer(transfer: Transfer) {
+  trackByTransfer(index: number, transfer: Transfer) {
     return transfer.id;
   }
 }

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { NgxFlowModule, FlowInjectionToken } from '@flowjs/ngx-flow';
+import { NgxFlowModule, FlowInjectionToken } from 'ngx-flow';
 import Flow from '@flowjs/flow.js';
 
 @NgModule({

tsconfig.json

@@ -7,6 +7,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitReturns": true,
+    "noImplicitAny": false,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,