库中的角度默认管道不起作用答案

【问题标题】：Angular default pipes in library not working库中的角度默认管道不起作用
【发布时间】：2020-04-21 07:45:52
【问题描述】：

我正在构建一个 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，它可能是最小的库。

【问题讨论】：

貌似有类似问题，希望对您有所帮助：stackoverflow.com/q/47540108/4858777
我认为您应该在模板周围使用单引号 ' 而不是反引号 `。
谢谢你，@Valeriy Katkov。这是 preserveSymlinks 选项。谢谢。
@Valeriy Katkov。您能否将其添加为问题的答案，以便真正的答案不会隐藏在 cmets 中？
顺便说一句，反引号允许您使用多行字符串。我使用它们是因为测试比示例更大。

标签： angular angular7 angular-pipe angular-library

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：