BlockUI directive always undefined when included within a library (Angular 16)

[VincenzoManto]

Issue with ng-block-ui in Angular 16

Description

Using ng-block-ui@4.0.1 in Angular 16 works as expected when included within an application project, but it fails in libraries.

We include ng-block-ui as follows:

@BlockUI('content-wrapper') blockBody: NgBlockUI;

<div *blockUI="'content-wrapper'" class="content-wrapper"></div>

The spinner displays properly when used within an application, but when the library is compiled in ES2022 and included in an application, it always appears as undefined, regardless of where or when it is checked (in ngOnInit, ngAfterViewInit, constructor, and even in asynchronous subscribe), long after the template rendering.

Environment

• Angular CLI: 16.2.5

• Node: 19.6.0 (Unsupported)

• Package Manager: npm 9.5.0

• Operating System: Win32 x64

• Angular: 16.2.8

• ... animations, common, compiler, compiler-cli, core, forms

• ... language-service, platform-browser, platform-browser-dynamic

• ... router

Package Versions

• @angular-devkit/architect: 0.1602.5
• @angular-devkit/build-angular: 16.2.5
• @angular-devkit/core: 16.2.5
• @angular-devkit/schematics: 16.2.5
• @angular/cli: 16.2.5
• @schematics/angular: 16.2.5
• ng-packagr: 16.2.3
• rxjs: 6.5.4
• typescript: 4.9.5
• zone.js: 0.13.3

Steps to Reproduce

1. Include ng-block-ui in an Angular library project.
2. Use @BlockUI decorator and *blockUI directive within library components.
3. Include the library in an Angular application.
4. Observe that the spinner always appears as undefined.

Expected Behavior

The ng-block-ui spinner should function correctly in both library and application projects when using the same code.

Additional Information

• Ensure that you are using compatible versions of Angular and ng-block-ui.
• Verify the configuration of the module using ng-block-ui within the library.
• Use a supported version of Node as recommended by Angular.

Please let me know if you need any additional information to help resolve this issue.

[dpw-dev]

@VincenzoManto were you able to resolve this? I am facing the similar issue.

[VincenzoManto]

@dpw-dev yes, we opted for using this.block.start('content-wrapper'); and this.block.stop('content-wrapper');, directly controlling the spinner in the TS and ensuring to do it after the view content is initialized (so after the AfterViewInit event)

[dpw-dev]

Hey @VincenzoManto thank you for the suggestion. However, when I tried implementing it, I am still facing the issue. Is the below div on the app level or in the component inside the library?.

<div *blockUI="'content-wrapper'" class="content-wrapper"></div>

If possible could you share a sample project structure?

Appreciate the help.

Thanks

[VincenzoManto]

<div *blockUI="'content-wrapper'" class="content-wrapper"></div> is at the HTML component level in the library. We suggest to remove this directive and directly use the this.block.start('content-wrapper'); and this.block.start('content-wrapper'); in the component TS to control the block tag wherever you need in the logic class

[dpw-dev]

Thanks @VincenzoManto. That works.