feat(chore): updated version up to angular 13 and nx 13

.eslintrc.json

@@ -8,12 +8,7 @@
   ],
   "overrides": [
     {
-      "files": [
-        "*.ts",
-        "*.tsx",
-        "*.js",
-        "*.jsx"
-      ],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
         "@nrwl/nx/enforce-module-boundaries": [
           "error",
@@ -21,39 +16,25 @@
             "enforceBuildableLibDependency": true,
             "allow": [],
             "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": [
-                  "*"
-                ]
-              }
+              { "sourceTag": "*", "onlyDependOnLibsWithTags": ["*"] }
             ]
           }
         ]
       }
     },
     {
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/typescript"
-      ],
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
       "parserOptions": { "project": "./tsconfig.*?.json" },
       "rules": {
         "semi": "off",
-        "@typescript-eslint/semi": ["error"]
+        "@typescript-eslint/semi": ["error"],
+        "@typescript-eslint/ban-ts-comment": "off"
       }
     },
     {
-      "files": [
-        "*.js",
-        "*.jsx"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/javascript"
-      ],
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
       "rules": {}
     }
   ]

.github/workflows/on-publish.yml

@@ -51,6 +51,7 @@ jobs:
             dist
           key: dist-${{ github.run_id }}
       - run: npx ng build --prod
+             npx nx run ng2-file-upload:build:production
 
   # update release notes in github
   update_release_draft:

.github/workflows/on-push-or-pull.yml

@@ -60,6 +60,7 @@ jobs:
           path: ${{ env.CACHE_DIST_PATH }}
           key: dist-${{ github.run_id }}
       - run: npx ng build --prod
+             npx nx run ng2-file-upload:build:production
 
   # run unit tests
   unit_tests_with_coverage:

.gitignore

@@ -12,6 +12,7 @@
 .settings/
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -2,7 +2,6 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
-  "defaultProject": "ng2-file-upload-demo",
   "projects": {
     "ng2-file-upload": {
       "root": "libs/ng2-file-upload",
@@ -30,7 +29,10 @@
             "lintFilePatterns": [
               "libs/ng2-file-upload/**/*.ts"
             ]
-          }
+          },
+          "outputs": [
+            "{options.outputFile}"
+          ]
         },
         "test": {
           "builder": "@nrwl/jest:jest",
@@ -44,8 +46,7 @@
         },
         "version": {
           "builder": "@nrwl/workspace:run-commands",
-          "outputs": [
-          ],
+          "outputs": [],
           "options": {
             "commands": [
               "ts-node ./scripts/set-version.ts",
@@ -59,7 +60,10 @@
             "production": {}
           }
         }
-      }
+      },
+      "tags": [
+        "lib"
+      ]
     },
     "ng2-file-upload-demo": {
       "root": "apps/demo",
@@ -90,7 +94,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -122,18 +125,16 @@
             "lintFilePatterns": [
               "apps/demo/**/*.ts"
             ]
-          }
+          },
+          "outputs": [
+            "{options.outputFile}"
+          ]
         }
-      }
-    }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "",
-      "styleext": "css"
-    },
-    "@schematics/angular:directive": {
-      "prefix": ""
+      },
+      "tags": [],
+      "implicitDependencies": [
+        "ng2-file-upload"
+      ]
     }
   }
 }

apps/demo/.eslintrc.json

@@ -1,20 +1,28 @@
 {
-  "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "extends": [
         "plugin:@nrwl/nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
-      "parserOptions": { "project": ["src/accordion/tsconfig.*?.json"] },
-      "rules": {
-      }
+      "rules": {}
     },
     {
-      "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@nrwl/nx/angular-template"
+      ],
       "rules": {}
     }
   ]

jest.config.js

@@ -1,5 +1,5 @@
-module.exports = {
-projects: [
-  '<rootDir>/libs/ng2-file-upload'
-]
+const { getJestProjects } = require('@nrwl/jest');
+  
+module.exports = {"projects": getJestProjects()
+
 };

libs/ng2-file-upload/.eslintrc.json

@@ -1,20 +1,28 @@
 {
-  "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "extends": [
         "plugin:@nrwl/nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
-      "parserOptions": { "project": ["src/accordion/tsconfig.*?.json"] },
-      "rules": {
-      }
+      "rules": {}
     },
     {
-      "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@nrwl/nx/angular-template"
+      ],
       "rules": {}
     }
   ]

libs/ng2-file-upload/file-upload/file-upload.module.ts

@@ -3,6 +3,8 @@ import { NgModule } from '@angular/core';
 
 import { FileDropDirective } from './file-drop.directive';
 import { FileSelectDirective } from './file-select.directive';
+export { FileDropDirective } from './file-drop.directive';
+export { FileSelectDirective } from './file-select.directive';
 
 @NgModule({
   imports: [ CommonModule ],

libs/ng2-file-upload/jest.config.js

@@ -5,22 +5,16 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      astTransformers: {
-        before: [
-          'jest-preset-angular/build/InlineFilesTransformer',
-          'jest-preset-angular/build/StripStylesTransformer',
-        ]
-      }
+
     }
   },
-  transform: {
-    '^.+\\.[tj]sx?$':  'ts-jest'
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/ng2-file-upload',
   snapshotSerializers: [
-    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
-    'jest-preset-angular/build/AngularSnapshotSerializer.js',
-    'jest-preset-angular/build/HTMLCommentSerializer.js',
-  ]
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment'
+  ],
+  transform: { '^.+.(ts|mjs|js|html)$': 'jest-preset-angular' },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
+  moduleFileExtensions: ['mjs', 'ts', 'js', 'html']
 };

libs/ng2-file-upload/testing/spec/file-drop.directive.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { inject, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileUploader } from '../../file-upload/file-uploader.class';
 import { FileUploadModule } from '../../file-upload/file-upload.module';
@@ -28,7 +28,7 @@ describe('Directive: FileDropDirective', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ FileUploadModule ],
-      declarations: [ ContainerComponent ],
+      declarations: [ ContainerComponent, FileDropDirective ],
       providers: [ ContainerComponent ]
     });
   });
@@ -72,19 +72,23 @@ describe('Directive: FileDropDirective', () => {
     const filters = fileDropDirective.getFilters();
 
     // TODO: Update test once implemented
-    expect(filters).toEqual({});
+    expect(filters).toBeFalsy();
   });
 
   it('handles drop event', () => {
-    spyOn(fileDropDirective, 'onDrop');
-
+    //@ts-ignore
+    const drop = jest.spyOn(fileDropDirective, 'onDrop');
     directiveElement.triggerEventHandler('drop', getFakeEventData());
 
-    expect(fileDropDirective.onDrop).toHaveBeenCalled();
+    expect(drop).toHaveBeenCalled();
   });
 
   it('adds file to upload', () => {
-    spyOn(fileDropDirective.uploader, 'addToQueue');
+    let addToQueue;
+    if (fileDropDirective.uploader?.addToQueue) {
+      //@ts-ignore
+      addToQueue = jest.spyOn(fileDropDirective.uploader, 'addToQueue');
+    }
 
     let fileOverData;
     fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data);
@@ -96,13 +100,14 @@ describe('Directive: FileDropDirective', () => {
 
     const uploadedFiles = getFakeEventData().dataTransfer.files;
 
-    expect(fileDropDirective.uploader.addToQueue).toHaveBeenCalledWith(uploadedFiles, fileDropDirective.getOptions(), fileDropDirective.getFilters());
+    expect(addToQueue).toHaveBeenCalledWith(uploadedFiles, fileDropDirective.getOptions(), fileDropDirective.getFilters());
     expect(fileOverData).toBeFalsy();
     expect(fileDropData).toEqual(uploadedFiles);
   });
 
   it('handles dragover event', () => {
-    spyOn(fileDropDirective, 'onDragOver');
+    //@ts-ignore
+    jest.spyOn(fileDropDirective, 'onDragOver');
 
     directiveElement.triggerEventHandler('dragover', getFakeEventData());
 
@@ -119,7 +124,8 @@ describe('Directive: FileDropDirective', () => {
   });
 
   it('handles dragleave event', () => {
-    spyOn(fileDropDirective, 'onDragLeave');
+    //@ts-ignore
+    jest.spyOn(fileDropDirective, 'onDragLeave');
 
     directiveElement.triggerEventHandler('dragleave', getFakeEventData());
 

libs/ng2-file-upload/testing/spec/file-select.directive.spec.ts

@@ -72,7 +72,7 @@ describe('Directive: FileSelectDirective', () => {
     const filters = fileSelectDirective.getFilters();
 
     // TODO: Update test once implemented
-    expect(filters).toEqual({});
+    expect(filters).toEqual('');
   });
 
   it('can check if element is empty', () => {
@@ -82,18 +82,22 @@ describe('Directive: FileSelectDirective', () => {
   });
 
   it('can listed on change event', () => {
-    spyOn(fileSelectDirective, 'onChange');
+    //@ts-ignore
+    const change = jest.spyOn(fileSelectDirective, 'onChange');
 
     directiveElement.triggerEventHandler('change', {});
 
-    expect(fileSelectDirective.onChange).toHaveBeenCalled();
+    expect(change).toHaveBeenCalled();
   });
 
   it('handles change event', () => {
-    spyOn(fileSelectDirective.uploader, 'addToQueue');
-
+    let addToQueue;
+    if (fileSelectDirective.uploader?.addToQueue) {
+      //@ts-ignore
+      addToQueue = jest.spyOn(fileSelectDirective.uploader, 'addToQueue');
+    }
     fileSelectDirective.onChange();
 
-    expect(fileSelectDirective.uploader.addToQueue).toHaveBeenCalledWith(directiveElement.nativeElement.files, fileSelectDirective.getOptions(), fileSelectDirective.getFilters());
+    expect(addToQueue).toHaveBeenCalledWith(directiveElement.nativeElement.files, fileSelectDirective.getOptions(), fileSelectDirective.getFilters());
   });
 });

libs/ng2-file-upload/testing/test-setup.ts

@@ -1 +1 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';

libs/ng2-file-upload/tsconfig.json

@@ -25,4 +25,3 @@
     "fullTemplateTypeCheck": true
   }
 }
-

libs/ng2-file-upload/tsconfig.lib.json

@@ -7,7 +7,10 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": [
+      "dom",
+      "es2018"
+    ]
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
@@ -18,6 +21,7 @@
     "**/*.ts"
   ],
   "exclude": [
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "**/*.test.ts"
   ]
 }

libs/ng2-file-upload/tsconfig.lib.prod.json

@@ -1,10 +1,9 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

libs/ng2-file-upload/tsconfig.spec.json

@@ -3,10 +3,17 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node"
+    ]
   },
+  "files": [
+    "testing/test-setup.ts"
+  ],
   "include": [
     "**/*.spec.ts",
+    "**/*.test.ts",
     "**/*.d.ts"
   ]
 }

nx.json

@@ -8,31 +8,31 @@
     ".eslintrc.json": "*",
     "nx.json": "*"
   },
-  "projects": {
-    "ng2-file-upload": {
-      "tags": [
-        "lib"
-      ]
-    },
-    "ng2-file-upload-demo": {
-      "tags": [],
-      "implicitDependencies": [
-        "ng2-file-upload"
-      ]
-
-    }
-  },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/workspace/tasks-runners/default",
+      "runner": "nx/tasks-runners/default",
       "options": {
         "cacheableOperations": [
           "build",
           "lint",
           "test",
           "e2e"
-        ]
+        ],
+        "parallel": 1
       }
     }
+  },
+  "affected": {
+    "defaultBase": "master"
+  },
+  "defaultProject": "ng2-file-upload-demo",
+  "generators": {
+    "@schematics/angular:component": {
+      "prefix": "",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": ""
+    }
   }
 }

package.json

@@ -11,13 +11,13 @@
     "build": "nx run ng2-file-upload:build",
     "build-prod": "nx run ng2-file-upload:build:production",
     "build.watch": "nx run ng2-file-upload:build --watch",
-    "test": "nx run-many --all --target=test",
+    "lint": "nx run-many --target=lint --all",
+    "test": "nx run-many --target=test --all",
     "version": "nx run ng2-file-upload:version",
-    "lint": "nx run-many --all --target=lint",
     "pretest": "run-s lint build",
     "test-coverage": "nx run-many --all --target=test --codeCoverage",
     "demo.gh-pages": "run-s build demo.build demo.deploy",
-    "demo.deploy": "gh-pages -d dist/apps/ng2-file-upload",
+    "demo.deploy": "gh-pages -d dist/apps/demo",
     "postinstall": "node ./decorate-angular-cli.js",
     "flow.github-release": "conventional-github-releaser -p angular"
   },
@@ -40,32 +40,32 @@
   "homepage": "https://github.com/valor-software/ng2-file-upload#readme",
   "peerDependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.13",
+    "@angular-devkit/build-angular": "13.3.3",
     "@angular-devkit/build-ng-packagr": "^0.1002.0",
-    "@angular/animations": "~11.2.14",
-    "@angular/cli": "~11.2.14",
-    "@angular/common": "~11.2.14",
-    "@angular/compiler": "~11.2.14",
-    "@angular/compiler-cli": "~11.2.14",
-    "@angular/core": "~11.2.14",
-    "@angular/forms": "~11.2.14",
-    "@angular/platform-browser": "~11.2.14",
-    "@angular/platform-browser-dynamic": "~11.2.14",
-    "@angular-eslint/eslint-plugin": "4.3.0",
-    "@angular-eslint/eslint-plugin-template": "4.3.0",
-    "@angular-eslint/template-parser": "4.3.0",
-    "@nrwl/angular": "11.2.12",
-    "@nrwl/cli": "11.2.12",
-    "@nrwl/node": "11.2.12",
-    "@nrwl/eslint-plugin-nx": "11.2.12",
-    "@nrwl/jest": "11.2.12",
-    "@nrwl/linter": "11.2.12",
+    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/template-parser": "13.0.1",
+    "@angular/animations": "13.3.3",
+    "@angular/cli": "13.3.3",
+    "@angular/common": "13.3.3",
+    "@angular/compiler": "13.3.3",
+    "@angular/compiler-cli": "13.3.3",
+    "@angular/core": "13.3.3",
+    "@angular/forms": "13.3.3",
+    "@angular/platform-browser": "13.3.3",
+    "@angular/platform-browser-dynamic": "13.3.3",
+    "@nrwl/angular": "13.10.2",
+    "@nrwl/cli": "13.10.2",
+    "@nrwl/eslint-plugin-nx": "13.10.2",
+    "@nrwl/jest": "13.10.2",
+    "@nrwl/linter": "13.10.2",
+    "@nrwl/node": "13.10.2",
     "@types/fs-extra": "9.0.7",
-    "@types/jest": "26.0.20",
+    "@types/jest": "27.0.2",
     "@types/node": "^12.11.1",
     "@types/webpack": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "~4.28.3",
-    "@typescript-eslint/parser": "~4.28.3",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
     "bootstrap": "3.3.7",
     "classlist-polyfill": "1.2.0",
     "codecov": "3.8.2",
@@ -73,29 +73,33 @@
     "conventional-changelog-cli": "2.1.1",
     "conventional-github-releaser": "3.1.5",
     "core-js": "^3.14.0",
-    "eslint": "7.22.0",
-    "eslint-config-prettier": "7.2.0",
+    "eslint": "8.12.0",
+    "eslint-config-prettier": "8.1.0",
     "fs-extra": "9.1.0",
     "gh-pages": "3.2.2",
     "google-code-prettify": "1.0.5",
     "html-loader": "^1.3.2",
-    "jest": "26.6.3",
+    "jest": "27.2.3",
     "jest-createspyobj": "2.0.0",
-    "jest-preset-angular": "8.3.2",
+    "jest-preset-angular": "11.1.1",
     "markdown-loader": "^6.0.0",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "13.3.1",
     "ngx-bootstrap": "7.1.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.9",
+    "postcss-import": "^14.0.2",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-url": "^10.1.1",
     "protractor": "~7.0.0",
     "raw-loader": "^4.0.2",
     "rxjs": "^6.6.0",
     "ts-helpers": "^1.1.2",
-    "ts-jest": "26.5.1",
+    "ts-jest": "27.0.5",
     "ts-node": "8.3.0",
     "tslint": "^6.1.0",
     "tslint-config-valorsoft": "^2.2.1",
-    "typescript": "4.1.5",
-    "zone.js": "~0.11.3"
+    "typescript": "4.6.3",
+    "zone.js": "0.11.5"
   },
   "contributors": [
     {
@@ -120,7 +124,8 @@
     }
   ],
   "dependencies": {
-    "@nrwl/workspace": "^12.8.0",
+    "@nrwl/workspace": "13.10.2",
+    "nx": "13.10.2",
     "tslib": "^2.0.0"
   }
 }