feat: add angular 13 support (#434)

BREAKING CHANGE: support for angular 13

fixes: #433

.gitignore

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

build.ts

@@ -6,15 +6,16 @@ import { ngPackagr } from 'ng-packagr';
 async function main() {
   await ngPackagr()
     .forProject(join(process.cwd(), 'src/lib/package.json'))
+    .withTsConfig(join(process.cwd(), 'tsconfig.json'))
     .build();
 
-    copyFileSync('README.md', join(process.cwd(), 'dist/README.md'));
-    copyFileSync('LICENSE', join(process.cwd(), 'dist/LICENSE'));
+  copyFileSync('README.md', join(process.cwd(), 'dist/README.md'));
+  copyFileSync('LICENSE', join(process.cwd(), 'dist/LICENSE'));
 }
 
 main()
   .then(() => console.log('success'))
-  .catch((e) => {
+  .catch(e => {
     console.error(e);
     process.exit(1);
   });

karma.conf.js

@@ -9,14 +9,15 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    coverageReporter: {
       dir: require('path').join(__dirname, './coverage/zzz'),
+      subdir: '.',
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true,
     },

package.json

@@ -17,53 +17,54 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.10",
-    "@angular/cdk": "12.2.10",
-    "@angular/common": "12.2.10",
-    "@angular/compiler": "12.2.10",
-    "@angular/core": "12.2.10",
-    "@angular/forms": "12.2.10",
-    "@angular/localize": "12.2.10",
-    "@angular/material": "12.2.10",
-    "@angular/platform-browser": "12.2.10",
-    "@angular/platform-browser-dynamic": "12.2.10",
-    "@angular/router": "12.2.10",
+    "@angular/animations": "13.0.1",
+    "@angular/cdk": "13.0.1",
+    "@angular/common": "13.0.1",
+    "@angular/compiler": "13.0.1",
+    "@angular/core": "13.0.1",
+    "@angular/forms": "13.0.1",
+    "@angular/localize": "13.0.1",
+    "@angular/material": "13.0.1",
+    "@angular/platform-browser": "13.0.1",
+    "@angular/platform-browser-dynamic": "13.0.1",
+    "@angular/router": "13.0.1",
     "@ng-bootstrap/ng-bootstrap": "10.0.0",
     "bootstrap": "4.5.0",
-    "core-js": "3.18.3",
+    "core-js": "3.19.1",
     "rxjs": "7.4.0",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.2.10",
-    "@angular-eslint/builder": "12.5.0",
-    "@angular-eslint/eslint-plugin": "12.5.0",
-    "@angular-eslint/eslint-plugin-template": "12.5.0",
-    "@angular-eslint/template-parser": "12.5.0",
-    "@angular/cli": "12.2.10",
-    "@angular/compiler-cli": "12.2.10",
-    "@angular/language-service": "12.2.10",
+    "@angular-devkit/build-angular": "13.0.2",
+    "@angular-eslint/builder": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "13.0.0-alpha.0",
+    "@angular-eslint/schematics": "^13.0.0-alpha.0",
+    "@angular-eslint/template-parser": "13.0.0-alpha.0",
+    "@angular/cli": "13.0.2",
+    "@angular/compiler-cli": "13.0.1",
+    "@angular/language-service": "13.0.1",
     "@types/applicationinsights-js": "1.0.9",
     "@types/facebook-pixel": "0.0.24",
     "@types/google.analytics": "0.0.42",
-    "@types/jasmine": "3.10.0",
-    "@types/node": "16.11.0",
+    "@types/jasmine": "3.10.2",
+    "@types/node": "16.11.7",
     "@types/segment-analytics": "0.0.34",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "del-cli": "4.0.1",
-    "eslint": "7.26.0",
-    "jasmine-core": "3.10.0",
-    "karma": "6.3.4",
+    "eslint": "^8.1.0",
+    "jasmine-core": "3.10.1",
+    "karma": "6.3.8",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "2.0.0",
-    "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-coverage": "2.0.3",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.7.0",
-    "ng-packagr": "12.2.3",
-    "ts-node": "10.3.0",
-    "typescript": "4.3.5"
+    "ng-packagr": "13.0.3",
+    "ts-node": "10.4.0",
+    "typescript": "4.4.4"
   },
   "release": {
     "branch": "master"

src/lib/package.json

@@ -38,8 +38,8 @@
     "dest": "../../dist"
   },
   "peerDependencies": {
-    "@angular/common": ">=12.0.0-0",
-    "@angular/core": ">=12.0.0-0",
+    "@angular/common": ">=13.0.0-0",
+    "@angular/core": ">=13.0.0-0",
     "rxjs": "^7.0.0"
   }
 }

src/polyfills.ts

@@ -22,16 +22,6 @@ import '@angular/localize/init';
  * 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/test.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$/);

tsconfig.json

@@ -16,18 +16,15 @@
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",
-    "types":  [
+    "types": [
       "node",
       "google.analytics",
       "applicationinsights-js",
       "segment-analytics",
       "facebook-pixel",
       "jasmine"
     ],
-    "lib": [
-      "es2018",
-      "dom"
-    ]
+    "lib": ["es2018", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,