fix(ivy): avoid creating self-closing i18n instructions in case we have styling instructions (#27330)

The problem was caused by the self-closing i18n instruction that was generated in case we have styling instructions defined for a component. As a result, that caused problems at runtime. This update adds extra check to avoid creating self-closing i18n instructions (create i18nStart and i18nEnd instructions instead) when styling instructions are present.

PR Close #27330

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

@@ -1146,6 +1146,39 @@ describe('i18n support in the view compiler', () => {
 
       verify(input, output);
     });
+
+    it('should not be generated in case we have styling instructions', () => {
+      const input = `
+        <span i18n class="myClass">Text #1</span>
+        <span i18n style="padding: 10px;">Text #2</span>
+      `;
+
+      const output = String.raw `
+        const $_c0$ = ["myClass", 1, "myClass", true];
+        const $MSG_EXTERNAL_5295701706185791735$ = goog.getMsg("Text #1");
+        const $_c1$ = ["padding", 1, "padding", "10px"];
+        const $MSG_EXTERNAL_4722270221386399294$ = goog.getMsg("Text #2");
+        …
+        consts: 4,
+        vars: 0,
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵelementStart(0, "span");
+            $r3$.ɵi18nStart(1, $MSG_EXTERNAL_5295701706185791735$);
+            $r3$.ɵelementStyling($_c0$);
+            $r3$.ɵi18nEnd();
+            $r3$.ɵelementEnd();
+            $r3$.ɵelementStart(2, "span");
+            $r3$.ɵi18nStart(3, $MSG_EXTERNAL_4722270221386399294$);
+            $r3$.ɵelementStyling(null, $_c1$);
+            $r3$.ɵi18nEnd();
+            $r3$.ɵelementEnd();
+          }
+        }
+      `;
+
+      verify(input, output);
+    });
   });
 
   describe('ng-container and ng-template', () => {

packages/compiler/src/render3/view/template.ts

@@ -535,8 +535,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
     const createSelfClosingInstruction = !stylingBuilder.hasBindingsOrInitialValues &&
         !isNgContainer && element.outputs.length === 0 && i18nAttrs.length === 0 && !hasChildren();
 
-    const createSelfClosingI18nInstruction =
+    const createSelfClosingI18nInstruction = !createSelfClosingInstruction &&
-        !createSelfClosingInstruction && hasTextChildrenOnly(element.children);
+        !stylingBuilder.hasBindingsOrInitialValues && hasTextChildrenOnly(element.children);
 
     if (createSelfClosingInstruction) {
       this.creationInstruction(element.sourceSpan, R3.element, trimTrailingNulls(parameters));