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
This commit is contained in:
Andrew Kushnir 2018-11-28 11:34:24 -08:00 committed by Igor Minar
parent a088b8c203
commit 973ebdc0ea
2 changed files with 35 additions and 2 deletions

View File

@ -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', () => {

View File

@ -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 =
!createSelfClosingInstruction && hasTextChildrenOnly(element.children);
const createSelfClosingI18nInstruction = !createSelfClosingInstruction &&
!stylingBuilder.hasBindingsOrInitialValues && hasTextChildrenOnly(element.children);
if (createSelfClosingInstruction) {
this.creationInstruction(element.sourceSpan, R3.element, trimTrailingNulls(parameters));