fix(ivy): more descriptive errors for nested i18n sections (#33583)

This commit moves nested i18n section detection to an earlier stage where we convert HTML AST to Ivy AST. This also gives a chance to produce better diagnistic message for nested i18n sections, that also includes a file name and location.

PR Close #33583

packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts

@@ -3415,14 +3415,57 @@ describe('i18n support in the template compiler', () => {
   });
 
   describe('errors', () => {
+    const verifyNestedSectionsError = (errorThrown: any, expectedErrorText: string) => {
+      expect(errorThrown.ngParseErrors.length).toBe(1);
+      const msg = errorThrown.ngParseErrors[0].toString();
+      expect(msg).toContain(
+          'Cannot mark an element as translatable inside of a translatable section. Please remove the nested i18n marker.');
+      expect(msg).toContain(expectedErrorText);
+      expect(msg).toMatch(/app\/spec\.ts\@\d+\:\d+/);
+    };
+
     it('should throw on nested i18n sections', () => {
       const files = getAppFilesWithTemplate(`
-        <div i18n><div i18n>Some content</div></div>
+        <div i18n>
+          <div i18n>Some content</div>
+        </div>
       `);
-      expect(() => compile(files, angularFiles))
-          .toThrowError(
-              'Could not mark an element as translatable inside of a translatable section');
+      try {
+        compile(files, angularFiles);
+      } catch (error) {
+        verifyNestedSectionsError(error, '[ERROR ->]<div i18n>Some content</div>');
+      }
     });
 
+    it('should throw on nested i18n sections with tags in between', () => {
+      const files = getAppFilesWithTemplate(`
+        <div i18n>
+          <div>
+            <div i18n>Some content</div>
+          </div>
+        </div>
+      `);
+      try {
+        compile(files, angularFiles);
+      } catch (error) {
+        verifyNestedSectionsError(error, '[ERROR ->]<div i18n>Some content</div>');
+      }
+    });
+
+    it('should throw on nested i18n sections represented with <ng-container>s', () => {
+      const files = getAppFilesWithTemplate(`
+        <ng-container i18n>
+          <div>
+            <ng-container i18n>Some content</ng-container>
+          </div>
+        </ng-container>
+      `);
+      try {
+        compile(files, angularFiles);
+      } catch (error) {
+        verifyNestedSectionsError(
+            error, '[ERROR ->]<ng-container i18n>Some content</ng-container>');
+      }
+    });
   });
 });