New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extended components do not receive constructor arguments when targetting ES6 #21731

Closed
andrewseguin opened this Issue Jan 23, 2018 · 0 comments

Comments

Projects
None yet
3 participants
@andrewseguin
Contributor

andrewseguin commented Jan 23, 2018

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Setup: ComponentA injects ElementRef in its constructor. ComponentB extends ComponentA.

When targetting ES5, ComponentB receives ElementRef as part of its dependency injection.
When targetting ES6, ComponentB does not receive ElementRef as part of its dependency injection.

Expected behavior

ComponentB should receive ElementRef regardless of the platform target.

Minimal reproduction of the problem with instructions

  1. Create new app with Angular CLI.
  2. Write the following components and add them to your module:
@Component({selector: 'compA', template: ''})
export class ComponentA {
  constructor(private elementRef: ElementRef) {
    console.log(elementRef);
  }
}

@Component({selector: 'compB', template: ''})
export class ComponentB extends ComponentA { }
  1. Add the following to your app template:
<compA></compA>
<compB></compB>
  1. Start your app server with ng serve and open the app. See that the console outputs ElementRef twice, once for each component.

  2. Shut down your server.

  3. Change the compilerOptions map in tsconfig.json so that it targets es6:

{
  ...
  "compilerOptions": {
   ...
    "target": "es6",
    ...
  }
}
  1. Start your app and now observe that the console no longer outputs two ElementRefs, instead only one is outputted and the other is undefined.

What is the motivation / use case for changing the behavior?

Issue was filed against @angular/material since this is a core part of how MatTable works, since it extends CdkTable.

angular/material2#9329

Environment


Angular version: 5.2.1

Browser:
- [x] Chrome (desktop) version 63
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.1.2
- Platform:  Linux

@ngbot ngbot bot added this to the Backlog milestone Feb 9, 2018

trotyl added a commit to trotyl/angular that referenced this issue Feb 19, 2018

trotyl added a commit to trotyl/angular that referenced this issue Feb 19, 2018

trotyl added a commit to trotyl/angular that referenced this issue Feb 20, 2018

vicb added a commit to vicb/angular that referenced this issue Feb 21, 2018

vicb added a commit to vicb/angular that referenced this issue Feb 21, 2018

vicb added a commit that referenced this issue Feb 22, 2018

@vicb vicb closed this in 5c89d6b Feb 22, 2018

vicb added a commit that referenced this issue Feb 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment