@HostListener etc does not appear in generated code

[robwormald]

(post ngModules)

The following component when compiled via ngc does not have a host listener setup in the compiled ngfactory.

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

@Component({
    selector: 'home-view',
    template: `
      <div>Home</div>
      `,

})
export class HomeView {
    constructor(){
    }
    @HostListener('mouseover', ['$event'])
    onMouseOver(ev){
        console.log('mouseover')
    }
}

compiled via ngc produces:

/**
 * This file is generated by the Angular 2 template compiler.
 * Do not edit.
 */
 /* tslint:disable */

import * as import0 from '@angular/core/src/render/api';
import * as import1 from '@angular/core/src/linker/view';
import * as import2 from '@angular/core/src/linker/element';
import * as import3 from './home-view';
import * as import4 from '@angular/core/src/linker/view_utils';
import * as import5 from '@angular/core/src/di/injector';
import * as import6 from '@angular/core/src/linker/view_type';
import * as import7 from '@angular/core/src/change_detection/change_detection';
import * as import8 from '@angular/core/src/linker/component_factory';
import * as import9 from '@angular/core/src/metadata/view';
var renderType_HomeView_Host:import0.RenderComponentType = null;
class _View_HomeView_Host0 extends import1.AppView<any> {
  _el_0:any;
  private _appEl_0:import2.AppElement;
  _HomeView_0_4:import3.HomeView;
  constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
    super(_View_HomeView_Host0,renderType_HomeView_Host,import6.ViewType.HOST,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
  }
  createInternal(rootSelector:string):import2.AppElement {
    this._el_0 = this.selectOrCreateHostElement('home-view',rootSelector,null);
    this._appEl_0 = new import2.AppElement(0,null,this,this._el_0);
    var compView_0:any = viewFactory_HomeView0(this.viewUtils,this.injector(0),this._appEl_0);
    this._HomeView_0_4 = new import3.HomeView();
    this._appEl_0.initComponent(this._HomeView_0_4,[],compView_0);
    compView_0.create(this._HomeView_0_4,this.projectableNodes,null);
    this.init([].concat([this._el_0]),[this._el_0],[],[]);
    return this._appEl_0;
  }
  injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
    if (((token === import3.HomeView) && (0 === requestNodeIndex))) { return this._HomeView_0_4; }
    return notFoundResult;
  }
}
function viewFactory_HomeView_Host0(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
  if ((renderType_HomeView_Host === null)) { (renderType_HomeView_Host = viewUtils.createRenderComponentType('',0,null,[],{})); }
  return new _View_HomeView_Host0(viewUtils,parentInjector,declarationEl);
}
export const HomeViewNgFactory:import8.ComponentFactory<import3.HomeView> = new import8.ComponentFactory<import3.HomeView>('home-view',viewFactory_HomeView_Host0,import3.HomeView);
const styles_HomeView:any[] = [];
var renderType_HomeView:import0.RenderComponentType = null;
class _View_HomeView0 extends import1.AppView<import3.HomeView> {
  _text_0:any;
  _el_1:any;
  _text_2:any;
  _text_3:any;
  constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
    super(_View_HomeView0,renderType_HomeView,import6.ViewType.COMPONENT,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
  }
  createInternal(rootSelector:string):import2.AppElement {
    const parentRenderNode:any = this.renderer.createViewRoot(this.declarationAppElement.nativeElement);
    this._text_0 = this.renderer.createText(parentRenderNode,'\n      ',null);
    this._el_1 = this.renderer.createElement(parentRenderNode,'div',null);
    this._text_2 = this.renderer.createText(this._el_1,'Home',null);
    this._text_3 = this.renderer.createText(parentRenderNode,'\n      ',null);
    this.init([],[
      this._text_0,
      this._el_1,
      this._text_2,
      this._text_3
    ]
    ,[],[]);
    return null;
  }
}
export function viewFactory_HomeView0(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<import3.HomeView> {
  if ((renderType_HomeView === null)) { (renderType_HomeView = viewUtils.createRenderComponentType('/Users/robwormald/Dev/demos/ngmodules-bundling-test/src/components/home-view.ts class HomeView - inline template',0,import9.ViewEncapsulation.None,styles_HomeView,{})); }
  return new _View_HomeView0(viewUtils,parentInjector,declarationEl);
}

with the collected metadata:

{
    "__symbolic": "module",
    "version": 1,
    "metadata": {
        "HomeView": {
            "__symbolic": "class",
            "decorators": [
                {
                    "__symbolic": "call",
                    "expression": {
                        "__symbolic": "reference",
                        "module": "@angular/core",
                        "name": "Component"
                    },
                    "arguments": [
                        {
                            "selector": "home-view",
                            "template": "\n\t  <div>Home</div>\n\t  ",
                            "host": {
                                "(mouseover)": "onMouseOver($event)"
                            }
                        }
                    ]
                }
            ],
            "members": {
                "__ctor__": [
                    {
                        "__symbolic": "constructor"
                    }
                ],
                "onMouseOver": [
                    {
                        "__symbolic": "method",
                        "decorators": [
                            {
                                "__symbolic": "call",
                                "expression": {
                                    "__symbolic": "reference",
                                    "module": "@angular/core",
                                    "name": "HostListener"
                                },
                                "arguments": [
                                    "mouseover",
                                    [
                                        "$event"
                                    ]
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }
}

However, compiling the same component using the ES5 syntax:

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

@Component({
    selector: 'home-view',
    template: `
      <div>Home</div>
      `,
      host: {
          '(mouseover)': 'onMouseOver($event)'
      }
})
export class HomeView {
    constructor(){
    }
    onMouseOver(ev){
        console.log('mouseover')
    }
}

does generate the appropriate bindings:

/**
 * This file is generated by the Angular 2 template compiler.
 * Do not edit.
 */
 /* tslint:disable */

import * as import0 from '@angular/core/src/render/api';
import * as import1 from '@angular/core/src/linker/view';
import * as import2 from '@angular/core/src/linker/element';
import * as import3 from './home-view';
import * as import4 from '@angular/core/src/linker/view_utils';
import * as import5 from '@angular/core/src/di/injector';
import * as import6 from '@angular/core/src/linker/view_type';
import * as import7 from '@angular/core/src/change_detection/change_detection';
import * as import8 from '@angular/core/src/linker/component_factory';
import * as import9 from '@angular/core/src/metadata/view';
var renderType_HomeView_Host:import0.RenderComponentType = null;
class _View_HomeView_Host0 extends import1.AppView<any> {
  _el_0:any;
  private _appEl_0:import2.AppElement;
  _HomeView_0_4:import3.HomeView;
  constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
    super(_View_HomeView_Host0,renderType_HomeView_Host,import6.ViewType.HOST,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
  }
  createInternal(rootSelector:string):import2.AppElement {
    this._el_0 = this.selectOrCreateHostElement('home-view',rootSelector,null);
    this._appEl_0 = new import2.AppElement(0,null,this,this._el_0);
    var compView_0:any = viewFactory_HomeView0(this.viewUtils,this.injector(0),this._appEl_0);
    this._HomeView_0_4 = new import3.HomeView();
    this._appEl_0.initComponent(this._HomeView_0_4,[],compView_0);
    compView_0.create(this._HomeView_0_4,this.projectableNodes,null);
    var disposable_0:Function = this.renderer.listen(this._el_0,'mouseover',this.eventHandler(this._handle_mouseover_0_0.bind(this))); //NOTE GENERATED LISTENER
    this.init([].concat([this._el_0]),[this._el_0],[disposable_0],[]);
    return this._appEl_0;
  }
  injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
    if (((token === import3.HomeView) && (0 === requestNodeIndex))) { return this._HomeView_0_4; }
    return notFoundResult;
  }
  private _handle_mouseover_0_0($event:any):boolean {
    this._appEl_0.componentView.markPathToRootAsCheckOnce();
    const pd_0:any = ((<any>this._HomeView_0_4.onMouseOver($event)) !== false);
    return (true && pd_0);
  }
}
function viewFactory_HomeView_Host0(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
  if ((renderType_HomeView_Host === null)) { (renderType_HomeView_Host = viewUtils.createRenderComponentType('',0,null,[],{})); }
  return new _View_HomeView_Host0(viewUtils,parentInjector,declarationEl);
}
export const HomeViewNgFactory:import8.ComponentFactory<import3.HomeView> = new import8.ComponentFactory<import3.HomeView>('home-view',viewFactory_HomeView_Host0,import3.HomeView);
const styles_HomeView:any[] = [];
var renderType_HomeView:import0.RenderComponentType = null;
class _View_HomeView0 extends import1.AppView<import3.HomeView> {
  _text_0:any;
  _el_1:any;
  _text_2:any;
  _text_3:any;
  constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
    super(_View_HomeView0,renderType_HomeView,import6.ViewType.COMPONENT,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
  }
  createInternal(rootSelector:string):import2.AppElement {
    const parentRenderNode:any = this.renderer.createViewRoot(this.declarationAppElement.nativeElement);
    this._text_0 = this.renderer.createText(parentRenderNode,'\n      ',null);
    this._el_1 = this.renderer.createElement(parentRenderNode,'div',null);
    this._text_2 = this.renderer.createText(this._el_1,'Home',null);
    this._text_3 = this.renderer.createText(parentRenderNode,'\n      ',null);
    this.init([],[
      this._text_0,
      this._el_1,
      this._text_2,
      this._text_3
    ]
    ,[],[]);
    return null;
  }
}
export function viewFactory_HomeView0(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<import3.HomeView> {
  if ((renderType_HomeView === null)) { (renderType_HomeView = viewUtils.createRenderComponentType('/Users/robwormald/Dev/demos/ngmodules-bundling-test/src/components/home-view.ts class HomeView - inline template',0,import9.ViewEncapsulation.None,styles_HomeView,{})); }
  return new _View_HomeView0(viewUtils,parentInjector,declarationEl);
}

currently breaks the Router etc. cc @tbosch

[tbosch]

I bet this never worked with offline compilation...
On Wed, Jul 27, 2016 at 2:35 AM Rob Wormald notifications@github.com
wrote:

Assigned #10308 #10308 to
@tbosch https://github.com/tbosch.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#10308 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAqKfxC9yrqHMqIEhS6_l1X_O_WbU4dZks5qZqfQgaJpZM4JVubS
.

[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.}