chore: update to ng18.2-next and run injector migration

SanderElias · Jul 26, 2024 · 189699f · 189699f
1 parent b3d9d0e
commit 189699f
Show file tree

Hide file tree

Showing 30 changed files with 2,310 additions and 2,493 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,17 +82,17 @@
     }
   },
   "dependencies": {
-    "@angular/animations": "18.1.2",
-    "@angular/common": "18.1.2",
-    "@angular/compiler": "18.1.2",
-    "@angular/core": "18.1.2",
-    "@angular/elements": "^18.1.2",
-    "@angular/forms": "18.1.2",
-    "@angular/platform-browser": "18.1.2",
-    "@angular/platform-browser-dynamic": "18.1.2",
-    "@angular/platform-server": "^18.1.2",
-    "@angular/router": "18.1.2",
-    "@angular/ssr": "^18.1.2",
+    "@angular/animations": "18.2.0-next.2",
+    "@angular/common": "18.2.0-next.2",
+    "@angular/compiler": "18.2.0-next.2",
+    "@angular/core": "18.2.0-next.2",
+    "@angular/elements": "^18.2.0-next.2",
+    "@angular/forms": "18.2.0-next.2",
+    "@angular/platform-browser": "18.2.0-next.2",
+    "@angular/platform-browser-dynamic": "18.2.0-next.2",
+    "@angular/platform-server": "^18.2.0-next.2",
+    "@angular/router": "18.2.0-next.2",
+    "@angular/ssr": "^18.2.0-next.2",
     "@faker-js/faker": "^8.4.1",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -127,15 +127,15 @@
     "asciidoctor.js": {}
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.2",
+    "@angular-devkit/build-angular": "^18.2.0-next.2",
     "@angular-eslint/builder": "18.1.0",
     "@angular-eslint/eslint-plugin": "18.1.0",
     "@angular-eslint/eslint-plugin-template": "18.1.0",
     "@angular-eslint/schematics": "18.1.0",
     "@angular-eslint/template-parser": "18.1.0",
-    "@angular/cli": "18.1.2",
-    "@angular/compiler-cli": "18.1.2",
-    "@angular/language-service": "18.1.2",
+    "@angular/cli": "18.2.0-next.2",
+    "@angular/compiler-cli": "18.2.0-next.2",
+    "@angular/language-service": "18.2.0-next.2",
     "@playwright/test": "^1.45.1",
     "@types/chance": "^1.1.6",
     "@types/node": "^20.14.10",

diff --git a/projects/api-boundries/src/app/orders.service.ts b/projects/api-boundries/src/app/orders.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { filter, map, shareReplay, take, tap } from 'rxjs/operators';
 import { getId, randomInt, RelationsService } from './relations.service';
@@ -7,11 +7,11 @@ import { getId, randomInt, RelationsService } from './relations.service';
   providedIn: 'root',
 })
 export class OrdersService {
+  private rel = inject(RelationsService);
+
   private orderList = new BehaviorSubject<Order[]>([]);
   orderList$ = this.orderList.asObservable();
 
-  constructor(private rel: RelationsService) {}
-
   getClientFromOrder(id: string) {
     return this.rel.relationList$.pipe(
       map(rels => {

diff --git a/projects/se-ng/let/src/lib/se-let.directive.ts b/projects/se-ng/let/src/lib/se-let.directive.ts
@@ -1,5 +1,5 @@
 // tslint:disable: no-unused-expression
-import { Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
+import { Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef, ChangeDetectorRef, inject } from '@angular/core';
 import { isObservable, Subscriber, Subscription, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
@@ -9,6 +9,10 @@ import { tap } from 'rxjs/operators';
   standalone: true,
 })
 export class SeLetDirective<T> implements OnInit, OnDestroy {
+  private templateRef = inject<TemplateRef<any>>(TemplateRef<any>);
+  private viewContainer = inject(ViewContainerRef);
+  private cdr = inject(ChangeDetectorRef);
+
   private context = { $implicit: undefined, seLet: undefined } as {
     $implicit: T | unknown;
     seLet: T | unknown;
@@ -37,11 +41,7 @@ export class SeLetDirective<T> implements OnInit, OnDestroy {
     }
   }
 
-  constructor(
-    private templateRef: TemplateRef<any>,
-    private viewContainer: ViewContainerRef,
-    private cdr: ChangeDetectorRef
-  ) {
+  constructor() {
     this.assign = this.assign.bind(this);
   }
 

diff --git a/projects/slipnslide/src/app/code-sample/code-sample.component.ts b/projects/slipnslide/src/app/code-sample/code-sample.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, ElementRef, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, NgZone, OnDestroy, OnInit, inject } from '@angular/core';
 import { BehaviorSubject, combineLatest, EMPTY, from, Observable, of, ReplaySubject } from 'rxjs';
 import { distinctUntilChanged, map, pluck, shareReplay, switchMap, take, tap } from 'rxjs/operators';
 // import * as monaco from 'monaco-editor';
@@ -26,6 +26,10 @@ interface State {
   standalone: true,
 })
 export class CodeSampleComponent implements OnInit, OnDestroy {
+  private http = inject(HttpClient);
+  private elmRef = inject(ElementRef);
+  private zone = inject(NgZone);
+
   state$ = new BehaviorSubject<State>({ src: '', startLine: 0, originalCode: '' });
   @Input() set src(src) {
     // = ''; //'slipnslide/src/app/code-sample/code-sample.component.ts';
@@ -51,11 +55,7 @@ export class CodeSampleComponent implements OnInit, OnDestroy {
     shareReplay({ bufferSize: 1, refCount: true })
   );
 
-  constructor(
-    private http: HttpClient,
-    private elmRef: ElementRef,
-    private zone: NgZone
-  ) {
+  constructor() {
     console.log('init code-sample');
   }
 

diff --git a/projects/slipnslide/src/app/edit/edit.component.ts b/projects/slipnslide/src/app/edit/edit.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { debounceTime, filter, map, shareReplay, switchMap, tap, withLatestFrom } from 'rxjs/operators';
 import { Slide, SlidesService } from '../slides.service';
@@ -17,6 +17,8 @@ import { RouterLink } from '@angular/router';
   imports: [RouterLink, SelectFileComponent, MdEditComponent, AsyncPipe],
 })
 export class EditComponent implements OnInit, OnDestroy {
+  private slides = inject(SlidesService);
+
   @ViewChild(MdEditComponent, { static: true }) mde: MdEditComponent;
   filename = new ReplaySubject<string>(1);
   updateSub;
@@ -26,8 +28,6 @@ export class EditComponent implements OnInit, OnDestroy {
     shareReplay({ bufferSize: 1, refCount: true })
   );
 
-  constructor(private slides: SlidesService) {}
-
   ngOnInit() {
     this.updateSub = this.mde.updates
       .pipe(

diff --git a/projects/slipnslide/src/app/edit/md-edit/md-edit.component.ts b/projects/slipnslide/src/app/edit/md-edit/md-edit.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, inject } from '@angular/core';
 import Editor from '@toast-ui/editor';
 // import { safeDump } from 'js-yaml';
 import { Subject } from 'rxjs';
@@ -23,6 +23,9 @@ const styles = [
   standalone: true,
 })
 export class MdEditComponent implements OnInit, OnDestroy {
+  private elmRef = inject(ElementRef);
+  private zone = inject(NgZone);
+
   attributes: { [key: string]: any };
   _markdown: string;
   @Input() set markdown(x: string) {
@@ -52,11 +55,6 @@ export class MdEditComponent implements OnInit, OnDestroy {
   private elm = this.elmRef.nativeElement;
   private editor: Editor;
 
-  constructor(
-    private elmRef: ElementRef,
-    private zone: NgZone
-  ) {}
-
   ngOnInit(): void {
     if (this.elm) {
       // this.elm.innerHTML = 'hello'

diff --git a/projects/slipnslide/src/app/edit/select-file/select-file.component.ts b/projects/slipnslide/src/app/edit/select-file/select-file.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, inject } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { filter, map, switchMap, tap } from 'rxjs/operators';
 import { SlidesService } from '../../slides.service';
@@ -17,6 +17,9 @@ import { NgForOf, AsyncPipe } from '@angular/common';
   imports: [NgForOf, AsyncPipe],
 })
 export class SelectFileComponent implements OnDestroy, OnInit {
+  private elmRef = inject(ElementRef);
+  private slides = inject(SlidesService);
+
   @Output() fileName = new EventEmitter<string>();
   init$ = new Subject();
 
@@ -35,11 +38,6 @@ export class SelectFileComponent implements OnDestroy, OnInit {
 
   private sub = this.inputs$.subscribe(this.fileName);
 
-  constructor(
-    private elmRef: ElementRef,
-    private slides: SlidesService
-  ) {}
-
   ngOnDestroy(): void {
     this.sub.unsubscribe();
   }

diff --git a/projects/slipnslide/src/app/slide/slide.component.ts b/projects/slipnslide/src/app/slide/slide.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, inject } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { CodeSampleComponent } from '../code-sample/code-sample.component';
 import { DemoComponent } from '../demo/demo.component';
@@ -12,7 +12,7 @@ const availableComps = {
   template: `<scully-content></scully-content>`,
 })
 export class SlideComponent {
-  constructor(injector: Injector) {
+  constructor() {
     const dyn = createCustomElement(CodeSampleComponent, { injector });
     customElements.define('code-editor', dyn);
     const sh = createCustomElement(ShowCompComponent, { injector });

diff --git a/projects/slipnslide/src/app/slides.service.ts b/projects/slipnslide/src/app/slides.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import fm from 'front-matter';
 import { combineLatest, EMPTY, forkJoin, Observable, ReplaySubject, Subject } from 'rxjs';
 import { catchError, concatMap, debounceTime, map, repeat, shareReplay, take, tap } from 'rxjs/operators';
@@ -25,6 +25,8 @@ export interface Slide {
   providedIn: 'root',
 })
 export class SlidesService {
+  private http = inject(HttpClient);
+
   private saves = new Subject<Slide>();
   private slides = new ReplaySubject<Slide[]>(1);
   slides$ = this.slides.pipe(
@@ -84,8 +86,6 @@ ${slide.markdown.trimStart()}
     )
     .subscribe();
 
-  constructor(private http: HttpClient) {}
-
   async save(slide: Slide) {
     this.saves.next(slide);
   }

diff --git a/projects/slipnslide/src/app/view-slide/view-slide.component.ts b/projects/slipnslide/src/app/view-slide/view-slide.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Injector, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, Injector, OnDestroy, OnInit, inject } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { Router } from '@angular/router';
 import { combineLatest, fromEvent, Subject } from 'rxjs';
@@ -16,6 +16,10 @@ import { ScullyContentModule } from '@scullyio/ng-lib';
   imports: [ScullyContentModule],
 })
 export class ViewSlideComponent implements OnInit, OnDestroy {
+  private elmRef = inject(ElementRef);
+  private sls = inject(SlidesService);
+  private router = inject(Router);
+
   init$ = new Subject<void>();
   elm = this.elmRef.nativeElement;
   subscriber = this.init$
@@ -32,12 +36,7 @@ export class ViewSlideComponent implements OnInit, OnDestroy {
     )
     .subscribe();
 
-  constructor(
-    private elmRef: ElementRef,
-    private sls: SlidesService,
-    private router: Router,
-    injector: Injector
-  ) {
+  constructor() {
     if (!customElements.get('code-editor')) {
       const dyn = createCustomElement(CodeSampleComponent, { injector });
       customElements.define('code-editor', dyn);

diff --git a/src/app/addresses.service.ts b/src/app/addresses.service.ts
@@ -1,11 +1,13 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { map, tap } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AddressesService {
+  private http = inject(HttpClient);
+
   addresses$ = this.http.get('assets/addresses.csv', { responseType: 'text' }).pipe(
     map(csv => csv.split('\r').map(line => line.split(','))),
     map(([header, ...rows]) =>
@@ -21,8 +23,6 @@ export class AddressesService {
       )
     )
   );
-
-  constructor(private http: HttpClient) {}
 }
 
 function unquote(str) {

diff --git a/src/app/analog-clock/analog-clock.component.ts b/src/app/analog-clock/analog-clock.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgZone, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit, inject } from '@angular/core';
 
 @Component({
   selector: 'app-analog-clock',
@@ -7,7 +7,8 @@ import { Component, NgZone, OnInit } from '@angular/core';
   standalone: true,
 })
 export class AnalogClockComponent implements OnInit {
-  constructor(private zone: NgZone) {}
+  private zone = inject(NgZone);
+
 
   ngOnInit(): void {
     if (typeof document === 'undefined') return;

diff --git a/src/app/big-data/big-data.component.ts b/src/app/big-data/big-data.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { BehaviorSubject, combineLatest, interval } from 'rxjs';
 import { distinctUntilChanged, map, mergeMap, switchMap, take, tap } from 'rxjs/operators';
 import { DemoUser, DemoUserService } from 'src/app/demo-users.service';
@@ -83,6 +83,8 @@ interface LocalState {
   `,
 })
 export class BigDataComponent {
+  private user = inject(DemoUserService);
+
   /**
    * The local state I'm using. its in a behavior subject so I can pull anything I need when I need it.
    */
@@ -144,10 +146,6 @@ export class BigDataComponent {
     page: this.curPage$,
     done: this.doneLoadingPer$,
   });
-  /** when in doubt, use console.log */
-  // .pipe(tap(s => console.log(s)));
-
-  constructor(private user: DemoUserService) {}
 
   /** utility method to extract the users I need to display. */
   findFirst(users: DemoUser[], { position, pageSize, search }): DemoUser[] {

diff --git a/src/app/directives/id.directive.ts b/src/app/directives/id.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, inject } from '@angular/core';
 
 @Directive({
   selector: '[id]',
@@ -12,9 +12,9 @@ export class IdDirective {
   selector: 'img[src]',
 })
 export class lazyImagesLoadDirective implements OnInit {
-  #elm = this.elmRef.nativeElement;
+  private elmRef = inject<ElementRef<HTMLImageElement>>(ElementRef<HTMLImageElement>);
 
-  constructor(private elmRef: ElementRef<HTMLImageElement>) {}
+  #elm = this.elmRef.nativeElement;
 
   ngOnInit() {
     this.#elm.setAttribute('loading', 'lazy');