migrate to latest Nx and Angular 19

Author: vmasek

apps/ng-demo/src/app/app.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  template: `
+    selector: 'app-root',
+    template: `
     <app-header></app-header>
     <router-outlet></router-outlet>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: block;
         max-width: var(--screen-width);
@@ -16,6 +16,7 @@ import { Component } from '@angular/core';
         box-sizing: border-box;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class AppComponent {}

apps/ng-demo/src/components/article-card/article-card.component.ts

@@ -7,9 +7,10 @@ import { Article } from '../../models/articles';
 import { DateagoPipe } from '../../pipes/dateago.pipe';
 
 @Component({
-  selector: 'app-article-card',
-  templateUrl: './article-card.component.html',
-  styleUrls: ['./article-card.component.scss'],
+    selector: 'app-article-card',
+    templateUrl: './article-card.component.html',
+    styleUrls: ['./article-card.component.scss'],
+    standalone: false
 })
 export class ArticleCardComponent implements OnChanges {
   @Input() article!: Article;

apps/ng-demo/src/components/header/header.component.ts

@@ -3,9 +3,10 @@ import { Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: false
 })
 export class HeaderComponent {
   constructor() {}
@@ -16,4 +17,4 @@ export class HeaderComponent {
   imports: [CommonModule, RouterModule.forChild([])],
   exports: [HeaderComponent],
 })
-export class HeaderModule {}
+export class HeaderModule {}

apps/ng-demo/src/components/scoll-tracker/scroll-tracker.directive.ts

@@ -9,8 +9,9 @@ import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
 @Directive({
-  /* eslint-disable @angular-eslint/directive-selector */
-  selector: '[scrollTracker]',
+    /* eslint-disable @angular-eslint/directive-selector */
+    selector: '[scrollTracker]',
+    standalone: false
 })
 export class ScrollTrackerDirective implements OnDestroy, OnInit {
   @Output() scrollingFinished = new EventEmitter<void>();

apps/ng-demo/src/pages/article-detail/article-detail.component.ts

@@ -7,8 +7,8 @@ import { UserStore } from '../../state/user.store';
 import { UserArticlesStore } from '../../state/user-articles.store';
 
 @Component({
-  selector: 'app-article-detail',
-  template: `
+    selector: 'app-article-detail',
+    template: `
     <aside>
       <app-reactions
         *ngIf="reaction$ | async as reactions"
@@ -25,8 +25,8 @@ import { UserArticlesStore } from '../../state/user-articles.store';
       <app-user-detail *ngIf="user" [user]="user"></app-user-detail>
     </ng-container>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: grid;
         grid-gap: 1rem;
@@ -37,8 +37,9 @@ import { UserArticlesStore } from '../../state/user-articles.store';
         grid-template-columns: 4rem minmax(0, 7fr) minmax(0, 3fr);
       }
     `,
-  ],
-  viewProviders: [ArticleDetailStore, UserStore, CommentsStore],
+    ],
+    viewProviders: [ArticleDetailStore, UserStore, CommentsStore],
+    standalone: false
 })
 export class ArticleDetailComponent implements OnInit {
   article$ = this.articleDetailStore.article$.pipe(

apps/ng-demo/src/pages/article-detail/article/article-details/article-details.component.ts

@@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core';
 import { ArticleDetails } from '../../../../models/articles';
 
 @Component({
-  selector: 'app-article-details',
-  template: `
+    selector: 'app-article-details',
+    template: `
     <article class="card article mb-4">
       <header>
         <div class="article-cover" *ngIf="article.cover_image">
@@ -64,8 +64,8 @@ import { ArticleDetails } from '../../../../models/articles';
       ></app-comments-tree>
     </article>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         border-radius: 5px;
         background-color: #fff;
@@ -143,7 +143,8 @@ import { ArticleDetails } from '../../../../models/articles';
         }
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class ArticleDetailsComponent {
   @Input() article!: ArticleDetails;

apps/ng-demo/src/pages/article-detail/article/comments-tree/comments-tree.component.ts

@@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core';
 import { CommentsStore } from '../services/comments.store';
 
 @Component({
-  selector: 'app-comments-tree',
-  template: `
+    selector: 'app-comments-tree',
+    template: `
     <header class="flex justify-between">
       <h2>
         Discussion <span>({{ commentsCount }})</span>
@@ -14,16 +14,17 @@ import { CommentsStore } from '../services/comments.store';
       <app-comments [comments]="comments"></app-comments>
     </div>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: block;
         app-comments {
           padding-left: 1.75rem;
         }
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class CommentsTreeComponent {
   @Input() commentsCount = 0;

apps/ng-demo/src/pages/article-detail/article/comments/comments.component.ts

@@ -2,8 +2,8 @@ import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { Comment } from '../../../../models/comment';
 
 @Component({
-  selector: 'app-comments',
-  template: `
+    selector: 'app-comments',
+    template: `
     <details
       #commentsSec
       (toggle)="cdRef.detectChanges()"
@@ -72,16 +72,17 @@ import { Comment } from '../../../../models/comment';
       ></app-comments>
     </details>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: block;
         app-comments {
           padding-left: 1.75rem;
         }
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class CommentsComponent {
   @Input() comments: Comment[] = [];

apps/ng-demo/src/pages/article-detail/article/reactions/reactions.component.ts

@@ -2,10 +2,10 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Reaction } from '../../../../models/reaction-data';
 
 @Component({
-  selector: 'app-reactions',
-  templateUrl: './reactions.component.html',
-  styles: [
-    `
+    selector: 'app-reactions',
+    templateUrl: './reactions.component.html',
+    styles: [
+        `
       :host {
         display: grid;
         gap: 1.5rem;
@@ -45,7 +45,8 @@ import { Reaction } from '../../../../models/reaction-data';
         fill: currentColor;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class ReactionsComponent {
   @Input() reactions: Reaction[] = [];

apps/ng-demo/src/pages/article-detail/user/user-articles/user-articles.component.ts

@@ -4,8 +4,8 @@ import { ArticleDetailStore } from '../../article/services/article-detail.store'
 import { UserArticlesStore } from '../../../../state/user-articles.store';
 
 @Component({
-  selector: 'app-user-articles',
-  template: `
+    selector: 'app-user-articles',
+    template: `
     <ng-container *ngIf="userArticles$ | async as articles">
       <section>
         <header class="flex align-center">
@@ -30,8 +30,8 @@ import { UserArticlesStore } from '../../../../state/user-articles.store';
       </section>
     </ng-container>
   `,
-  styles: [
-    `
+    styles: [
+        `
       header {
         padding: 0.75rem 1rem;
         border-bottom: 1px solid #fbfcff;
@@ -98,7 +98,8 @@ import { UserArticlesStore } from '../../../../state/user-articles.store';
         display: inline;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class UserArticlesComponent {
   @Input() name = '';