Angular 13

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: npm i -g -s --no-progress yarn
+    - run: yarn --frozen-lockfile
+    - run: yarn test-headless

.gitignore

@@ -1,3 +1,4 @@
+/.angular/cache
 #IDE configuration files
 .idea
 .vscode

README.md

@@ -280,6 +280,7 @@ export class AppModule { }
  ```
 
 ## Release Notes & History
+* 4.2.0: Angular 12/13 support
 * 4.1.0: Angular 11 support
 * 4.0.0: Angular 9 support and minor improvements
 * 3.6.0: Angular 8 support

angular.json

@@ -29,7 +29,6 @@
           "skipTests": true
         },
         "@schematics/angular:module": {
-          "skipTests": true
         },
         "@schematics/angular:pipe": {
           "skipTests": true
@@ -42,7 +41,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "outputPath": "dist/ngx-avatar-demo",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -55,7 +53,13 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -74,14 +78,13 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -117,18 +120,6 @@
             ],
             "watch": false
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -147,15 +138,6 @@
               "devServerTarget": "ngx-avatar-demo:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -173,9 +155,9 @@
           },
           "configurations": {
             "production": {
-              "project": "projects/ngx-avatar/ng-package.prod.json"
-            ,              "tsConfig": "projects/ngx-avatar/tsconfig.lib.prod.json"
-}
+              "project": "projects/ngx-avatar/ng-package.prod.json",
+              "tsConfig": "projects/ngx-avatar/tsconfig.lib.prod.json"
+            }
           }
         },
         "test": {
@@ -186,18 +168,6 @@
             "karmaConfig": "projects/ngx-avatar/karma.conf.js",
             "watch": false
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/ngx-avatar/tsconfig.lib.json",
-              "projects/ngx-avatar/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

package.json

@@ -11,46 +11,47 @@
     "build": "ng build",
     "postbuild": "node scripts/copy-artifacts.js",
     "test": "ng test",
+    "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.1.0",
-    "@angular/common": "^11.1.0",
-    "@angular/compiler": "^11.1.0",
-    "@angular/core": "^11.1.0",
-    "@angular/forms": "^11.1.0",
-    "@angular/platform-browser": "^11.1.0",
-    "@angular/platform-browser-dynamic": "^11.1.0",
-    "@angular/router": "^11.1.0",
-    "rxjs": "^6.6.3",
-    "ts-md5": "^1.2.7",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.11.3"
+    "@angular/animations": "^13.0.1",
+    "@angular/common": "^13.0.1",
+    "@angular/compiler": "^13.0.1",
+    "@angular/core": "^13.0.1",
+    "@angular/forms": "^13.0.1",
+    "@angular/platform-browser": "^13.0.1",
+    "@angular/platform-browser-dynamic": "^13.0.1",
+    "@angular/router": "^13.0.1",
+    "rxjs": "^7.4.0",
+    "ts-md5": "^1.2.9",
+    "tslib": "^2.3.1",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1101.0",
+    "@angular-devkit/build-angular": "~13.0.2",
     "@angular-devkit/build-ng-packagr": "~0.1002.0",
-    "@angular/cli": "~11.1.0",
-    "@angular/compiler-cli": "^11.1.0",
-    "@angular/language-service": "^11.1.0",
-    "@types/jasmine": "~3.6.3",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.14.22",
-    "codelyzer": "^6.0.1",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~6.0.0",
-    "karma": "~6.0.1",
+    "@angular/cli": "~13.0.2",
+    "@angular/compiler-cli": "^13.0.1",
+    "@angular/language-service": "^13.0.1",
+    "@types/jasmine": "~3.10.2",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/node": "^16.11.7",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "~3.10.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.3.8",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^11.1.2",
+    "ng-packagr": "^13.0.3",
     "protractor": "~7.0.0",
-    "ts-node": "~9.1.1",
+    "ts-node": "~10.4.0",
     "tslint": "~6.1.3",
-    "typescript": "~4.1.3"
+    "typescript": "~4.4.4"
   }
-}
+}

projects/ngx-avatar/ng-package.json

@@ -5,7 +5,7 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
     "ts-md5"
   ]
 }

projects/ngx-avatar/ng-package.prod.json

@@ -4,7 +4,7 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
     "ts-md5"
   ]
 }

projects/ngx-avatar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-avatar",
   "description": "A universal avatar component for Angular applications that fetches / generates avatar based on the information you have about the user.",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "keywords": [
     "angular",
     "avatar",
@@ -15,11 +15,11 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "ts-md5": "^1.2.4",
-    "tslib": "^2.0.0"
+    "ts-md5": "^1.2.9",
+    "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "@angular/common": "^11.1.0",
-    "@angular/core": "^11.1.0"
+    "@angular/common": "^11.2.14",
+    "@angular/core": "^11.2.14"
   }
 }

projects/ngx-avatar/src/test.ts

@@ -1,7 +1,7 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
@@ -22,7 +22,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$/);

projects/ngx-avatar/tsconfig.lib.json

@@ -2,8 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "module": "es2015",
+    "target": "es6",
+    "module": "ES2020",
     "moduleResolution": "node",
     "declaration": true,
     "sourceMap": true,
@@ -15,7 +15,8 @@
     "types": [],
     "lib": [
       "dom",
-      "es2017"
+      "es2017",
+      "es2020"
     ]
   },
   "angularCompilerOptions": {

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
-import { AvatarModule } from 'ngx-avatar';
+import { AvatarModule } from  '../../projects/ngx-avatar/src/lib/avatar.module';
 
 import { AppComponent } from './app.component';
 import { UserService } from './user.service';

src/environments/environment.ts

@@ -12,4 +12,4 @@ export const environment = {
  * import the following file, but please comment it out in production mode
  * because it will have performance impact when throw error
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -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
@@ -55,7 +45,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.
 
 
 /***************************************************************************************************

src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
@@ -21,7 +21,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/tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": []
+    "types": [],
   },
   "files": [
     "main.ts",