This component requires inline template type-checking, which is not supported by the current environment.(-998900)

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler-cli

Is this a regression?

Yes, the previous version in which this bug was not present was: yes, this error is only shown when I enable preview ivy language service.

Description

Angular LS gives me an error, but it doesn’t say me what happens or how I can fix it. I have located that error message being produced from here https://github.com/angular/angular/blob/master/packages/compiler-cli/src/ngtsc/typecheck/src/oob.ts#L155-L159

By what I can test it, Angular doesn’t like that my component has a generic which extends.

🔬 Minimal Reproduction

@Component({
  selector: 'test-app',
  template: ``,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Testcomponent<Model extends Object> {}

This doesn’t produce that message error:

@Component({
  selector: 'test-app',
  template: ``,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Testcomponent<Model> {}

If component has a templateUrl, the error is shown there too… but without no sense the location

🔥 Exception or Error

this is the Angular Language Service error:

This component requires inline template type-checking, which is not supported by the current environment.(-998900)

🌍 Your Environment

Angular Version:

Angular CLI: 11.1.3
Node: 14.15.4
OS: linux x64

Angular: 11.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1101.3
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.1.3
@schematics/angular             11.0.7
@schematics/update              0.1101.3
rxjs                            6.6.3
typescript                      4.1.3
    

Anything else relevant?

[ld210]

Same issue here. I was forced to turn off the Angular:Experimental-ivy option in the Angular Language Service extension.

How/where do you turn off the Angular:Experimental-ivy ? Could you please provide a code snippet?

Sorry, VSCode, yes. You can also search for the Angular Service extension in the extension panel and then click on the extension setting icon.

[vposd]

@ray-kay in VSCode, go to File -> Preferences -> Settings and type Angular:Experimental-ivy on the search box