Skip to content

non-null assertion operator (!) causes runtime exception #48742

@kaisnb

Description

@kaisnb

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

The following template expression ((test$ | async)?.prop1).prop2 with test$ being defined as test$: Observable<any> = of(null) does not throw any runtime exception. However when a non-null assertion operator is added like this ((test$ | async)?.prop1)!.prop2, suddenly a runtime exception is thrown as expected: ERROR Error: Cannot read properties of null (reading 'prop2').

This is unexpected for me since I would already expect a runtime exception without the non-null assertion operator ! and because I believed until today that the non-null assertion operator is fully erased during compile time and does not emit to the transpiled JavaScript code.

A second unintuitive behavior that I discovered while reproducing the error in Stackblitz, was a compile-time error of the expression (test$ | async)?.prop1 with test$ being defined as test$ = of(null). I would not expect the compilation to fail since TypeScript strict mode is not enabled and hence the Angular Template compiler should only show an error in the template but not fail during compilation. Second, the emitted error is Object is possibly 'null'. which is wrong since a ? safe navigation operator is used. If it's correct that the compilation fails with an error, then the expected error would be Property 'prop1' does not exist on type 'never'.. All of the described issues in this paragraph do not appear when we just remove the Observable & AsyncPipe and defined test$ as test$ = null and the expression as test$.prop1. In this case, everything works as expected.

I am not sure if the issues are related, but I expect so. I am sorry if this only appears as a bug to me due to missing knowledge. Please also point out of there is a duplicate issue that I can read and close this instead.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-nubcji?file=tsconfig.json,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.10
Node: 16.19.0
Package Manager: npm 8.19.3 
OS: darwin arm64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1500.4
@angular-devkit/build-angular      14.2.10
@angular-devkit/core               15.0.4
@angular-devkit/schematics         14.2.10
@angular/cdk                       14.2.7
@angular/cli                       14.2.10
@angular/flex-layout               14.0.0-beta.41
@angular/google-maps               14.2.7
@angular/material                  14.2.7
@angular/material-moment-adapter   14.2.7
@schematics/angular                14.2.10
rxjs                               7.5.7
typescript                         4.8.4
webpack                            5.75.0

Anything else?

The related Stackblitz shows parts of the issues and must be forked and modified using the code in the description to see all issues.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions