From 5f9fb911f7ab4f2d5fe7193c65030f51aceb44ef Mon Sep 17 00:00:00 2001
From: Dzmitry Shylovich <DzmitryShylovich@users.noreply.github.com>
Date: Sat, 11 Mar 2017 00:05:17 +0300
Subject: [PATCH] fix(compiler): improve error msg for unexpected closing tags
 (#14747)

Closes #6652
---
 packages/compiler/src/ml_parser/parser.ts     |  5 ++--
 .../test/ml_parser/html_parser_spec.ts        | 30 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/compiler/src/ml_parser/parser.ts b/packages/compiler/src/ml_parser/parser.ts
index e59574d221..329a274c53 100644
--- a/packages/compiler/src/ml_parser/parser.ts
+++ b/packages/compiler/src/ml_parser/parser.ts
@@ -305,8 +305,9 @@ class _TreeBuilder {
           fullName, endTagToken.sourceSpan,
           `Void elements do not have end tags "${endTagToken.parts[1]}"`));
     } else if (!this._popElement(fullName)) {
-      this._errors.push(TreeError.create(
-          fullName, endTagToken.sourceSpan, `Unexpected closing tag "${endTagToken.parts[1]}"`));
+      const errMsg =
+          `Unexpected closing tag "${fullName}". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags`;
+      this._errors.push(TreeError.create(fullName, endTagToken.sourceSpan, errMsg));
     }
   }
 
diff --git a/packages/compiler/test/ml_parser/html_parser_spec.ts b/packages/compiler/test/ml_parser/html_parser_spec.ts
index 6de0084499..0c38931dba 100644
--- a/packages/compiler/test/ml_parser/html_parser_spec.ts
+++ b/packages/compiler/test/ml_parser/html_parser_spec.ts
@@ -206,8 +206,16 @@ export function main() {
           const errors = parser.parse('<DiV><P></p></dIv>', 'TestComp').errors;
           expect(errors.length).toEqual(2);
           expect(humanizeErrors(errors)).toEqual([
-            ['p', 'Unexpected closing tag "p"', '0:8'],
-            ['dIv', 'Unexpected closing tag "dIv"', '0:12'],
+            [
+              'p',
+              'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+              '0:8'
+            ],
+            [
+              'dIv',
+              'Unexpected closing tag "dIv". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+              '0:12'
+            ],
           ]);
         });
 
@@ -485,13 +493,21 @@ export function main() {
         it('should report unexpected closing tags', () => {
           const errors = parser.parse('<div></p></div>', 'TestComp').errors;
           expect(errors.length).toEqual(1);
-          expect(humanizeErrors(errors)).toEqual([['p', 'Unexpected closing tag "p"', '0:5']]);
+          expect(humanizeErrors(errors)).toEqual([[
+            'p',
+            'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+            '0:5'
+          ]]);
         });
 
         it('should report subsequent open tags without proper close tag', () => {
           const errors = parser.parse('<div</div>', 'TestComp').errors;
           expect(errors.length).toEqual(1);
-          expect(humanizeErrors(errors)).toEqual([['div', 'Unexpected closing tag "div"', '0:4']]);
+          expect(humanizeErrors(errors)).toEqual([[
+            'div',
+            'Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+            '0:4'
+          ]]);
         });
 
         it('should report closing tag for void elements', () => {
@@ -523,7 +539,11 @@ export function main() {
           expect(errors.length).toEqual(2);
           expect(humanizeErrors(errors)).toEqual([
             [TokenType.COMMENT_START, 'Unexpected character "e"', '0:3'],
-            ['p', 'Unexpected closing tag "p"', '0:14']
+            [
+              'p',
+              'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+              '0:14'
+            ]
           ]);
         });
       });