I have a no standalone component with Angular 19

import { Component, inject, OnInit } from '@angular/core';
import { HelloWorldFacade } from './+state/hello-world.facade';
import { Observable } from 'rxjs';
import { CommonModule, DatePipe } from '@angular/common';

@Component({
  selector: 'lib-hello-world-with-ngrx',
  standalone: false,
  template: `
      {{message$ | async}}
  `,
  styles: ``
})
export class HelloWorldWithNgrxComponent implements OnInit{

  public message$?: Observable<string>;
  private hwFacade = inject(HelloWorldFacade);


  ngOnInit(): void {
    this.message$ = this.hwFacade.message$

    setInterval(() => {
      this.hwFacade.appendMessage('a');
    }, 10000);
  }

}

with its module

import { CommonModule, AsyncPipe } from '@angular/common';
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { HelloWorldEffects } from './+state/hello-world.effects';
import { HelloWorldFacade } from './+state/hello-world.facade';
import * as fromHW from './+state/hello-world.reducer';
import { HelloWorldWithNgrxComponent } from './hello-world-with-ngrxponent';

@NgModule({
  imports: [
    CommonModule,
    AsyncPipe,
    StoreModule.forFeature(
      fromHW.HW_FEATURE_KEY,
      fromHW.hwReducer
    ),
    EffectsModule.forFeature([HelloWorldEffects])
  ],
  providers: [HelloWorldFacade],
  declarations: [HelloWorldWithNgrxComponent],
  exports: [HelloWorldFacade, HelloWorldWithNgrxComponent, CommonModule]
})
export class HelloWorldWithNgrxModule { }

I created a Workspace No Application, only for generate my personal lib

When i try to build the lib with comand ng build hello-world-with-ngrx i recive this error

✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/hello-world-with-ngrx/src/lib/hello-world-with-ngrxponent.ts:10:20 - error NG8004: No pipe found with name 'async'.

Link for repo:

How can i resolve it issue?

I have a no standalone component with Angular 19

import { Component, inject, OnInit } from '@angular/core';
import { HelloWorldFacade } from './+state/hello-world.facade';
import { Observable } from 'rxjs';
import { CommonModule, DatePipe } from '@angular/common';

@Component({
  selector: 'lib-hello-world-with-ngrx',
  standalone: false,
  template: `
      {{message$ | async}}
  `,
  styles: ``
})
export class HelloWorldWithNgrxComponent implements OnInit{

  public message$?: Observable<string>;
  private hwFacade = inject(HelloWorldFacade);


  ngOnInit(): void {
    this.message$ = this.hwFacade.message$

    setInterval(() => {
      this.hwFacade.appendMessage('a');
    }, 10000);
  }

}

with its module

import { CommonModule, AsyncPipe } from '@angular/common';
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { HelloWorldEffects } from './+state/hello-world.effects';
import { HelloWorldFacade } from './+state/hello-world.facade';
import * as fromHW from './+state/hello-world.reducer';
import { HelloWorldWithNgrxComponent } from './hello-world-with-ngrxponent';

@NgModule({
  imports: [
    CommonModule,
    AsyncPipe,
    StoreModule.forFeature(
      fromHW.HW_FEATURE_KEY,
      fromHW.hwReducer
    ),
    EffectsModule.forFeature([HelloWorldEffects])
  ],
  providers: [HelloWorldFacade],
  declarations: [HelloWorldWithNgrxComponent],
  exports: [HelloWorldFacade, HelloWorldWithNgrxComponent, CommonModule]
})
export class HelloWorldWithNgrxModule { }

I created a Workspace No Application, only for generate my personal lib

When i try to build the lib with comand ng build hello-world-with-ngrx i recive this error

✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/hello-world-with-ngrx/src/lib/hello-world-with-ngrxponent.ts:10:20 - error NG8004: No pipe found with name 'async'.

Link for repo: https://github/giolongo/gle-angular-lib/tree/master/projects/hello-world-with-ngrx/src/lib

How can i resolve it issue?

• javascript
• angular
• typescript

• The module is not exported by the public-api.ts. This will definitely be a problem when trying to consume the module, it could also throw off the compiler. Can you try exporting the module in public-api.ts? – JSON Derulo Commented Mar 28 at 11:32

1 Answer 1

The facade is a service and should not be in the exports of the module. If you want to import it, you can use importProvidersFrom(HelloWorldWithNgrxModule) when using this library in an application.

  ...
  providers: [HelloWorldFacade],
  declarations: [HelloWorldWithNgrxComponent],
  exports: [HelloWorldWithNgrxComponent, CommonModule]
})
export class HelloWorldWithNgrxModule { }

Make sure you add all the files to the exports of public-api.ts, only then build will work.

The reason you got that error might be because you imported the component but not the module that uses the component.

export * from './lib/+state/hello-world.action';
export * from './lib/+state/hello-world.effects';
export * from './lib/+state/hello-world.facade';
export * from './lib/+state/hello-world.reducer';
export * from './lib/+state/hello-world.selector';
export * from './lib/hello-world-with-ngrxponent';
export * from './lib/hello-world-with-ngrx.service';
export * from './lib/hello-world-with-ngrx.module';

Commit and Github repo