Clarity: ClrDropdownTrigger causes error during build with AOT compilation enabled

[brbayes]

Describe the bug

When using AOT compilation in Angular, an error occurs during build because a private field is being accessed from the HTML in the dropdown trigger, which AOT compilation blocks.

ERROR in [file path here]: : Directive ClrDropdownTrigger, Property 'ifO penService' is private and only accessible within class 'ClrDropdownTrigger'.

Reference: https://angular.io/guide/aot-compiler#phase-2-code-generation

How to reproduce

This issue cannot be reproduced on Stackblitz because it is a build issue.

Steps to reproduce the behavior:

1. Use the ClrDropdownTrigger alongside Clarity 2.0.0.
2. Enable AOT compilation in an Angular build by updating the build command to include the --aot flag. I.E. ng build --aot
3. Run the Angular build process.

Expected behavior

The Angular build process with AOT compilation enabled should complete successfully.

Versions

App

• Angular: 8.0.0
• Node: 10.9.0
• Clarity: 2.0.0

Device:

• N/A because this is a compilation problem, not a browser problem.

Additional notes

This issue did not occur in Clarity versions 1.1.3 and earlier. The error only appears after upgrading to Clarity 2.0.0.

The problem appears to be caused by the usage of ifOpenService.open in the directive host attribute configuration. (https://github.com/vmware/clarity/blob/master/src/clr-angular/popover/dropdown/dropdown-trigger.ts). I have been able to fix the issue by updating the ifOpenService.open to use the active getter similar to the [class.active] attribute.

[wendellestradairely]

I'm experiencing similar issues using Angular CLI.

[whizkidwwe1217]

Hi @coryrylan I hope this doesn't bother you. I'm just wondering if there will be an available patch for this fix anytime soon? The bug actually prevents us from compiling the project but the weird thing is that it doesn't throw errors when using the dropdown in a single angular app project regardless of whether the aot is enabled or not. However, when you reference ClarityModule in an angular library project, that's when errors occur.

Here's what I did to reproduce the errors using Angular CLI:

1. ng new clarity-demo
2. ng add @clr/angular
3. Add some codes for a dropdown. Example:

<clr-dropdown>
    <button
        clrDropdownTrigger
        clrDropdownToggle
        class="btn btn-sm btn-link"
    >
        <clr-icon shape="sort-by"></clr-icon> Name
    </button>
    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
        <button type="button" clrDropdownItem>Last Name</button>
        <button type="button" clrDropdownItem>Birthdate</button>
    </clr-dropdown-menu>
</clr-dropdown>

1. ng build or npm build
   This compiles successfully.
   Now add a new library project:
2. ng generate library shared-lib
3. Add ClarityModule to SharedLibModule
4. Add some code for a dropdown same as the code above.
5. ng build shared-lib.
   The project does not compile due to the errors in ClrDropdownTrigger.

I hope you can release a patch soon. Thanks for your hard-work and for this awesome library!

[gnomeontherun]

It is our plan to release the fix for this early next week.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.