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

Question

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

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

Try to provide it providers array in root

Ahmed Elhakim
– Ahmed Elhakim

2025-01-29 11:08:14 +00:00
Commented Jan 29 at 11:08 — Ahmed Elhakim
– Ahmed Elhakim, Commented Jan 29 at 11:08

Paula · Accepted Answer · 2025-06-02 17:58:00Z

0

try to insert "provideHttpClient(withInterceptorsFromDi())" in the providers list on main.single-spa.ts

   const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return bootstrapApplication(AppComponent, {
      providers: [...getSingleSpaExtraProviders(),provideHttpClient(withInterceptorsFromDi()) ],
    });
  },
  template: '<app-root />',
  Router,
  NavigationStart,
  NgZone,
});

answered Jun 2 at 17:58

Paula

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related