diff --git a/aio/content/examples/i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
index 36d01889824..ec46ed80959 100644
--- a/aio/content/examples/i18n/src/app/app.component.html
+++ b/aio/content/examples/i18n/src/app/app.component.html
@@ -11,14 +11,6 @@
-
-
-I don't output any element either
-
-
-
-
-
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index d12f9dfbec5..fe997fa1294 100644
--- a/aio/content/guide/i18n.md
+++ b/aio/content/guide/i18n.md
@@ -178,22 +178,14 @@ Here is a _meaning_ and a _description_ and the _id_ at the end:
### Translate text without creating an element
-Suppose there is a stretch of text that you'd like to translate.
-You could wrap it in a `` tag but for some reason (CSS comes to mind)
-you don't want to create a new DOM element merely to facilitate translation.
-
-Here are two techniques to try.
-
-(1) Wrap the text in an `` element. The `` is never rendered:
+If there is a stretch of text that you'd like to translate, you could wrap it in a `` tag.
+But if you don't want to create a new DOM element merely to facilitate translation,
+you can wrap the text in an `` element.
+The `` will be transformed into an html comment:
-(2) Wrap the text in a pair of HTML comments:
-
-
-
-
{@a translate-attributes}
## Add _i18n_ translation attributes
diff --git a/packages/compiler/src/i18n/extractor_merger.ts b/packages/compiler/src/i18n/extractor_merger.ts
index 1cae8b94644..4cda98b0b6f 100644
--- a/packages/compiler/src/i18n/extractor_merger.ts
+++ b/packages/compiler/src/i18n/extractor_merger.ts
@@ -9,7 +9,6 @@
import * as html from '../ml_parser/ast';
import {InterpolationConfig} from '../ml_parser/interpolation_config';
import {ParseTreeResult} from '../ml_parser/parser';
-
import * as i18n from './i18n_ast';
import {createI18nMessageFactory} from './i18n_parser';
import {I18nError} from './parse_util';
@@ -20,6 +19,7 @@ const _I18N_ATTR_PREFIX = 'i18n-';
const _I18N_COMMENT_PREFIX_REGEXP = /^i18n:?/;
const MEANING_SEPARATOR = '|';
const ID_SEPARATOR = '@@';
+let i18nCommentsWarned = false;
/**
* Extract translatable messages from an html AST
@@ -176,6 +176,14 @@ class _Visitor implements html.Visitor {
if (!this._inI18nNode && !this._inIcu) {
if (!this._inI18nBlock) {
if (isOpening) {
+ // deprecated from v5 you should use instead of i18n comments
+ if (!i18nCommentsWarned && console && console.warn) {
+ i18nCommentsWarned = true;
+ const details = comment.sourceSpan.details ? `, ${comment.sourceSpan.details}` : '';
+ // TODO(ocombe): use a log service once there is a public one available
+ console.warn(
+ ` I18n comments are deprecated, use an element instead (${comment.sourceSpan.start}${details})`);
+ }
this._inI18nBlock = true;
this._blockStartDepth = this._depth;
this._blockChildren = [];
diff --git a/packages/compiler/test/i18n/extractor_merger_spec.ts b/packages/compiler/test/i18n/extractor_merger_spec.ts
index 1cca886b3e3..ff1809672a0 100644
--- a/packages/compiler/test/i18n/extractor_merger_spec.ts
+++ b/packages/compiler/test/i18n/extractor_merger_spec.ts
@@ -405,6 +405,11 @@ export function main() {
});
describe('blocks', () => {
+ it('should console.warn if we use i18n comments', () => {
+ // TODO(ocombe): expect a warning message when we have a proper log service
+ extract('
');
+ });
+
it('should merge blocks', () => {
const HTML = `beforefoo
barafter`;
expect(fakeTranslate(HTML))