build: upgrade angular to 12 (#5)

Author: cipchk

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "off",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "off",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-host-metadata-property": [
+          "off"
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.nvmrc

@@ -1 +1 @@
-12.14.1
+12.16.1

angular.json

@@ -8,6 +8,9 @@
       "schematics": {
         "@schematics/angular:component": {
           "style": "less"
+        },
+        "@schematics/angular:application": {
+          "strict": true
         }
       },
       "root": "",
@@ -22,78 +25,84 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": ["src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "inlineStyleLanguage": "less",
             "styles": [],
             "scripts": []
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
-              ]
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "ng-github-button:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "ng-github-button:build:production"
+            },
+            "development": {
+              "browserTarget": "ng-github-button:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "lib/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "scripts": [],
-            "styles": [],
-            "assets": []
+            "karmaConfig": "karma.conf.js"
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html",
+              "lib/**/*.ts",
+              "lib/**/*.html"
             ]
           }
         }
       }
     }
   },
-  "defaultProject": "ng-github-button"
+  "defaultProject": "ng-github-button",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

karma.conf.js

@@ -13,29 +13,38 @@ module.exports = function (config) {
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
     coverageReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
+      dir: require('path').join(__dirname, './coverage'),
       subdir: '.',
       reporters: [
         { type: 'html' },
         { type: 'text-summary' }
-      ],
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
     customLaunchers: {
       ChromeHeadlessCI: {
         base: 'ChromeHeadless',
         flags: ['--no-sandbox'],
       },
-    },
-    singleRun: false,
-    restartOnFileChange: true
+    }
   });
 };

lib/ng-package.json

@@ -4,6 +4,5 @@
   "deleteDestPath": true,
   "lib": {
     "entryFile": "index.ts"
-  },
-  "whitelistedNonPeerDependencies": ["tslib", "angular"]
+  }
 }

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-github-button",
-  "version": "11.0.1",
+  "version": "12.0.0",
   "description": "Unofficial GitHub buttons in Angular.",
   "author": "cipchk <[email protected]>",
   "license": "MIT",

lib/spec/component.spec.ts

@@ -16,7 +16,7 @@ describe('github-button', () => {
     return dl.query(By.css('.gh-count')).nativeElement as HTMLElement;
   }
   function getCount(): number {
-    const value = getCountEl().textContent.trim();
+    const value = getCountEl().textContent!.trim();
     return +value;
   }
 
@@ -65,7 +65,7 @@ describe('github-button', () => {
       fixture.detectChanges();
 
       mockHttp({ forks_count: 3 });
-      expect((dl.nativeElement as HTMLElement).querySelector('github-button').classList).toContain('github-btn-large');
+      expect((dl.nativeElement as HTMLElement).querySelector('github-button')!.classList).toContain('github-btn-large');
     });
 
     it('#repo_url', () => {
@@ -76,7 +76,7 @@ describe('github-button', () => {
       fixture.detectChanges();
 
       mockHttp({ forks_count: 3 });
-      expect((dl.nativeElement as HTMLElement).querySelector('.gh-btn').attributes.getNamedItem('href').textContent).toContain(
+      expect((dl.nativeElement as HTMLElement).querySelector('.gh-btn')!.attributes.getNamedItem('href')!.textContent).toContain(
         `//github.com/cipchk/ng-github-button/`,
       );
     });
@@ -126,10 +126,10 @@ describe('github-button', () => {
 })
 class TestComponent {
   @ViewChild('comp')
-  comp: GithubButtonComponent;
+  comp!: GithubButtonComponent;
   showZero = false;
   type = 'stargazers';
-  size: string;
-  namespace: string;
-  repo: string;
+  size: string = 'default';
+  namespace: string = '';
+  repo: string = '';
 }

lib/src/component.ts

@@ -34,21 +34,21 @@ const isSSR = !(typeof document === 'object' && !!document);
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
-  private notify$: Subscription;
+  private notify$: Subscription | null = null;
   typeToLabel = {
     stargazers: 'Star',
     subscribers: 'Watch',
     forks: 'Fork',
   };
-  typeToPath = {
+  typeToPath: { [key: string]: string } = {
     forks: 'network',
   };
-  count: number;
+  count = 0;
 
   @Input() type: 'stargazers' | 'subscribers' | 'forks' = 'stargazers';
-  @Input() size: 'default' | 'large';
-  @Input() namespace: string;
-  @Input() repo: string;
+  @Input() size: 'default' | 'large' = 'default';
+  @Input() namespace!: string;
+  @Input() repo!: string;
   @Input() showZero = false;
 
   get repo_url(): string {

lib/src/service.ts

@@ -6,9 +6,9 @@ import { HttpClient } from '@angular/common/http';
 export class GithubButtonService {
   private cached: { [url: string]: any } = {};
   // tslint:disable-next-line: variable-name
-  private _notify = new BehaviorSubject<{ [url: string]: any }>(null);
+  private _notify = new BehaviorSubject<{ [url: string]: any } | null>(null);
 
-  get notify(): Observable<{ [url: string]: any }> {
+  get notify(): Observable<{ [url: string]: any } | null> {
     return this._notify.asObservable();
   }
 

lib/test.ts

@@ -1,19 +1,22 @@
 // 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,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp,
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.