diff --git a/packages/language-service/src/locate_symbol.ts b/packages/language-service/src/locate_symbol.ts
index 65591ea880e98..736919bd61447 100644
--- a/packages/language-service/src/locate_symbol.ts
+++ b/packages/language-service/src/locate_symbol.ts
@@ -116,8 +116,8 @@ function locateSymbol(ast: TemplateAst, path: TemplateAstPath, info: AstResult):
         },
         visitElementProperty(ast) { attributeValueSymbol(); },
         visitAttr(ast) {
-          const element = path.head;
-          if (!element || !(element instanceof ElementAst)) return;
+          const element = path.first(ElementAst);
+          if (!element) return;
           // Create a mapping of all directives applied to the element from their selectors.
           const matcher = new SelectorMatcher<DirectiveAst>();
           for (const dir of element.directives) {
diff --git a/packages/language-service/test/hover_spec.ts b/packages/language-service/test/hover_spec.ts
index 578f7fcc7efe5..b7d38ccb31f97 100644
--- a/packages/language-service/test/hover_spec.ts
+++ b/packages/language-service/test/hover_spec.ts
@@ -99,7 +99,8 @@ describe('hover', () => {
   });
 
   it('should be able to find a reference to a directive', () => {
-    const content = mockHost.override(TEST_TEMPLATE, `<div string-model~{cursor}></div>`);
+    const content =
+        mockHost.override(TEST_TEMPLATE, `<div><div string-model~{cursor}></div></div>`);
     const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'cursor');
     const quickInfo = ngLS.getQuickInfoAtPosition(TEST_TEMPLATE, marker.start);
     expect(quickInfo).toBeDefined();