feat: support angular v20

BREAKING CHANGE: requires a minimum version of Angular 20

Author: ihym

.nvmrc

@@ -0,0 +1 @@
+22.16.0

angular.json

@@ -11,11 +11,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/demo",
+            "outputPath": {
+              "base": "dist/demo"
+            },
             "index": "demo/index.html",
-            "main": "demo/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -33,18 +34,18 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
               "demo/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "demo/main.ts"
           },
           "configurations": {
             "production": {
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -53,21 +54,21 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "ngx-timeago-demo:build:production"
+              "buildTarget": "ngx-timeago-demo:build:production"
             },
             "development": {
-              "browserTarget": "ngx-timeago-demo:build:development"
+              "buildTarget": "ngx-timeago-demo:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "ngx-timeago-demo:build"
+            "buildTarget": "ngx-timeago-demo:build"
           }
         }
       }
@@ -79,7 +80,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "project": "lib/ng-package.json"
           },
@@ -94,7 +95,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "tsConfig": "lib/tsconfig.spec.json",
             "polyfills": [
@@ -108,5 +109,31 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

demo/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    standalone: false
 })
 export class AppComponent {
   date = Date.now() - 55000;

demo/app/child/child.component.ts

@@ -6,9 +6,10 @@ import { strings as frenchStrings } from 'ngx-timeago/language-strings/fr';
 import { strings as frenchShortStrings } from 'ngx-timeago/language-strings/fr-short';
 
 @Component({
-  selector: 'app-child',
-  templateUrl: './child.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-child',
+    templateUrl: './child.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class ChildComponent {
   date = Date.now() - 55000;

demo/app/child/foo/foo.component.ts

@@ -1,12 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
-  selector: 'app-foo',
-  template: `
+    selector: 'app-foo',
+    template: `
     <h2> OnPush Component </h2>
     <div timeago [date]="2671200000" [live]="true"></div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class FooComponent {
 }

demo/styles.css

@@ -1,4 +1,4 @@
-@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+/* Angular Material theme imported via angular.json */
 @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 .header-image {

lib/src/tests/directive.spec.ts

@@ -24,12 +24,13 @@ const strings: IL10nsStrings = {
 
 @Injectable()
 @Component({
-  selector: 'app-root',
-  template: `
+    selector: 'app-root',
+    template: `
     <div #static timeago [date]="date" [live]="false"></div>
     <div #live timeago [date]="date" [live]="true"></div>
     <div #var timeago [date]="date" [live]="isLive"></div>
-    `
+    `,
+    standalone: false
 })
 class AppComponent {
   @ViewChild('static') static: ElementRef;
@@ -56,9 +57,9 @@ describe('TimeagoDirective', () => {
       providers: [TimeagoIntl],
       declarations: [AppComponent]
     });
-    clock = TestBed.get(TimeagoClock);
-    formatter = TestBed.get(TimeagoFormatter);
-    intl = TestBed.get(TimeagoIntl);
+    clock = TestBed.inject(TimeagoClock);
+    formatter = TestBed.inject(TimeagoFormatter);
+    intl = TestBed.inject(TimeagoIntl);
     intl.strings = { ...strings };
 
   });

lib/src/tests/pipe.spec.ts

@@ -49,12 +49,13 @@ class FakeChangeDetectorRef extends ChangeDetectorRef {
 
 @Injectable()
 @Component({
-  selector: 'app-root',
-  template: `
+    selector: 'app-root',
+    template: `
     <div #static>{{date | timeago:false}}</div>
     <div #live>{{date | timeago:true}}</div>
     <div #var>{{date | timeago:isLive}}</div>
   `,
+    standalone: false
 })
 class AppComponent {
   @ViewChild('static') static: ElementRef;
@@ -84,9 +85,9 @@ describe('TimeagoPipe', () => {
       declarations: [AppComponent]
     });
     date = Date.now() - 1000;
-    clock = TestBed.get(TimeagoClock);
-    formatter = TestBed.get(TimeagoFormatter);
-    intl = TestBed.get(TimeagoIntl);
+    clock = TestBed.inject(TimeagoClock);
+    formatter = TestBed.inject(TimeagoFormatter);
+    intl = TestBed.inject(TimeagoIntl);
     intl.strings = { ...strings };
     ref = new FakeChangeDetectorRef();
   });

lib/src/timeago.directive.ts

@@ -7,8 +7,9 @@ import { TimeagoIntl } from './timeago.intl';
 import { isDefined, coerceBooleanProperty, dateParser } from './util';
 
 @Directive({
-  selector: '[timeago]',
-  exportAs: 'timeago',
+    selector: '[timeago]',
+    exportAs: 'timeago',
+    standalone: false
 })
 export class TimeagoDirective implements OnChanges, OnDestroy {
   private intlSubscription: Subscription;

lib/src/timeago.pipe.ts

@@ -8,8 +8,9 @@ import { filter } from 'rxjs/operators';
 
 @Injectable()
 @Pipe({
-  name: 'timeago',
-  pure: false, // required to update the value when stateChanges emits
+    name: 'timeago',
+    pure: false,
+    standalone: false
 })
 export class TimeagoPipe implements PipeTransform, OnDestroy {
   private intlSubscription: Subscription;