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链接，并且消费应用需要链接到库。因为我所有的项目都包含在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

祝你好运，我希望这有助于那里的人!