Error when performing AOT build: Property 'escapeKeyboardEvent' is private

[matthewdunsdon]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

When performing an AOT build, I get the following error.

ERROR in (1,1): : Directive NgxSmartModalComponent, Property 'escapeKeyboardEvent' is private and only accessible within class 'NgxSmartModalComponent'.
ClientApp\app\public\productdetails\productdetails.component.html(56,1): : Directive NgxSmartModalComponent, Property 'escapeKeyboardEvent' is private and only accessible within class 'NgxSmartModalComponent'.

Expected behavior

I was expecting to be able to do AOT build.

Reproduction of the problem

Content of component HTML template

<!-- ... -->
<ngx-smart-modal #classicModal identifier="classicModal">
  <h1>Hey, I'm a simple modal!</h1>
  <img class="modal-image" src="http://lorempicsum.com/futurama/627/200/3" alt="Lorem picsum">
  <p>{{ "sampleText[0]" }}</p>
  <button class="button -dark" (click)="classicModal.close()">Close</button>
</ngx-smart-modal>

Content of app module

  // ...
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgxSmartModalModule.forRoot(),
    // ....
  ]
  // ...

Please tell us about your environment:

• Windows 10 Enterprise

• Smart Modal version: 6.0.2

• Angular version: 5.2.10

• Browser: N/A

• Language: TypeScript 2.5.3

[khylias]

Hi @matthewdunsdon ,

thanks for you interest about our lib !
On a quick research, it seems to be the .forRoot() configuration that cause trouble with the AOT build. angular/angular#14707

I'll taking a time for look to fix it.

[maximelafarie]

Hi @matthewdunsdon! Are you trying to access escapeKeyboardEvent in your template? (line no.56)

Are you importing NgxSmartModalModule.forRoot() in a nested module?

@khylias Be careful, the demo builds well on CI as you can see here. If the problem is not client-side, it's maybe a library compilation error. I'll watch potential fixes from https://github.com/robisim74/angular-library-starter.

[matthewdunsdon]

Are you trying to access escapeKeyboardEvent in your template?

No.

Are you importing NgxSmartModalModule.forRoot() in a nested module?

No.

[matthewdunsdon]

In ngx-smart-modal.component.ts#L183-L184, I see the following:

  @HostListener('document:keyup', ['$event'])
  private escapeKeyboardEvent(event: KeyboardEvent) {

Question to consider ...

• Is is valid to use a @HostListener annotation on a private method?

Angular AOT does care & check whether fields / properties /methods are private, both when checking component html templates and on usage (i.e. by library consumers like myself 🗣 ).

[maximelafarie]

Yep, you're right @matthewdunsdon, I'll fix that! 👌