feat: add support for Angular 13

Author: Dirk Luijk

.github/workflows/main.yml

@@ -22,7 +22,6 @@ jobs:
           node-version: '14'
           cache: 'yarn'
       - run: yarn
-      - run: yarn lint
       - run: yarn build
       - run: yarn test
 

.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -21,18 +21,6 @@
             }
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/breadcrumpy/tsconfig.lib.json",
-              "projects/breadcrumpy/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "test": {
           "builder": "@angular-builders/jest:run",
           "options": {
@@ -122,17 +110,6 @@
           "options": {
             "browserTarget": "demo:build"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/demo/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

package.json

@@ -13,55 +13,52 @@
     "start": "ng serve demo",
     "build": "ng build --configuration production && yarn copy:readme",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "tslint --project . --fix",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "copy:readme": "cp README.md dist/breadcrumpy",
-    "release": "cd projects/breadcrumpy && standard-version --infile ../../CHANGELOG.md && cd .. && yarn build"
+    "release": "cd projects/breadcrumpy && standard-version --infile ../../CHANGELOG.md && cd ../.. && yarn build"
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "~12.1.1",
-    "@angular/common": "~12.1.1",
-    "@angular/compiler": "~12.1.1",
-    "@angular/core": "~12.1.1",
-    "@angular/forms": "~12.1.1",
-    "@angular/platform-browser": "~12.1.1",
-    "@angular/platform-browser-dynamic": "~12.1.1",
-    "@angular/router": "~12.1.1",
+    "@angular/animations": "~13.3.11",
+    "@angular/common": "~13.3.11",
+    "@angular/compiler": "~13.3.11",
+    "@angular/core": "~13.3.11",
+    "@angular/forms": "~13.3.11",
+    "@angular/platform-browser": "~13.3.11",
+    "@angular/platform-browser-dynamic": "~13.3.11",
+    "@angular/router": "~13.3.11",
     "rxjs": "~6.6.2",
     "rxjs-etc": "^10.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^10.0.0",
-    "@angular-devkit/build-angular": "~12.1.1",
-    "@angular/cli": "~12.1.1",
-    "@angular/compiler-cli": "~12.1.1",
-    "@angular/language-service": "~12.1.1",
+    "@angular-builders/jest": "^13.0.0",
+    "@angular-devkit/build-angular": "~13.3.8",
+    "@angular/cli": "~13.3.8",
+    "@angular/compiler-cli": "~13.3.11",
+    "@angular/language-service": "~13.3.11",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
     "@dirkluijk/observable-matchers": "^0.3.2",
-    "@dscheerens/tslint-presets": "^8.0.0",
-    "@ngneat/spectator": "^5.0.0",
+    "@dscheerens/tslint-presets": "^9.0.0",
+    "@ngneat/spectator": "^10.0.0",
     "@types/jest": "^26.0.0",
     "@types/node": "^12.11.1",
     "all-contributors-cli": "^6.8.2",
     "codelyzer": "^6.0.0",
     "commitizen": "^4.0.3",
     "cz-conventional-changelog": "^3.0.2",
     "husky": "^3.0.3",
-    "jest": "^26.0.0",
-    "ng-packagr": "^12.1.0",
+    "jest": "^27.0.0",
+    "ng-packagr": "^13.3.1",
     "protractor": "~7.0.0",
     "standard-version": "^9.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
-  },
-  "resolutions": {
-    "webpack": "^5.0.0"
+    "typescript": "~4.6.4"
   },
   "config": {
     "commitizen": {
@@ -73,4 +70,4 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }
-}
+}

projects/breadcrumpy/jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-
+  testRunner: 'jest-jasmine2'
 };

projects/breadcrumpy/package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "private": false,
   "peerDependencies": {
-    "@angular/core": "^12.0.0",
-    "@angular/router": "^12.0.0",
+    "@angular/core": "^13.0.0",
+    "@angular/router": "^13.0.0",
     "rxjs": "^6.0.0",
     "rxjs-etc": "^10.0.0"
   },

projects/breadcrumpy/src/lib/breadcrumbs.component.spec.ts

@@ -1,5 +1,5 @@
 import { Observable, of } from 'rxjs';
-import { createComponentFactory } from '@ngneat/spectator';
+import { createComponentFactory } from '@ngneat/spectator/jest';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { Breadcrumb } from './breadcrumb';
@@ -43,7 +43,7 @@ describe('BreadcrumbsComponent', () => {
 
     expect(spectator.queryAll('.breadcrumb')).toHaveLength(4);
 
-    const [bc1, bc2, bc3, bc4] = spectator.queryAll('.breadcrumb');
+    const [bc1, bc2, bc3, bc4]: Element[] = spectator.queryAll('.breadcrumb');
 
     expect(bc1).toHaveText('Home');
     expect(bc2).toHaveText('Products');

projects/breadcrumpy/src/lib/breadcrumbs.spec.ts

@@ -51,7 +51,7 @@ describe('Breadcrumbs', () => {
               }
             }
           ]
-        },
+        }
       ])
     ]
   });

projects/breadcrumpy/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

projects/demo/src/polyfills.ts

@@ -19,16 +19,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