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

[muneebahmad0600]

any resolution to this?

I am trying to import a service from remote-1 into remote-2. I had created remote1 angular app using ng new and added single-spa-angular afterwards. there is no public-api.ts file. but I think the main problem at the moment is that when I try to add import in remote2 for that service like so.

import { myService} from '@org/remote1';

It says: "Cannot find module '@org/remote1' or its corresponding type declarations."

I have added remote1 in externals extra-webpack.config.js like this.

const singleSpaAngularWebpack =
    require("single-spa-angular/lib/webpack").default;

module.exports = (config, options) => {
    const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
    singleSpaWebpackConfig.externals = ['@infocert/adminuser']

    return singleSpaWebpackConfig;
};

What else is required here?

[chethan1095]

No with that approach I didn't find any solution but I created a another angular library project and moved all my services into that and installed that as a package in my micro-app and started using the service