Angular 11 库模块已导入但未在消费应用程序中使用

我正在开发一个 Angular 库来包含将在我公司的多个 Angular 项目中共享的服务、管道、指令等。到目前为止，我已经实现了三个服务，并且库项目构建得很好。但是，当我在使用该库的应用程序中导入模块时，在 VSCode 或控制台中没有出现错误，但我的 DOM 完全是空白的。直接在项目文件夹中导入 .ts 文件时，这些服务也能正常工作，但 Angular 文档特别指出不要这样做，而只能从构建的模块中导入它们。我还确保 .tsconfig 中的“Utilities”模块导入正确映射到构建的项目文件夹。请帮忙！

这是库模块定义：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UtilitiesConfig } from './interfaces/utilities-config.interface';
import { APIService } from './services/api.service';
import { AuthenticationService } from './services/authentication.service';
import { JWTService } from './services/jwt.service';
import { LogService } from './services/log.service';


@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  exports: [
  ],
  providers: [
    APIService,
    LogService,
    AuthenticationService
  ]
})
export class UtilitiesModule {

  public static forRoot(environment: UtilitiesConfig): ModuleWithProviders<UtilitiesModule> {
    return {
      ngModule: UtilitiesModule,
      providers: [
        {
          provide: 'environment',
          useValue: environment
        },
        {
          provide: HTTP_INTERCEPTORS,
          useClass: JWTService,
          multi: true
        },
        APIService,
        LogService,
        AuthenticationService
      ]
    }
  }

}

这是消费应用程序的模块定义：

import { UtilitiesModule } from 'utilities';

let imports: any[] = [
  UtilitiesModule.forRoot({
    ...
  })
];


@NgModule({
  declarations: [
    ...
  ],
  providers: [
    ...
  ],
  imports
})
export class ConsumerModule {

  constructor(injector: Injector) {
    const ConsumerElement = createCustomElement(ConsumerButtonComponent, { injector });
    customElements.define('ConsumerApp', ConsumerElement);
  }

  ngDoBootstrap() { }

}