Angular-cli: Self referencing component doesn't work in Angular 8

[deftomat]

We just upgrade from v7 to v8.2.3 and now we have the following error:

Can't resolve all parameters for SectionComponent: (?).

Component's code:

@Component({
  selector: 'section',
  template: '<ng-content></ng-content>'
})
export class SectionComponent {
  constructor(
    @SkipSelf()
    @Optional()
    private parent: SectionComponent | null
  ) {}

  get level(): number {
    return this.parent ? this.parent.level + 1 : 1;
  }
}

It worked flawlessly in v7. We are using this component across the whole app as a multiple components depends on level to know how they should render itself.

[pkozlowski-opensource]

We had similar reports in the past (ex.: angular/angular#24533) but never got a proper reproduction scenario. Could you please provide a minimal stackblitz that illustrates the error you are encountering? We need a reduced scenario to understand and fix the issue. Thnx!

[deftomat]

@pkozlowski-opensource
Here it is: https://codesandbox.io/s/angular-mtsyw.
Just a plain Angular with two components.

[alan-agius4]

@deftomat, I just checked the reproduction you provided and it's seems you are using Angular CLI version 1. Which is no longer supported.

I tried to replicate this on the latest version Angular and CLI and I am unable to reproduce
https://stackblitz.com/edit/angular-xs2v4f

[deftomat]

@alan-agius4 I'm not sure what do you mean by angular-cli-v1. In our project, we have angular.json and not a .angular-cli.json as in provided codesandbox and it behaves identically.

[alan-agius4]

@deftomat in the reproduction you shared there is .angular-cli.json and not angular.json and a dependency on "@angular/cli": "1.6.6"

[deftomat]

Alright, looks like these deps are causing the issue:

"@angular-devkit/build-angular": "^0.803.0",
"@angular/cli": "^8.3.0",
"@angular/compiler-cli": "^8.2.3",
"@angular/language-service": "^8.2.3",

v7 works OK

[deftomat]

A proper repo for reproduction: https://github.com/deftomat/angular-self-referencing-components-issue

[alan-agius4]

Hi @deftomat, thanks for the reproduction.

The reason being is that downlevelConstructorParameters from @ngtools/webpack doesn't handling constructor parameter with union types. Tsickle from which the transformer is based on also suffers from the same problem as it will it will emit:

SectionComponent.ctorParameters = () => [
    { type: undefined, decorators: [{ type: SkipSelf }, { type: Optional }] }
];

Which will break dependency injection.

For this to work you will need to change:

private parent: SectionComponent | null

to

private parent?: SectionComponent

[alan-agius4]

Following a convo with @clydin, unfortunately Typescript doesn’t expose the necessary functionality to make union types work.

[deftomat]

@alan-agius4 THANKS! It works.

[angular-automatic-lock-bot[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._}