fix(compiler): avoid duplicate i18n blocks for i18n attrs on elements with structural directives (#40077)

Currently when `ɵɵtemplate` and `ɵɵelement` instructions are generated by compiler, all static attributes are
duplicated for both instructions. As a part of this duplication, i18n translation blocks for static i18n attributes
are generated twice as well, causing duplicate entries in extracted translation files (when Ivy extraction mechanisms
are used). This commit fixes this issue by introducing a cache for i18n translation blocks (for static attributes
only).

Also this commit further aligns `ɵɵtemplate` and `ɵɵelement` instruction attributes, which should help implement
more effective attributes deduplication logic.

Closes #39942.

PR Close #40077
This commit is contained in:
Andrew Kushnir
2020-12-10 22:12:29 -08:00
committed by Alex Rickabaugh
parent 245dccc478
commit caa4666335
6 changed files with 151 additions and 4 deletions
@@ -394,6 +394,53 @@ export declare class MyModule {
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: static_attributes_structural.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
constructor() {
this.exp = true;
}
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
<div *ngIf="exp" id="static" i18n-title="m|d" title="introduction"></div>
`, isInline: true } });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{
selector: 'my-component',
template: `
<div *ngIf="exp" id="static" i18n-title="m|d" title="introduction"></div>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: static_attributes_structural.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyComponent {
exp: boolean;
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: interpolation_basic.js
****************************************************************************************************/
@@ -113,6 +113,20 @@
}
]
},
{
"description": "should translate static attributes when used on an element with structural directive",
"inputFiles": [
"static_attributes_structural.ts"
],
"expectations": [
{
"extraChecks": [
"verifyPlaceholdersIntegrity",
"verifyUniqueConsts"
]
}
]
},
{
"description": "should support interpolation",
"inputFiles": [
@@ -0,0 +1,21 @@
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", 1);
}
}
consts: function() {
__i18nMsg__('introduction', [], {meaning: 'm', desc: 'd'})
return [
["id", "static", "title", $i18n_0$, __AttributeMarker.Template__, "ngIf"],
["id", "static", "title", $i18n_0$]
];
},
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("ngIf", ctx.exp);
}
}
@@ -0,0 +1,15 @@
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div *ngIf="exp" id="static" i18n-title="m|d" title="introduction"></div>
`
})
export class MyComponent {
exp = true;
}
@NgModule({declarations: [MyComponent]})
export class MyModule {
}