migrate to standalone & remove modules

Author: vmasek

apps/ng-demo/eslint.config.js

@@ -12,6 +12,7 @@ export default tsESLint.config(...baseConfig, ...angular, ...storybook, {
     },
   },
   rules: {
+    '@angular-eslint/prefer-standalone-component': 'off',
     '@angular-eslint/prefer-standalone': 'error',
 
     '@typescript-eslint/explicit-module-boundary-types': 'error',

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

@@ -1,13 +1,16 @@
 import { Component } from '@angular/core';
+import { HeaderComponent } from '../components/header/header.component';
+import { RouterOutlet } from '@angular/router';
 
 @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,7 +19,7 @@ import { Component } from '@angular/core';
         box-sizing: border-box;
       }
     `,
-    ],
-    standalone: false
+  ],
+  imports: [HeaderComponent, RouterOutlet],
 })
 export class AppComponent {}

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

@@ -4,33 +4,25 @@ export const appRoutes: Route[] = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
     path: 'home',
-    loadChildren: () =>
-      import('../pages/home/home.module').then((m) => m.HomeModule),
+    loadComponent: () => import('../pages/home/home.component'),
   },
   {
     path: 'tag/:tag',
     pathMatch: 'full',
-    loadChildren: () =>
-      import('../pages/home/home.module').then((m) => m.HomeModule),
+    loadComponent: () => import('../pages/home/home.component'),
   },
   {
     path: 'videos',
-    loadChildren: () =>
-      import('../pages/videos/videos.module').then((m) => m.VideosModule),
+    loadComponent: () => import('../pages/videos/videos.component'),
   },
   {
     path: 'users/:username',
-    loadChildren: () =>
-      import('../pages/user-profile/user-profile.module').then(
-        (m) => m.UserProfileModule
-      ),
+    loadComponent: () => import('../pages/user-profile/user-profile.component'),
   },
   {
     path: ':user/:slug',
-    loadChildren: () =>
-      import('../pages/article-detail/article-detail.module').then(
-        (m) => m.ArticleDetailModule
-      ),
+    loadComponent: () =>
+      import('../pages/article-detail/article-detail.component'),
   },
   {
     path: 'not-found',

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

@@ -1,16 +1,16 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { NgIf, NgFor, DatePipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
 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'],
-    standalone: false
+  selector: 'app-article-card',
+
+  templateUrl: './article-card.component.html',
+  styleUrls: ['./article-card.component.scss'],
+  imports: [RouterLink, NgIf, NgFor, DatePipe, DateagoPipe],
 })
 export class ArticleCardComponent implements OnChanges {
   @Input() article!: Article;
@@ -22,10 +22,3 @@ export class ArticleCardComponent implements OnChanges {
       this.article?.organization?.slug || this.article.user.username;
   }
 }
-
-@NgModule({
-  declarations: [ArticleCardComponent, DateagoPipe],
-  imports: [CommonModule, RouterModule.forChild([])],
-  exports: [ArticleCardComponent],
-})
-export class ArticleCardModule {}

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

@@ -1,20 +1,11 @@
-import { CommonModule } from '@angular/common';
-import { Component, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-header',
-    templateUrl: './header.component.html',
-    styleUrls: ['./header.component.scss'],
-    standalone: false
+  selector: 'app-header',
+
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent {
   constructor() {}
 }
-
-@NgModule({
-  declarations: [HeaderComponent],
-  imports: [CommonModule, RouterModule.forChild([])],
-  exports: [HeaderComponent],
-})
-export class HeaderModule {}

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

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

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

@@ -1,7 +1,17 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import {
+  withInterceptorsFromDi,
+  provideHttpClient,
+} from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+import { importProvidersFrom } from '@angular/core';
 
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    importProvidersFrom(BrowserModule),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideRouter(appRoutes),
+  ],
+}).catch((err) => console.error(err));

apps/ng-demo/src/main.ts

@@ -5,10 +5,15 @@ import { ArticleDetailStore } from './article/services/article-detail.store';
 import { CommentsStore } from './article/services/comments.store';
 import { UserStore } from '../../state/user.store';
 import { UserArticlesStore } from '../../state/user-articles.store';
+import { NgIf, AsyncPipe } from '@angular/common';
+import { ReactionsComponent } from './article/reactions/reactions.component';
+import { ArticleDetailsComponent } from './article/article-details/article-details.component';
+import { UserDetailComponent } from './user/user-detail/user-detail.component';
 
 @Component({
-    selector: 'app-article-detail',
-    template: `
+  selector: 'app-article-detail',
+
+  template: `
     <aside>
       <app-reactions
         *ngIf="reaction$ | async as reactions"
@@ -25,8 +30,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,11 +42,17 @@ import { UserArticlesStore } from '../../state/user-articles.store';
         grid-template-columns: 4rem minmax(0, 7fr) minmax(0, 3fr);
       }
     `,
-    ],
-    viewProviders: [ArticleDetailStore, UserStore, CommentsStore],
-    standalone: false
+  ],
+  viewProviders: [ArticleDetailStore, UserStore, CommentsStore],
+  imports: [
+    NgIf,
+    ReactionsComponent,
+    ArticleDetailsComponent,
+    UserDetailComponent,
+    AsyncPipe,
+  ],
 })
-export class ArticleDetailComponent implements OnInit {
+export default class ArticleDetailComponent implements OnInit {
   article$ = this.articleDetailStore.article$.pipe(
     tap((article) => {
       if (article?.user) {