Dependency Injection error from shared library for single spa angular micro frontend

[chethan1095]

Hi Currently I am trying to implement angular micro front-end using single SPA where I have created a microApp1 and shared library in my shared library I have created a Crud Service which uses HttpModule as shown below.

crud.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
 })

export class CrudService {
private config: any;

constructor(
private http: HttpClient    
) {

}

 async getNWCConfig(): Promise<any> {
  try {
  const response = await fetch('/nwc-config/angular_conf.json');
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  this.config = await response.json();
  return this.config;
 } catch (error) {
  console.error('Error fetching NWC config:', error);
  return null;
 }
}

Now I am exporting this crud service in sharedModule and also exporting in public.api.ts file but while injecting this crud service inside microApp1 constructor

using that crudservice inside app.componen.ts

import { Component, Inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { singleSpaPropsSubject } from '../single-spa/single-spa-props';
import { CommonModule } from '@angular/common';
import { SharedUtilsService , CrudService } from 'shared-utils'; 

@Component({
  selector: 'app-root',
  // standalone: true,
  // imports: [RouterOutlet, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'app-home';
  singleSpaProps$ = singleSpaPropsSubject.asObservable();

  isSidebarMinimized = false;

  toggleSidebar() {
    this.isSidebarMinimized = !this.isSidebarMinimized;
  }

  constructor( private crudService : CrudService ) { 
   

    window.addEventListener('language', (event: any) => {
      console.log('Event received:', event.detail);
    });

  }
}

the moment i use it inside constructor i am getting the below error enter image description here

I tried importing HttpClientModule , ProvideHttpClient providers everything still I am facing the injection error