带自定义管道选项的Angular库不起作用

Question

我正在尝试创建一个Angular库来共享代码，在NX工作区中。我已经创建了库，并且一个组件可以工作，但是我不能让自定义管道工作。

我的简单示例是从库共享一个Pipe。在我们的代码中，我们以特定的格式存储日期和时间。自定义管道会将特定的格式转换为合适的Date对象，然后调用Angular的DatePipe来转换数据。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MyDatePipe } from './my-date.pipe';
import { MyTimePipe } from './my-time.pipe';
import { LoadingComponent } from './loading/loading.component';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatProgressSpinnerModule
],
declarations: [MyDatePipe, MyTimePipe, LoadingComponent],
exports: [LoadingComponent, MyDatePipe, MyTimePipe],
})
export class AngularUiModule {}

我有一个模块来导出我正在使用的共享代码。在上面的例子中，LoadingComponent被导出，我在我试图使用MyDatePipe的同一个组件中使用它。在显示数据的AlertModule中，我可以导入LoadingComponent，但不能导入MyDatePipe。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AlertsRoutingModule } from './alerts-routing.module';
import { AlertListComponent } from './components/alert-list/alert-list.component';
import { AlertDetailComponent } from './components/alert-detail/alert-detail.component';
import { AlertLineComponent } from './components/alert-line/alert-line.component';
import { AlertsService } from './alerts.service';
import { AngularUiModule } from '@chowarmaan/angular-ui';
@NgModule({
declarations: [
AlertListComponent,
AlertDetailComponent,
AlertLineComponent,
],
imports: [CommonModule, AlertsRoutingModule, AngularUiModule],
providers: [AlertsService, MyDatePipe],
})
export class AlertsModule {}

当我尝试在提供程序中引用MyDatePipe时，我得到一个Module '"@chowarmaan/angular-ui"' has no exported member 'SlsDatePipe'.ts(2305)。

如果我在库索引中直接导出SlsDatePipe。ts文件:

export * from './lib/angular-ui.module';
export * from './lib/my-date.pipe';
export * from './lib/my-time.pipe';

然后我可以在模块中导入MyDatePipe。通过导入，我可以将其添加到providers数组中。然而，我的代码现在会在浏览器上失败，因为没有来自Angular的DatePipe的提供者。

当我没有在提供者数组中包含DatePipe时浏览器错误:

alert-list.component.html:3 ERROR NullInjectorError: R3InjectorError(AlertsModule)[DatePipe -> DatePipe -> DatePipe -> DatePipe]:
NullInjectorError: No provider for DatePipe!
at NullInjector.get (core.mjs:6367:27)
at R3Injector.get (core.mjs:6794:33)
at R3Injector.get (core.mjs:6794:33)
at R3Injector.get (core.mjs:6794:33)
at R3Injector.get (core.mjs:6794:33)
at ChainedInjector.get (core.mjs:13824:36)
at lookupTokenUsingModuleInjector (core.mjs:3293:39)
at getOrCreateInjectable (core.mjs:3338:12)
at Module.ɵɵdirectiveInject (core.mjs:10879:12)
at MyDatePipe_Factory (my-date.pipe.ts:11:25)

我必须将DatePipe导入到模块中。这对我来说似乎是不正确的，因为DatePipe在MyDatePipe代码中，其他人如何知道这正在使用?我不希望使用我的库在所有模块中导入我需要的所有内容。

我想我在库定义中做错了什么。

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'my_Date'
})
export class MyDatePipe implements PipeTransform {
constructor(private AngularDatePipe_: DatePipe) {}
public transform(DateValue: string, OutputFormat: string): unknown {
if (DateValue === null || DateValue === undefined) {
return null;
}
...
return this.AngularDatePipe_.transform(DateObject, OutputFormat);
}

但是，如果我将DatePipe也添加到模块的Providers数组中，则管道确实按预期工作。在我的组件上添加提供者数组和管道都可以工作，但是我认为如果在我的库中正确设置DatePipe就不需要了。

providers: [AlertsService, SlsDatePipe, DatePipe],

Answer 1

希望这对你有帮助。我有一个NX角微前端设置。我们有几个应用程序和一堆库:

-- apps
-- app1
-- app2
-- host
-- libs
-- app1
-- app2
-- shared
-- utils
-- customPipesModule
-- ui

libs/shared/ui内部的组件需要customPipesModule的管道。我一直得到关于找不到管道或模糊的ecmp错误的错误。

每个角，customPipesModule声明并导出我的管道，libs/shared/ui-lib导入customPipesModule。这在我们的非NX版本中工作得很好，但在NX版本中不行。

为了解决新NX repo中的问题，我必须确保libs/shared/utilsindex.ts文件导出customPipesModule以及所有管道。然后我就可以在libs/shared/ui的组件中使用管道了。