feat: upgrade to angular 13

BREAKING CHANGE: requires angular 13

Author: scttcper

.browserslistrc

@@ -14,4 +14,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  browser-tools: circleci/browser-tools@1.1.0
+  browser-tools: circleci/browser-tools@1
 jobs:
   test:
     docker:

.gitignore

@@ -25,6 +25,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -40,13 +40,14 @@ npm install ngx-trend
 
 Latest version available for each version of Angular
 
-| ngx-trend | Angular |
-| --------- | ------- |
-| 3.4.3     | 6.x 7.x |
-| 4.0.2     | 8.x     |
-| 5.0.1     | 9.x     |
-| 6.1.1     | >= 10.x |
-| current   | >= 12.x |
+| ngx-trend | Angular   |
+| --------- | --------- |
+| 3.4.3     | 6.x 7.x   |
+| 4.0.2     | 8.x       |
+| 5.0.1     | 9.x       |
+| 6.1.1     | 10.x 11.x |
+| 7.0.0     | 12.x   |
+| current   | >= 13.x   |
 
 ### Quickstart
 

angular.json

@@ -51,7 +51,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

package-lock.json

@@ -18,48 +18,48 @@
   "homepage": "https://ngx-trend.vercel.app",
   "repository": "scttcper/ngx-trend",
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.0.2",
-    "@angular-eslint/builder": "12.1.0",
-    "@angular-eslint/eslint-plugin": "12.1.0",
-    "@angular-eslint/eslint-plugin-template": "12.1.0",
-    "@angular-eslint/schematics": "12.1.0",
-    "@angular-eslint/template-parser": "12.1.0",
-    "@angular/animations": "12.0.2",
-    "@angular/cdk": "12.0.2",
-    "@angular/cli": "12.0.2",
-    "@angular/common": "12.0.2",
-    "@angular/compiler": "12.0.2",
-    "@angular/compiler-cli": "12.0.2",
-    "@angular/core": "12.0.2",
-    "@angular/forms": "12.0.2",
-    "@angular/language-service": "12.0.2",
-    "@angular/material": "12.0.2",
-    "@angular/platform-browser": "12.0.2",
-    "@angular/platform-browser-dynamic": "12.0.2",
-    "@angular/router": "12.0.2",
-    "@ctrl/ngx-github-buttons": "6.2.0",
-    "@types/jasmine": "3.7.6",
-    "@types/node": "15.6.1",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
-    "core-js": "3.13.1",
-    "del-cli": "3.0.1",
-    "eslint": "7.26.0",
-    "jasmine-core": "3.7.1",
-    "karma": "6.3.2",
-    "karma-chrome-launcher": "3.1.0",
+    "@angular-devkit/build-angular": "13.3.1",
+    "@angular-eslint/builder": "13.2.0",
+    "@angular-eslint/eslint-plugin": "13.2.0",
+    "@angular-eslint/eslint-plugin-template": "13.2.0",
+    "@angular-eslint/schematics": "13.2.0",
+    "@angular-eslint/template-parser": "13.2.0",
+    "@angular/animations": "13.3.1",
+    "@angular/cdk": "13.3.2",
+    "@angular/cli": "13.3.1",
+    "@angular/common": "13.3.1",
+    "@angular/compiler": "13.3.1",
+    "@angular/compiler-cli": "13.3.1",
+    "@angular/core": "13.3.1",
+    "@angular/forms": "13.3.1",
+    "@angular/language-service": "13.3.1",
+    "@angular/material": "13.3.2",
+    "@angular/platform-browser": "13.3.1",
+    "@angular/platform-browser-dynamic": "13.3.1",
+    "@angular/router": "13.3.1",
+    "@ctrl/ngx-github-buttons": "7.1.0",
+    "@types/jasmine": "4.0.2",
+    "@types/node": "17.0.23",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
+    "core-js": "3.21.1",
+    "del-cli": "4.0.1",
+    "eslint": "8.12.0",
+    "jasmine-core": "4.0.1",
+    "karma": "6.3.17",
+    "karma-chrome-launcher": "3.1.1",
     "karma-cli": "2.0.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-jasmine": "4.0.1",
-    "karma-jasmine-html-reporter": "1.6.0",
-    "ng-packagr": "12.0.2",
-    "rxjs": "6.6.7",
-    "ts-node": "10.0.0",
-    "tslib": "2.2.0",
-    "typescript": "4.2.4",
-    "zone.js": "0.11.4"
+    "karma-jasmine": "4.0.2",
+    "karma-jasmine-html-reporter": "1.7.0",
+    "ng-packagr": "13.3.0",
+    "rxjs": "7.5.5",
+    "ts-node": "10.7.0",
+    "tslib": "2.3.1",
+    "typescript": "4.6.3",
+    "zone.js": "0.11.5"
   },
   "release": {
     "branch": "master"
   }
-}
+}

package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0-placeholder",
   "description": "ngx-trend Angular component",
   "peerDependencies": {
-    "@angular/animations": ">=12.0.0-0",
-    "@angular/common": ">=12.0.0-0",
-    "@angular/core": ">=12.0.0-0"
+    "@angular/animations": ">=13.0.0-0",
+    "@angular/common": ">=13.0.0-0",
+    "@angular/core": ">=13.0.0-0"
   },
   "repository": "scttcper/ngx-trend",
   "homepage": "https://github.com/scttcper/ngx-trend",

src/lib/package.json

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src/polyfills.ts

@@ -11,7 +11,9 @@ declare const require: any;
 // 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$/);