HttpClient injection issue in Angular micro frontend when using shared library service

Frontend
1

I’m working on an Angular micro frontend setup and running into a dependency injection problem. I have a shared library with a service that needs HttpClient, but when I try to use this service in my micro frontend app, I get injection errors.

Here’s my service in the shared library:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private settings: any;

  constructor(
    private httpClient: HttpClient
  ) {}

  async loadAppSettings(): Promise<any> {
    try {
      const result = await fetch('/app-settings/config.json');
      if (!result.ok) {
        throw new Error(`Request failed with status: ${result.status}`);
      }
      this.settings = await result.json();
      return this.settings;
    } catch (err) {
      console.error('Failed to load app settings:', err);
      return null;
    }
  }
}

Then in my micro frontend component:

import { Component } from '@angular/core';
import { DataService } from 'shared-library';

@Component({
  selector: 'micro-app',
  templateUrl: './micro-app.component.html',
  styleUrls: ['./micro-app.component.scss']
})
export class MicroAppComponent {
  appTitle = 'micro-frontend';
  isMenuCollapsed = false;

  constructor(private dataService: DataService) {
    this.setupEventListeners();
  }

  collapseMenu() {
    this.isMenuCollapsed = !this.isMenuCollapsed;
  }

  private setupEventListeners() {
    window.addEventListener('localeChange', (evt: any) => {
      console.log('Locale changed:', evt.detail);
    });
  }
}

The error happens as soon as I inject the DataService in the constructor. I’ve tried adding HttpClientModule to imports and using provideHttpClient but the injection error persists. How can I properly set up HttpClient for services in shared libraries used by micro frontends?

2

your DI container setup is probably broken across boundaries. test by injecting HttpClient straight into your component instead of through the shared service constructor. also double-check your shared lib exports - bundling sometimes kills the metadata.

3

hold up - you importing that shared library service right in your micro frontend’s module providers? HttpClient gets wonky when services jump between modules. can you show me your app.module in the micro frontend? HttpClientModule actually in there?

4

This injection issue happens when module federation doesn’t properly share Angular’s DI context between your host and micro frontend. Your shared library service expects HttpClient, but the micro frontend’s module setup isn’t configured to provide it. First, make sure your micro frontend’s main module imports HttpClientModule - not just the component module. Second, check your webpack module federation config. You need to share both ‘@angular/common/http’ and ‘@angular/core’ as singletons. Add these to your webpack shared section with singleton: true and strictVersion: true. I hit similar issues when my shared library was compiled with a different Angular version than the micro frontend consuming it. Double-check that all apps use identical Angular versions and build your shared library with ng-packagr - it handles DI metadata correctly for micro frontend setups.