, LocalResolver
// - all ICU vars (such as `VAR_SELECT` or `VAR_PLURAL`) are replaced with correct values
const transformFn = (raw: o.ReadVarExpr) => {
const params = {...vars, ...placeholders};
- const formatted = this.i18nFormatPlaceholderNames(params, /* useCamelCase */ false);
+ const formatted = i18nFormatPlaceholderNames(params, /* useCamelCase */ false);
return instruction(null, R3.i18nPostprocess, [raw, mapLiteral(formatted, true)]);
};
@@ -2004,3 +1994,52 @@ interface ChainableBindingInstruction {
value: () => o.Expression;
params?: any[];
}
+
+/** Name of the global variable that is used to determine if we use Closure translations or not */
+const NG_I18N_CLOSURE_MODE = 'ngI18nClosureMode';
+
+/**
+ * Generate statements that define a given translation message.
+ *
+ * ```
+ * var I18N_1;
+ * if (ngI18nClosureMode) {
+ * var MSG_EXTERNAL_XXX = goog.getMsg(
+ * "Some message with {$interpolation}!",
+ * { "interpolation": "\uFFFD0\uFFFD" }
+ * );
+ * I18N_1 = MSG_EXTERNAL_XXX;
+ * }
+ * else {
+ * I18N_1 = $localize`Some message with ${'\uFFFD0\uFFFD'}!`;
+ * }
+ * ```
+ *
+ * @param message The original i18n AST message node
+ * @param variable The variable that will be assigned the translation, e.g. `I18N_1`.
+ * @param closureVar The variable for Closure `goog.getMsg` calls, e.g. `MSG_EXTERNAL_XXX`.
+ * @param params Object mapping placeholder names to their values (e.g.
+ * `{ "interpolation": "\uFFFD0\uFFFD" }`).
+ * @param transformFn Optional transformation function that will be applied to the translation (e.g.
+ * post-processing).
+ * @returns An array of statements that defined a given translation.
+ */
+export function getTranslationDeclStmts(
+ message: i18n.Message, variable: o.ReadVarExpr, closureVar: o.ReadVarExpr,
+ params: {[name: string]: o.Expression} = {},
+ transformFn?: (raw: o.ReadVarExpr) => o.Expression): o.Statement[] {
+ const formattedParams = i18nFormatPlaceholderNames(params, /* useCamelCase */ true);
+ const statements: o.Statement[] = [
+ declareI18nVariable(variable),
+ o.ifStmt(
+ o.variable(NG_I18N_CLOSURE_MODE),
+ createGoogleGetMsgStatements(variable, message, closureVar, formattedParams),
+ createLocalizeStatements(variable, message, formattedParams)),
+ ];
+
+ if (transformFn) {
+ statements.push(new o.ExpressionStatement(variable.set(transformFn(variable))));
+ }
+
+ return statements;
+}
\ No newline at end of file
diff --git a/packages/compiler/test/render3/view/i18n_spec.ts b/packages/compiler/test/render3/view/i18n_spec.ts
index 1ce50ed7d04609..2eb1a3dd196ab2 100644
--- a/packages/compiler/test/render3/view/i18n_spec.ts
+++ b/packages/compiler/test/render3/view/i18n_spec.ts
@@ -5,6 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
+import {I18nMeta, parseI18nMeta} from '@angular/compiler/src/render3/view/i18n/meta';
import {AST} from '../../../src/expression_parser/ast';
import {Lexer} from '../../../src/expression_parser/lexer';
@@ -13,8 +14,10 @@ import * as i18n from '../../../src/i18n/i18n_ast';
import * as o from '../../../src/output/output_ast';
import * as t from '../../../src/render3/r3_ast';
import {I18nContext} from '../../../src/render3/view/i18n/context';
-import {getSerializedI18nContent} from '../../../src/render3/view/i18n/serializer';
-import {I18nMeta, formatI18nPlaceholderName, parseI18nMeta} from '../../../src/render3/view/i18n/util';
+import {serializeI18nMessageForGetMsg} from '../../../src/render3/view/i18n/get_msg_utils';
+import {serializeIcuNode} from '../../../src/render3/view/i18n/icu_serializer';
+import {serializeI18nMessageForLocalize} from '../../../src/render3/view/i18n/localize_utils';
+import {formatI18nPlaceholderName} from '../../../src/render3/view/i18n/util';
import {parseR3 as parse} from './util';
@@ -214,45 +217,162 @@ describe('Utils', () => {
});
});
-describe('Serializer', () => {
+describe('serializeI18nMessageForGetMsg', () => {
const serialize = (input: string): string => {
const tree = parse(`${input}
`);
const root = tree.nodes[0] as t.Element;
- return getSerializedI18nContent(root.i18n as i18n.Message);
+ return serializeI18nMessageForGetMsg(root.i18n as i18n.Message);
};
- it('should produce output for i18n content', () => {
- const cases = [
- // plain text
- ['Some text', 'Some text'],
- // text with interpolation
- [
- 'Some text {{ valueA }} and {{ valueB + valueC }}',
- 'Some text {$interpolation} and {$interpolation_1}'
- ],
+ it('should serialize plain text for `GetMsg()`',
+ () => { expect(serialize('Some text')).toEqual('Some text'); });
- // content with HTML tags
- [
- 'A BC
D',
- 'A {$startTagSpan}B{$startTagDiv}C{$closeTagDiv}{$closeTagSpan} D'
- ],
+ it('should serialize text with interpolation for `GetMsg()`', () => {
+ expect(serialize('Some text {{ valueA }} and {{ valueB + valueC }}'))
+ .toEqual('Some text {$interpolation} and {$interpolation_1}');
+ });
- // simple ICU
- ['{age, plural, 10 {ten} other {other}}', '{VAR_PLURAL, plural, 10 {ten} other {other}}'],
+ it('should serialize content with HTML tags for `GetMsg()`', () => {
+ expect(serialize('A BC
D'))
+ .toEqual('A {$startTagSpan}B{$startTagDiv}C{$closeTagDiv}{$closeTagSpan} D');
+ });
- // nested ICUs
- [
- '{age, plural, 10 {ten {size, select, 1 {one} 2 {two} other {2+}}} other {other}}',
- '{VAR_PLURAL, plural, 10 {ten {VAR_SELECT, select, 1 {one} 2 {two} other {2+}}} other {other}}'
- ],
+ it('should serialize simple ICU for `GetMsg()`', () => {
+ expect(serialize('{age, plural, 10 {ten} other {other}}'))
+ .toEqual('{VAR_PLURAL, plural, 10 {ten} other {other}}');
+ });
+
+ it('should serialize nested ICUs for `GetMsg()`', () => {
+ expect(serialize(
+ '{age, plural, 10 {ten {size, select, 1 {one} 2 {two} other {2+}}} other {other}}'))
+ .toEqual(
+ '{VAR_PLURAL, plural, 10 {ten {VAR_SELECT, select, 1 {one} 2 {two} other {2+}}} other {other}}');
+ });
+
+ it('should serialize ICU with nested HTML for `GetMsg()`', () => {
+ expect(serialize('{age, plural, 10 {ten} other {other
}}'))
+ .toEqual(
+ '{VAR_PLURAL, plural, 10 {{START_BOLD_TEXT}ten{CLOSE_BOLD_TEXT}} other {{START_TAG_DIV}other{CLOSE_TAG_DIV}}}');
+ });
+
+ it('should serialize ICU with nested HTML containing further ICUs for `GetMsg()`', () => {
+ expect(
+ serialize(
+ '{gender, select, male {male} female {female} other {other}}{gender, select, male {male} female {female} other {other}}
'))
+ .toEqual('{$icu}{$startTagDiv}{$icu}{$closeTagDiv}');
+ });
+});
+
+describe('serializeI18nMessageForLocalize', () => {
+ const serialize = (input: string) => {
+ const tree = parse(`${input}
`);
+ const root = tree.nodes[0] as t.Element;
+ return serializeI18nMessageForLocalize(root.i18n as i18n.Message);
+ };
+
+ it('should serialize plain text for `$localize()`', () => {
+ expect(serialize('Some text')).toEqual({messageParts: ['Some text'], placeHolders: []});
+ });
+
+ it('should serialize text with interpolation for `$localize()`', () => {
+ expect(serialize('Some text {{ valueA }} and {{ valueB + valueC }} done')).toEqual({
+ messageParts: ['Some text ', ' and ', ' done'],
+ placeHolders: ['interpolation', 'interpolation_1']
+ });
+ });
+
+ it('should serialize text with interpolation at start for `$localize()`', () => {
+ expect(serialize('{{ valueA }} and {{ valueB + valueC }} done')).toEqual({
+ messageParts: ['', ' and ', ' done'],
+ placeHolders: ['interpolation', 'interpolation_1']
+ });
+ });
+
+
+ it('should serialize text with interpolation at end for `$localize()`', () => {
+ expect(serialize('Some text {{ valueA }} and {{ valueB + valueC }}')).toEqual({
+ messageParts: ['Some text ', ' and ', ''],
+ placeHolders: ['interpolation', 'interpolation_1']
+ });
+ });
- // ICU with nested HTML
- [
- '{age, plural, 10 {ten} other {other
}}',
+
+ it('should serialize only interpolation for `$localize()`', () => {
+ expect(serialize('{{ valueB + valueC }}'))
+ .toEqual({messageParts: ['', ''], placeHolders: ['interpolation']});
+ });
+
+
+ it('should serialize content with HTML tags for `$localize()`', () => {
+ expect(serialize('A BC
D')).toEqual({
+ messageParts: ['A ', 'B', 'C', '', ' D'],
+ placeHolders: ['startTagSpan', 'startTagDiv', 'closeTagDiv', 'closeTagSpan']
+ });
+ });
+
+
+ it('should serialize simple ICU for `$localize()`', () => {
+ expect(serialize('{age, plural, 10 {ten} other {other}}')).toEqual({
+ messageParts: ['{VAR_PLURAL, plural, 10 {ten} other {other}}'],
+ placeHolders: []
+ });
+ });
+
+
+ it('should serialize nested ICUs for `$localize()`', () => {
+ expect(serialize(
+ '{age, plural, 10 {ten {size, select, 1 {one} 2 {two} other {2+}}} other {other}}'))
+ .toEqual({
+ messageParts: [
+ '{VAR_PLURAL, plural, 10 {ten {VAR_SELECT, select, 1 {one} 2 {two} other {2+}}} other {other}}'
+ ],
+ placeHolders: []
+ });
+ });
+
+
+ it('should serialize ICU with nested HTML for `$localize()`', () => {
+ expect(serialize('{age, plural, 10 {ten} other {other
}}')).toEqual({
+ messageParts: [
'{VAR_PLURAL, plural, 10 {{START_BOLD_TEXT}ten{CLOSE_BOLD_TEXT}} other {{START_TAG_DIV}other{CLOSE_TAG_DIV}}}'
- ]
- ];
+ ],
+ placeHolders: []
+ });
+ });
+
+ it('should serialize ICU with nested HTML containing further ICUs for `$localize()`', () => {
+ expect(
+ serialize(
+ '{gender, select, male {male} female {female} other {other}}{gender, select, male {male} female {female} other {other}}
'))
+ .toEqual({
+ messageParts: ['', '', '', '', ''],
+ placeHolders: ['icu', 'startTagDiv', 'icu', 'closeTagDiv']
+ });
+ });
+});
+
+describe('serializeIcuNode', () => {
+ const serialize = (input: string) => {
+ const tree = parse(`${input}
`);
+ const rooti18n = (tree.nodes[0] as t.Element).i18n as i18n.Message;
+ return serializeIcuNode(rooti18n.nodes[0] as i18n.Icu);
+ };
+
+ it('should serialize a simple ICU', () => {
+ expect(serialize('{age, plural, 10 {ten} other {other}}'))
+ .toEqual('{VAR_PLURAL, plural, 10 {ten} other {other}}');
+ });
+
+ it('should serialize a next ICU', () => {
+ expect(serialize(
+ '{age, plural, 10 {ten {size, select, 1 {one} 2 {two} other {2+}}} other {other}}'))
+ .toEqual(
+ '{VAR_PLURAL, plural, 10 {ten {VAR_SELECT, select, 1 {one} 2 {two} other {2+}}} other {other}}');
+ });
- cases.forEach(([input, output]) => { expect(serialize(input)).toEqual(output); });
+ it('should serialize ICU with nested HTML', () => {
+ expect(serialize('{age, plural, 10 {ten} other {other
}}'))
+ .toEqual(
+ '{VAR_PLURAL, plural, 10 {{START_BOLD_TEXT}ten{CLOSE_BOLD_TEXT}} other {{START_TAG_DIV}other{CLOSE_TAG_DIV}}}');
});
});
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index c87a875d8329d4..598d681e4b7287 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -37,3 +37,14 @@ export * from './core_render3_private_export';
export {SecurityContext} from './sanitization/security';
export {Sanitizer} from './sanitization/sanitizer';
export * from './codegen_private_exports';
+
+import {global} from './util/global';
+if (ngDevMode) {
+ // This helper is to give a reasonable error message to people upgrading to v9 that have not yet
+ // installed `@angular/localize` in their app.
+ // tslint:disable-next-line: no-toplevel-property-access
+ global.$localize = global.$localize || function() {
+ throw new Error(
+ 'The global function `$localize` is missing. Please add `import \'@angular/localize\';` to your polyfills.ts file.');
+ };
+}
diff --git a/packages/core/src/render3/i18n.ts b/packages/core/src/render3/i18n.ts
index b97cf55650da1d..baea1b2d36bced 100644
--- a/packages/core/src/render3/i18n.ts
+++ b/packages/core/src/render3/i18n.ts
@@ -5,7 +5,6 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
-
import '../util/ng_i18n_closure_mode';
import {DEFAULT_LOCALE_ID, getPluralCase} from '../i18n/localization';
import {SRCSET_ATTRS, URI_ATTRS, VALID_ATTRS, VALID_ELEMENTS, getTemplateContent} from '../sanitization/html_sanitizer';
@@ -13,6 +12,7 @@ import {InertBodyHelper} from '../sanitization/inert_body';
import {_sanitizeUrl, sanitizeSrcset} from '../sanitization/url_sanitizer';
import {addAllToArray} from '../util/array_utils';
import {assertDataInRange, assertDefined, assertEqual, assertGreaterThan} from '../util/assert';
+import {global} from '../util/global';
import {attachPatchData} from './context_discovery';
import {bind, setDelayProjection} from './instructions/all';
import {attachI18nOpCodesDebug} from './instructions/lview_debug';
@@ -1317,40 +1317,86 @@ function replaceNgsp(value: string): string {
return value.replace(NGSP_UNICODE_REGEXP, ' ');
}
-let TRANSLATIONS: {[key: string]: string} = {};
export interface I18nLocalizeOptions { translations: {[key: string]: string}; }
/**
- * Set the configuration for `i18nLocalize`.
+ * Provide translations for `$localize`.
*
* @deprecated this method is temporary & should not be used as it will be removed soon
*/
export function i18nConfigureLocalize(options: I18nLocalizeOptions = {
translations: {}
}) {
- TRANSLATIONS = options.translations;
-}
+ type TranslationInfo = {messageParts: TemplateStringsArray, placeholderNames: string[]};
+ type MessageInfo = {translationKey: string, replacements: {[placeholderName: string]: any}};
+ const PLACEHOLDER_MARKER = ':';
+ const TRANSLATIONS: {[key: string]: TranslationInfo} = {};
-const LOCALIZE_PH_REGEXP = /\{\$(.*?)\}/g;
+ Object.keys(options.translations).forEach(key => {
+ TRANSLATIONS[key] = splitMessage(options.translations[key]);
+ });
-/**
- * A goog.getMsg-like function for users that do not use Closure.
- *
- * This method is required as a *temporary* measure to prevent i18n tests from being blocked while
- * running outside of Closure Compiler. This method will not be needed once runtime translation
- * service support is introduced.
- *
- * @codeGenApi
- * @deprecated this method is temporary & should not be used as it will be removed soon
- */
-export function ɵɵi18nLocalize(input: string, placeholders?: {[key: string]: string}) {
- if (typeof TRANSLATIONS[input] !== 'undefined') { // to account for empty string
- input = TRANSLATIONS[input];
+ if (ngDevMode) {
+ if (global.$localize === undefined) {
+ throw new Error(
+ 'The global function `$localize` is missing. Please add `import \'@angular/localize\';` to your polyfills.ts file.');
+ }
+ }
+ $localize.translate = function(messageParts: TemplateStringsArray, expressions: readonly any[]):
+ [TemplateStringsArray, readonly any[]] {
+ const message = parseMessage(messageParts, expressions);
+ const translation = TRANSLATIONS[message.translationKey];
+ const result: [TemplateStringsArray, readonly any[]] =
+ (translation === undefined ? [messageParts, expressions] : [
+ translation.messageParts,
+ translation.placeholderNames.map(placeholder => message.replacements[placeholder])
+ ]);
+ return result;
+ };
+
+ function splitMessage(message: string): TranslationInfo {
+ const parts = message.split(/{\$([^}]*)}/);
+ const messageParts = [parts[0]];
+ const placeholderNames: string[] = [];
+ for (let i = 1; i < parts.length - 1; i += 2) {
+ placeholderNames.push(parts[i]);
+ messageParts.push(parts[i + 1]);
+ }
+ const rawMessageParts =
+ messageParts.map(part => part.charAt(0) === PLACEHOLDER_MARKER ? '\\' + part : part);
+ return {messageParts: makeTemplateObject(messageParts, rawMessageParts), placeholderNames};
}
- if (placeholders !== undefined && Object.keys(placeholders).length) {
- return input.replace(LOCALIZE_PH_REGEXP, (_, key) => placeholders[key] || '');
+
+ function parseMessage(
+ messageParts: TemplateStringsArray, expressions: readonly any[]): MessageInfo {
+ const PLACEHOLDER_NAME_MARKER = ':';
+ const replacements: {[placeholderName: string]: any} = {};
+ let translationKey = messageParts[0];
+ for (let i = 1; i < messageParts.length; i++) {
+ const messagePart = messageParts[i];
+ const expression = expressions[i - 1];
+ // There is a problem with synthesized template literals in TS where the raw version
+ // cannot be found, since there is no original source code to read it from.
+ // In that case we just fall back on the non-raw version.
+ // This should be OK because synthesized nodes (from the template compiler) will always have
+ // placeholder names provided.
+ if ((messageParts.raw[i] || messagePart).charAt(0) === PLACEHOLDER_NAME_MARKER) {
+ const endOfPlaceholderName = messagePart.indexOf(PLACEHOLDER_NAME_MARKER, 1);
+ const placeholderName = messagePart.substring(1, endOfPlaceholderName);
+ translationKey += `{$${placeholderName}}${messagePart.substring(endOfPlaceholderName + 1)}`;
+ replacements[placeholderName] = expression;
+ } else {
+ translationKey += messagePart;
+ replacements[`ph_${i}`] = expression;
+ }
+ }
+ return {translationKey, replacements};
+ }
+
+ function makeTemplateObject(cooked: string[], raw: string[]): TemplateStringsArray {
+ Object.defineProperty(cooked, 'raw', {value: raw});
+ return cooked as any;
}
- return input;
}
/**
diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts
index 169a89700776c6..d1752af3bb913e 100644
--- a/packages/core/src/render3/index.ts
+++ b/packages/core/src/render3/index.ts
@@ -149,7 +149,6 @@ export {
ɵɵi18nApply,
ɵɵi18nPostprocess,
i18nConfigureLocalize,
- ɵɵi18nLocalize,
getLocaleId,
setLocaleId,
} from './i18n';
diff --git a/packages/core/test/BUILD.bazel b/packages/core/test/BUILD.bazel
index 6356ef5d4157ab..52f0a455c13459 100644
--- a/packages/core/test/BUILD.bazel
+++ b/packages/core/test/BUILD.bazel
@@ -27,6 +27,7 @@ ts_library(
"//packages/core/src/reflection",
"//packages/core/src/util",
"//packages/core/testing",
+ "//packages/localize",
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/platform-browser/animations",
diff --git a/packages/core/test/acceptance/i18n_spec.ts b/packages/core/test/acceptance/i18n_spec.ts
index e7044a2a943326..e0f5335bfca06a 100644
--- a/packages/core/test/acceptance/i18n_spec.ts
+++ b/packages/core/test/acceptance/i18n_spec.ts
@@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
-
+import '@angular/localize';
import {registerLocaleData} from '@angular/common';
import localeRo from '@angular/common/locales/ro';
import {Component, ContentChild, ContentChildren, Directive, HostBinding, Input, LOCALE_ID, QueryList, TemplateRef, Type, ViewChild, ViewContainerRef, ɵi18nConfigureLocalize, Pipe, PipeTransform} from '@angular/core';
@@ -1130,6 +1130,7 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
TestBed.configureTestingModule({declarations: [ClsDir, MyApp]});
ɵi18nConfigureLocalize({
translations: {
+ // Not that this translation switches the order of the expressions!
'start {$interpolation} middle {$interpolation_1} end':
'début {$interpolation_1} milieu {$interpolation} fin',
'{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}':
diff --git a/packages/core/test/bundling/todo_i18n/BUILD.bazel b/packages/core/test/bundling/todo_i18n/BUILD.bazel
index 11da031ee12839..a45ef64f2fbc47 100644
--- a/packages/core/test/bundling/todo_i18n/BUILD.bazel
+++ b/packages/core/test/bundling/todo_i18n/BUILD.bazel
@@ -17,6 +17,7 @@ ng_module(
"//packages/common",
"//packages/core",
"//packages/core/test/bundling/util:reflect_metadata",
+ "//packages/localize",
],
)
@@ -47,6 +48,7 @@ ts_library(
"//packages/compiler",
"//packages/core",
"//packages/core/testing",
+ "//packages/localize",
"//packages/private/testing",
],
)
diff --git a/packages/core/test/bundling/todo_i18n/index.ts b/packages/core/test/bundling/todo_i18n/index.ts
index 49337f93958cfc..627e14961d1172 100644
--- a/packages/core/test/bundling/todo_i18n/index.ts
+++ b/packages/core/test/bundling/todo_i18n/index.ts
@@ -5,8 +5,10 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
-
import '@angular/core/test/bundling/util/src/reflect_metadata';
+// Make the `$localize()` global function available to the compiled templates, and the direct calls
+// below. This would normally be done inside the application `polyfills.ts` file.
+import '@angular/localize';
/**
* TODO(ocombe): replace this with the real runtime i18n service configuration
* For now we define inline translations that are added with the function `ɵi18nConfigureLocalize`,
@@ -16,31 +18,26 @@ import '@angular/core/test/bundling/util/src/reflect_metadata';
*/
import './translations';
import {CommonModule} from '@angular/common';
-import {Component, Injectable, NgModule, ViewEncapsulation, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent, ɵɵi18nLocalize as localize} from '@angular/core';
+import {Component, Injectable, NgModule, ViewEncapsulation, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent} from '@angular/core';
class Todo {
editing: boolean;
- // TODO(issue/24571): remove '!'.
- private _title !: string;
get title() { return this._title; }
set title(value: string) { this._title = value.trim(); }
- constructor(title: string, public completed: boolean = false) {
- this.editing = false;
- this.title = title;
- }
+ constructor(private _title: string, public completed: boolean = false) { this.editing = false; }
}
@Injectable({providedIn: 'root'})
class TodoStore {
todos: Array = [
- new Todo(localize('Demonstrate Components')),
- new Todo(localize('Demonstrate Structural Directives'), true),
+ new Todo($localize `Demonstrate Components`),
+ new Todo($localize `Demonstrate Structural Directives`, true),
// Using a placeholder
- new Todo(localize('Demonstrate {$value}', {value: 'NgModules'})),
- new Todo(localize('Demonstrate zoneless change detection')),
- new Todo(localize('Demonstrate internationalization')),
+ new Todo($localize `Demonstrate ${'NgModules'}:value:`),
+ new Todo($localize `Demonstrate zoneless change detection`),
+ new Todo($localize `Demonstrate internationalization`),
];
private getWithCompleted(completed: boolean) {
diff --git a/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts b/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts
index 81d97c21ce3673..96adcdc6092856 100644
--- a/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts
+++ b/packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts
@@ -19,6 +19,12 @@ describe('functional test for todo i18n', () => {
BUNDLES.forEach(bundle => {
describe(bundle, () => {
it('should render todo i18n', withBody('', async() => {
+ // We need to delete the dummy `$localize` that was added because of the import of
+ // `@angular/core` at the top of this file.
+ // Also to clear out the translations from the previous test.
+ // This would not be needed in normal applications since the import of
+ // `@angular/localize` would be in polyfill.ts before any other import.
+ ($localize as any) = undefined;
require(path.join(PACKAGE, bundle));
const toDoAppComponent = getComponent(document.querySelector('todo-app') !);
expect(document.body.textContent).toContain('liste de tâches');
diff --git a/packages/core/test/linker/ng_container_integration_spec.ts b/packages/core/test/linker/ng_container_integration_spec.ts
index 5339a4e0f0fc4c..70fbdb91c37611 100644
--- a/packages/core/test/linker/ng_container_integration_spec.ts
+++ b/packages/core/test/linker/ng_container_integration_spec.ts
@@ -5,8 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
-
-
+import '@angular/localize';
import {AfterContentInit, AfterViewInit, Component, ContentChildren, Directive, Input, QueryList, ViewChildren, ɵivyEnabled as ivyEnabled} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {isCommentNode} from '@angular/platform-browser/testing/src/browser_util';
diff --git a/packages/core/testing/BUILD.bazel b/packages/core/testing/BUILD.bazel
index 8009d9f2768395..2b1dde511cc4d5 100644
--- a/packages/core/testing/BUILD.bazel
+++ b/packages/core/testing/BUILD.bazel
@@ -13,6 +13,7 @@ ng_module(
"//packages:types",
"//packages/compiler",
"//packages/core",
+ "//packages/localize",
"@npm//@types/jasmine",
"@npm//zone.js",
],
diff --git a/scripts/ci/run_angular_material_unit_tests.sh b/scripts/ci/run_angular_material_unit_tests.sh
index 6f43e22b0fdea1..c1ee7b81a61785 100755
--- a/scripts/ci/run_angular_material_unit_tests.sh
+++ b/scripts/ci/run_angular_material_unit_tests.sh
@@ -25,6 +25,9 @@ node ${angular_dir}/scripts/ci/update-deps-to-dist-packages.js ${MATERIAL_REPO_T
# repository automatically picks up the blocklist and disables the specified tests.
cp ${angular_dir}/tools/material-ci/test-blocklist.ts ${MATERIAL_REPO_TMP_DIR}/test/
+# Ensure that the `@angular/localize` package is there. (It wasn't before v9.)
+yarn --cwd ${MATERIAL_REPO_TMP_DIR} add ${angular_dir}/dist/packages-dist-ivy-aot/localize
+
# Create a symlink for the Bazel binary installed through NPM, as running through Yarn introduces OOM errors.
./scripts/circleci/setup_bazel_binary.sh
diff --git a/test-main.js b/test-main.js
index 6e8f44e40069c2..1fea998c6a4079 100644
--- a/test-main.js
+++ b/test-main.js
@@ -51,6 +51,8 @@ System.config({
'@angular/router': {main: 'index.js', defaultExtension: 'js'},
'@angular/http/testing': {main: 'index.js', defaultExtension: 'js'},
'@angular/http': {main: 'index.js', defaultExtension: 'js'},
+ '@angular/localize/run_time': {main: 'index.js', defaultExtension: 'js'},
+ '@angular/localize': {main: 'index.js', defaultExtension: 'js'},
'@angular/upgrade/static/testing': {main: 'index.js', defaultExtension: 'js'},
'@angular/upgrade/static': {main: 'index.js', defaultExtension: 'js'},
'@angular/upgrade': {main: 'index.js', defaultExtension: 'js'},