How to migrate to standalone in angular

I have question how to migrate to standalone if I want that:

1. In ApplicationConfigService I want use httpclient How I can do it?
2. After Init app I want use load function

export function initializeFn(jsonAppConfiguration: ApplicationConfigService){
  return () =>{
    return jsonAppConfiguration.load();
  };
}

Please check following codes

export abstract class AppConfiguration{
    baseUrl:string = '';
    connectionName:string = '';
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppConfiguration } from './app-config'
import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

@Injectable({providedIn: 'root'})
export class ApplicationConfigService extends AppConfiguration{

  constructor(@Inject(DOCUMENT) private document: Document, private http: HttpClient) { 
    super();
  }


  load(){
    try{
    
      this.connectionName = (this.document.getElementsByName("connectionName")[0] as any).value;
      this.baseUrl = (this.document.getElementsByName("baseUrl")[0] as any).value;
    }
    catch{}
  }
}

import { APP_INITIALIZER, Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ApplicationConfigService } from './config/application-config.service';
import { HttpClientModule } from '@angular/common/http';


export function initializeFn(jsonAppConfiguration: ApplicationConfigService){
  return () =>{
    return jsonAppConfiguration.load();
  };
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    HttpClientModule
  ],
  providers: [
    ApplicationConfigService,
    {
      provide:APP_INITIALIZER,
      multi:true,
      deps:[ApplicationConfigService],
      useFactory:initializeFn
    }
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'f_project';
}

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApplicationConfigService } from '../config/application-config.service';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [],
  templateUrl: './main.component.html',
  styleUrl: './main.component.scss'
})
export class MainComponent implements OnInit{


  public ConnectionName: string = '';



  constructor(private route: ActivatedRoute, private http: HttpClient, private AppConfig: ApplicationConfigService, private cdr: ChangeDetectorRef) {
    this.ConnectionName = AppConfig.connectionName;
  }

  ngOnInit(): void {
    console.log("ConnectionName: " + this.ConnectionName);
  }
}