use appInitializer to load commands on startup; use fetch instead of HttpClient for smaller bundle size

Author: danielraab

src/app/app.config.ts

@@ -1,9 +1,9 @@
-import { ApplicationConfig, InjectionToken, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { ApplicationConfig, InjectionToken, provideBrowserGlobalErrorListeners, provideAppInitializer, inject } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { CommandService } from './services/command.service';
 import packageJson from '../../package.json';
 
 export const APP_VERSION = new InjectionToken<string>('APP_VERSION');
@@ -13,7 +13,10 @@ export const appConfig: ApplicationConfig = {
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes), 
     provideClientHydration(withEventReplay()),
-    provideHttpClient(withFetch()),
-    { provide: APP_VERSION, useValue: packageJson.version }
+    { provide: APP_VERSION, useValue: packageJson.version },
+    provideAppInitializer(() => {
+      const commandService = inject(CommandService);
+      return commandService.loadCommands();
+    })
   ]
 };

src/app/components/command-builder/command-builder.component.ts

@@ -1,6 +1,7 @@
-import { Component, signal, computed, effect, inject, OnInit, viewChild } from '@angular/core';
+import { Component, signal, computed, effect, inject, viewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { CommandService } from '../../services/command.service';
 import { Command } from '../../models/command.model';
 import { CommandHistoryComponent } from '../command-history/command-history.component';
@@ -127,12 +128,13 @@ interface OptionState {
     }
   `
 })
-export class CommandBuilderComponent implements OnInit {
+export class CommandBuilderComponent {
   private route = inject(ActivatedRoute);
   private commandService = inject(CommandService);
   private titleService = inject(Title);
   private historyComponent = viewChild(CommandHistoryComponent);
 
+  private routeParams = toSignal(this.route.paramMap);
   command = signal<Command | undefined>(undefined);
   isLoading = signal(true);
   private flagStates = signal<Map<string, FlagState>>(new Map());
@@ -172,33 +174,28 @@ export class CommandBuilderComponent implements OnInit {
   });
 
   constructor() {
-    // Auto-save effect
     effect(() => {
-      this.generatedCommand(); // Track changes
+      this.generatedCommand();
     });
-  }
 
-  ngOnInit(): void {
-    this.route.paramMap.subscribe(async params => {
-      const id = params.get('id');
+    effect(() => {
+      const params = this.routeParams();
+      const id = params?.get('id');
+      
       if (id) {
         this.isLoading.set(true);
         this.command.set(undefined);
 
-        // Wait for commands to be loaded if they haven't been yet
-        if (this.commandService.commands().length === 0) {
-          await this.commandService.loadCommands();
-        }
-        
         const cmd = this.commandService.getCommand(id);
         this.command.set(cmd);
+        
         if (cmd) {
           this.initializeStates(cmd);
           this.titleService.setTitle(`Command Builder - ${cmd.name}`);
         }
+        
+        this.isLoading.set(false);
       }
-
-      this.isLoading.set(false);
     });
   }
 

src/app/services/command.service.ts

@@ -1,5 +1,4 @@
 import { Injectable, signal, computed, inject, PLATFORM_ID } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 import { isPlatformBrowser } from '@angular/common';
 import { Command, CommandData } from '../models/command.model';
 
@@ -12,21 +11,23 @@ export interface CommandHistoryEntry {
   providedIn: 'root'
 })
 export class CommandService {
-  private http = inject(HttpClient);
   private platformId = inject(PLATFORM_ID);
 
   private commandsData = signal<Command[]>([]);
 
   commands = computed(() => this.commandsData());
 
   async loadCommands(): Promise<void> {
-    // Only load commands in the browser to avoid SSR issues
     if (!isPlatformBrowser(this.platformId)) {
       return;
     }
 
     try {
-      const data = await this.http.get<CommandData>('/commands.json').toPromise();
+      const response = await fetch('/commands.json');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data: CommandData = await response.json();
       if (data) {
         this.commandsData.set(data.commands);
       }