Angular default pipes in library not working

Question

I am building an Angular library to use in a bigger project. It's going to be a multi-repo approach, with each of the parts of the app being a library. All of that parts are going to have their components, pipes, services...

But my first tests are not working. I created my standalone library and a hello-world component, built it with --watch, linked it with NPM to my base project... and it works. It shows the message on the screen. The problem comes when I try to add a pipe of any kind, even default pipes break. If create a Date object and use the date pipe after the message, it breaks. Same with currency or async pipes.

Error for date pipe:

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 for async pipe:

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)
...

The library module looks like this:

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

And the component it exports:

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

Any ideas? I'm importing the CommonModule that holds all those default pipes and it's the tiniest library possible.

Looks like a similar problem, may it will help you: https://stackoverflow.com/q/47540108/4858777 — Valeriy Katkov, Apr 21 '20 at 07:50
I think you should havesingle quotes `'` instead of back-ticks `\`` around the template. — ShamPooSham, Apr 21 '20 at 07:59
Thank you, @Valeriy Katkov. It was the preserveSymlinks option. Thank you. — Sergio Tx, Apr 21 '20 at 08:11
@Valeriy Katkov. Could you please add it as an answer to the question so the real answer is not hidden inside comments? — Sergio Tx, Apr 21 '20 at 08:17
Btw, backticks allow you to use multi-line strings. I was using them because the test was bigger than the example. — Sergio Tx, Apr 21 '20 at 08:19

score 3 · Accepted Answer · answered Apr 21 '20 at 08:28

3

Looks like a similar problem. Try to enable preserveSymlinks option in your angular.json file:

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

answered Apr 21 '20 at 08:28

Valeriy Katkov

33,616
20
100
123

score 0 · Answer 2 · answered Apr 21 '20 at 08:08

In your library you have to export in a module all of your components and pipes. Then import that module wherever it is needed. This link should exemplify https://angular.io/guide/sharing-ngmodules

If that doesn't help, perhaps this library might be of use https://github.com/ng-packagr/ng-packagr. It is used to package angular libraries.

score 0 · Answer 3 · edited Sep 26 '21 at 23:35

0

In your module import browser module and declare it to imports array:

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

edited Sep 26 '21 at 23:35

Timothy G.

6,335
7
30
46

answered Sep 26 '21 at 19:40

Rajat Biswas

23
5

Angular default pipes in library not working

3 Answers3