Sitelet https://github.com/angular/angular/issues/39509
Skip to content

Angular component which references its own type and decorated by class decorator is broken when target es5 + enableIvy=true #39509

Description

@ratoaq2

🐞 bug report

Affected Package

The issue is related to angular ivy compiler

Is this a regression?

Yes, the exact use case works without issues in Angular 8.0.x (without ivy).

Description

Given a normal angular component which references its own type in component metadata, and it's also decorated with an additional class decorator:

import { Component, InjectionToken, Input } from "@angular/core";

const BOUND_COMPONENT = new InjectionToken<any>("BoundComponent");

export function Bind() {
  return function(target: any) {
    console.log("Bound", target);
  };
}

@Bind()
@Component({
  selector: "hello",
  template: `
    <h1>Hello {{ name }}!</h1>
  `,
  providers: [{ provide: BOUND_COMPONENT, useExisting: HelloComponent }],
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;
}

will give an runtime error as you can see in stackblitz

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-ucqpbt

🔥 Exception or Error


Error in /~/src/app/hello.component.ts
HelloComponent_1 is not defined

🌍 Your Environment

Angular Version:


ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.8
Node: 12.18.4
OS: win32 x64

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

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.1000.8
@angular-devkit/build-angular       0.1000.8
@angular-devkit/build-ng-packagr    0.1000.8
@angular-devkit/build-optimizer     0.1000.8
@angular-devkit/build-webpack       0.1000.8
@angular-devkit/core                10.0.8
@angular-devkit/schematics          10.0.8
@angular/cdk                        10.1.0
@angular/cli                        10.0.8
@angular/flex-layout                10.0.0-beta.32
@angular/http                       8.0.0-beta.10
@angular/language-service           10.2.0
@angular/localize                   10.2.0
@angular/material                   10.1.0
@angular/material-moment-adapter    10.1.0
@angular/platform-browser           10.2.0
@angular/platform-browser-dynamic   10.2.0
@angular/upgrade                    10.0.14
@ngtools/webpack                    10.0.8
@schematics/angular                 10.0.8
@schematics/update                  0.1000.8
ng-packagr                          10.1.2
rxjs                                6.6.0
typescript                          3.9.7
webpack                             4.43.0

Anything else relevant?
Nope

Activity

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

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: compilerIssues related to `ngc`, Angular's template compilerstate: confirmedstate: has PR

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions