"export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core'

[bdryanovski]

🐞 bug report

We are getting this error when we try to run the latest (at the moment 10.0.5) version.

"export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core'
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'i0') was not found in '@angular/core'

Affected Package

The issue is caused by package @angular/core: 10.0.5

Is this a regression?

This issue is not present in older version: 10.0.x >= 10.0.4

Description

It seems to be trigger when one of these bindings/listeners are used.

@HostBinding('@expandAnimation')
@HostListener('@expandAnimation.done')
@HostBinding('@leaveAnimation') 

After this commit in version 10.0.5 the changes there are now breaking our build. And create a breaking change for us.

🔬 Minimal Reproduction

npm install @angular/cli@latest -g # make sure it is the latest 10.0.4
ng new my-app
cd my-app
ng add @clr/angular@next # installing 4.0.0-rc.1
npm run start

Github Repository for testing

git clone https://github.com/bdryanovski/clarity-v3-dark-theme-sbpxsn
cd clarity-v3-dark-theme-sbpxsn
npm install
npm run start

🔥 Exception or Error

"export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core'
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'i0') was not found in '@angular/core'

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.4
Node: 12.16.0
OS: darwin x64

Angular: 10.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: 

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cli                      10.0.4
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?

[JoostK]

Heya,

instructions are not considered stable API and can currently change at any time. The @clr/angular@next library you mention is shipping Ivy instructions to NPM, which is not something that is supported. Please find more information in the documentation. The recommendation there is to publish the ViewEngine format instead.

Keeping this open for visibility.

[bdryanovski]

Hey @JoostK sorry for the late reply from my side, I wanted to make few more test before that.

I created a dummy lib:

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib

Modify the my-lib.component to

import { Component, OnInit, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'lib-component',
  template: `
    <p>
      works!
    </p>
  `,
  styles: [
  ]
})
export class LibComponent implements OnInit {

  constructor() { }

  @HostBinding('@expandAnimation')
  @HostListener('@expandAnimation.done')
  @HostBinding('@leaveAnimation')

  ngOnInit(): void {
  }

}

And build it like that

ng build my-lib --prod

When I try to use it into the freshly build app. I'm getting the same error:

"export 'ɵɵsyntheticHostListener' (imported as 'ɵngcc0') was not found in '@angular/core'
"export 'ɵɵsyntheticHostProperty' (imported as 'ɵngcc0') was not found in '@angular/core'

The DemoApplication is based on the latest version 10.0.5 (Ivy is set to true/default)
And LibraryApplication is based on 10.0.2 - the same version that we use. (Ivy is set to false)

❯ npm run start

> my-app@0.0.0 start /Users/user/demo/my-app
> ng serve

chunk {main} main.js, main.js.map (main) 16.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.34 MB [initial] [rendered]
Date: 2020-07-28T19:25:47.220Z - Hash: 399facfaef6c1f6123c3 - Time: 5409ms

ERROR in ../fake-lib/dist/lib/__ivy_ngcc__/fesm2015/trash.js 24:8-38
"export 'ɵɵsyntheticHostListener' (imported as 'ɵngcc0') was not found in '@angular/core'

ERROR in ../fake-lib/dist/lib/__ivy_ngcc__/fesm2015/trash.js 26:8-38
"export 'ɵɵsyntheticHostProperty' (imported as 'ɵngcc0') was not found in '@angular/core'
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Here is a repository with both projects and script to test them quick : https://github.com/bdryanovski/faild-build

Not sure, did I miss something?

[JoostK]

@bdryanovski Thanks for the follow-up. After briefly looking into the reproduction, I suspect the issue you're seeing is because of the symlinked library. Module resolution from within ../fake-lib/dist/lib/__ivy_ngcc__/fesm2015/trash.js will resolve the @angular/core import from ../fake-lib/node_modules, which corresponds with 10.0.2, but the library has been compiled to be consumed in an application on 10.0.5, so it does use the new instructions which are unavailable in 10.0.2. This is kind of the opposite problem of the reported issue.

The way in which symlinks are currently handled is definitely not ideal. There's issue #33395 to track the issues around symlinks.

[bdryanovski]

Hey @JoostK, I gonna keep an eye on it. It seems that our issue was something completely different - but at least know I know how some of the internal inside @angular/core is working ;)

Thanks for the help.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}