fix(compiler): short-circut expressions with an index (#13263)

Fixes #13254

modules/@angular/compiler/src/compiler_util/expression_converter.ts

@@ -284,8 +284,13 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
   }
 
   visitKeyedRead(ast: cdAst.KeyedRead, mode: _Mode): any {
-    return convertToStatementIfNeeded(
-        mode, this.visit(ast.obj, _Mode.Expression).key(this.visit(ast.key, _Mode.Expression)));
+    const leftMostSafe = this.leftMostSafeNode(ast);
+    if (leftMostSafe) {
+      return this.convertSafeAccess(ast, leftMostSafe, mode);
+    } else {
+      return convertToStatementIfNeeded(
+          mode, this.visit(ast.obj, _Mode.Expression).key(this.visit(ast.key, _Mode.Expression)));
+    }
   }
 
   visitKeyedWrite(ast: cdAst.KeyedWrite, mode: _Mode): any {

modules/@angular/core/test/linker/change_detection_integration_spec.ts

@@ -305,6 +305,12 @@ export function main() {
              expect(renderLog.log).toEqual(['someProp=null']);
            }));
 
+        it('should support short-circuting array index operations', fakeAsync(() => {
+             const ctx = _bindSimpleValue('value?.phones[0]', PersonHolder);
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
         it('should still throw if right-side would throw', fakeAsync(() => {
              expect(() => {
                const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
@@ -1515,6 +1521,7 @@ class Person {
   age: number;
   name: string;
   address: Address = null;
+  phones: number[];
 
   init(name: string, address: Address = null) {
     this.name = name;