Angular 库中的默认管道不工作

Question

我正在构建一个 Angular 库以用于更大的项目。这将是一种多回购方法，应用程序的每个部分都是一个库。所有这些部分都会有它们的组件、管道、服务...

但是我的第一个测试没有用。我创建了我的独立库和一个 hello-world 组件，使用 --watch 构建它，将它与 NPM 链接到我的基础项目......并且它有效。它在屏幕上显示消息。当我尝试添加任何类型的管道时，问题就来了，甚至默认管道也会损坏。如果创建一个 Date 对象并在消息后使用日期管道，它就会中断。与货币或异步管道相同。

日期管道错误：

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DatePipe -> InjectionToken LocaleId]: 
  StaticInjectorError(Platform: core)[DatePipe -> InjectionToken LocaleId]: 
    NullInjectorError: No provider for InjectionToken LocaleId!
Error: StaticInjectorError(AppModule)[DatePipe -> InjectionToken LocaleId]: 
  StaticInjectorError(Platform: core)[DatePipe -> InjectionToken LocaleId]: 
    NullInjectorError: No provider for InjectionToken LocaleId!
...

异步管道错误：

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AsyncPipe -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[AsyncPipe -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
Error: StaticInjectorError(AppModule)[AsyncPipe -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[AsyncPipe -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.push.../../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
...

库模块如下所示：

@NgModule({
  declarations: [HolaMundoTestComponent],
  imports: [
    CommonModule
  ],
  exports: [HolaMundoTestComponent]
})
export class HolaMundoTestModule { }

它导出的组件：

@Component({
  selector: 'lib-hola-mundo-test',
  // templateUrl: './hola-mundo-test.component.html',
  // template: `<h1>Hola mundo en fecha {{ dateFrom | date }}</h1>`,
  template: `<h1>Hola mundo en fecha {{ text | async }}</h1>`,
  styleUrls: ['./hola-mundo-test.component.scss']
})
export class HolaMundoTestComponent {
  public text = new BehaviorSubject<string>('MITEXTO');
  public dateFrom = new Date();
  public money = 123245.234555;
  // constructor(public holaMundoTest: HolaMundoTestService) {}
}

有什么想法吗？我正在导入包含所有这些默认管道的 CommonModule，它是可能的最小库。

Answer 1

在您的库中，您必须在模块中导出所有组件和管道。然后在需要的地方导入该模块。这个link应该举例说明 https://angular.io/guide/sharing-ngmodules

如果这没有帮助，也许这个库可能有用 https://github.com/ng-packagr/ng-packagr。它用于打包 angular 个库。

Answer 2

看起来像问题。尝试在 angular.json 文件中启用 preserveSymlinks 选项：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "preserveSymlinks": true,

Answer 3

在您的模块中导入浏览器模块并将其声明为导入数组：

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  declarations: [
    WeatherComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule
  ]

Angular 库中的默认管道不工作

Angular default pipes in library not working

angular-pipe

angular

angular-library

angular7