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

Question

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

这里是库模块定义：

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() { }

}

Answer 1

我终于弄清楚了这个问题。该库需要使用 npm link 进行 link 编辑，并且消费应用程序需要 link 到该库。由于我的所有项目都包含在一个 angular (npm) 工作区中，因此我不得不做一些不同的事情。

来自 angular 工作区根目录：

cd projects/utilities
npm link
cd ../.. (back to workspace root)
npm link dist/utilities

另外，在使用库、使用应用程序或两者进行开发时，请确保运行库处于监视模式：

cd projects/utilities
ng build --project=utilities --watch

祝你好运，我希望这对那里的人有所帮助！

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

Angular 11 library module is imported but not used in consuming app

typescript

angular

angular-library