@angular/core 10.0.6 → 10.0.10

package/bundles/core.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v10.0.6
+ * @license Angular v10.0.10
  * (c) 2010-2020 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1403,7 +1403,7 @@
             (typeof node === 'object' && node != null &&
                 node.constructor.name === 'WebWorkerRenderNode'), true, "The provided value must be an instance of a DOM Node but got " + stringify(node));
     }
-    function assertDataInRange(arr, index) {
+    function assertIndexInRange(arr, index) {
         var maxLen = arr ? arr.length : 0;
         assertLessThan(index, maxLen, "Index expected to be less than " + maxLen + " but got " + index);
     }
@@ -2618,7 +2618,7 @@
      */
     function getNativeByTNode(tNode, lView) {
         ngDevMode && assertTNodeForLView(tNode, lView);
-        ngDevMode && assertDataInRange(lView, tNode.index);
+        ngDevMode && assertIndexInRange(lView, tNode.index);
         var node = unwrapRNode(lView[tNode.index]);
         ngDevMode && !isProceduralRenderer(lView[RENDERER]) && assertDomNode(node);
         return node;
@@ -2648,12 +2648,12 @@
     }
     /** Retrieves a value from any `LView` or `TData`. */
     function load(view, index) {
-        ngDevMode && assertDataInRange(view, index + HEADER_OFFSET);
+        ngDevMode && assertIndexInRange(view, index + HEADER_OFFSET);
         return view[index + HEADER_OFFSET];
     }
     function getComponentLViewByIndex(nodeIndex, hostView) {
         // Could be an LView or an LContainer. If LContainer, unwrap to find LView.
-        ngDevMode && assertDataInRange(hostView, nodeIndex);
+        ngDevMode && assertIndexInRange(hostView, nodeIndex);
         var slotValue = hostView[nodeIndex];
         var lView = isLView(slotValue) ? slotValue : slotValue[HOST];
         return lView;
@@ -5852,6 +5852,18 @@
         return { propName: undefined, oldValue: oldValue, newValue: newValue };
     }
 
+    /**
+     * Converts `TNodeType` into human readable text.
+     * Make sure this matches with `TNodeType`
+     */
+    var TNodeTypeAsString = [
+        'Container',
+        'Projection',
+        'View',
+        'Element',
+        'ElementContainer',
+        'IcuContainer' // 5
+    ];
     // Note: This hack is necessary so we don't erroneously get a circular dependency
     // failure based on types.
     var unusedValueExportToPlacateAjd$4 = 1;
@@ -6486,7 +6498,7 @@
     }
     function selectIndexInternal(tView, lView, index, checkNoChangesMode) {
         ngDevMode && assertGreaterThan(index, -1, 'Invalid index');
-        ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
+        ngDevMode && assertIndexInRange(lView, index + HEADER_OFFSET);
         // Flush the initial hooks for elements in the view that have been added up to this point.
         // PERF WARNING: do NOT extract this to a separate function without running benchmarks
         if (!checkNoChangesMode) {
@@ -6511,33 +6523,6 @@
         setSelectedIndex(index);
     }
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * 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
-     */
-    /**
-     * Marks that the next string is for element.
-     *
-     * See `I18nMutateOpCodes` documentation.
-     */
-    var ELEMENT_MARKER = {
-        marker: 'element'
-    };
-    /**
-     * Marks that the next string is for comment.
-     *
-     * See `I18nMutateOpCodes` documentation.
-     */
-    var COMMENT_MARKER = {
-        marker: 'comment'
-    };
-    // Note: This hack is necessary so we don't erroneously get a circular dependency
-    // failure based on types.
-    var unusedValueExportToPlacateAjd$6 = 1;
-
     /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -6601,8 +6586,37 @@
      * 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
      */
+    /**
+     * Patch a `debug` property on top of the existing object.
+     *
+     * NOTE: always call this method with `ngDevMode && attachDebugObject(...)`
+     *
+     * @param obj Object to patch
+     * @param debug Value to patch
+     */
     function attachDebugObject(obj, debug) {
-        Object.defineProperty(obj, 'debug', { value: debug, enumerable: false });
+        if (ngDevMode) {
+            Object.defineProperty(obj, 'debug', { value: debug, enumerable: false });
+        }
+        else {
+            throw new Error('This method should be guarded with `ngDevMode` so that it can be tree shaken in production!');
+        }
+    }
+    /**
+     * Patch a `debug` property getter on top of the existing object.
+     *
+     * NOTE: always call this method with `ngDevMode && attachDebugObject(...)`
+     *
+     * @param obj Object to patch
+     * @param debugGetter Getter returning a value to patch
+     */
+    function attachDebugGetter(obj, debugGetter) {
+        if (ngDevMode) {
+            Object.defineProperty(obj, 'debug', { get: debugGetter, enumerable: false });
+        }
+        else {
+            throw new Error('This method should be guarded with `ngDevMode` so that it can be tree shaken in production!');
+        }
     }
 
     /**
@@ -6723,8 +6737,9 @@
         firstChild, //
         schemas, //
         consts, //
-        incompleteFirstPass //
-        ) {
+        incompleteFirstPass, //
+        _decls, //
+        _vars) {
             this.type = type;
             this.id = id;
             this.blueprint = blueprint;
@@ -6756,6 +6771,8 @@
             this.schemas = schemas;
             this.consts = consts;
             this.incompleteFirstPass = incompleteFirstPass;
+            this._decls = _decls;
+            this._vars = _vars;
         }
         Object.defineProperty(TView.prototype, "template_", {
             get: function () {
@@ -7002,19 +7019,23 @@
         if (includeChildren === void 0) { includeChildren = false; }
         var node = unwrapRNode(value);
         if (node) {
-            var isTextNode = node.nodeType === Node.TEXT_NODE;
-            var outerHTML = (isTextNode ? node.textContent : node.outerHTML) || '';
-            if (includeChildren || isTextNode) {
-                return outerHTML;
-            }
-            else {
-                var innerHTML = '>' + node.innerHTML + '<';
-                return (outerHTML.split(innerHTML)[0]) + '>';
+            switch (node.nodeType) {
+                case Node.TEXT_NODE:
+                    return node.textContent;
+                case Node.COMMENT_NODE:
+                    return "<!--" + node.textContent + "-->";
+                case Node.ELEMENT_NODE:
+                    var outerHTML = node.outerHTML;
+                    if (includeChildren) {
+                        return outerHTML;
+                    }
+                    else {
+                        var innerHTML = '>' + node.innerHTML + '<';
+                        return (outerHTML.split(innerHTML)[0]) + '>';
+                    }
             }
         }
-        else {
-            return null;
-        }
+        return null;
     }
     var LViewDebug = /** @class */ (function () {
         function LViewDebug(_raw_lView) {
@@ -7049,7 +7070,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(LViewDebug.prototype, "host", {
+        Object.defineProperty(LViewDebug.prototype, "hostHTML", {
             get: function () {
                 return toHtml(this._raw_lView[HOST], true);
             },
@@ -7073,8 +7094,7 @@
         Object.defineProperty(LViewDebug.prototype, "nodes", {
             /**
              * The tree of nodes associated with the current `LView`. The nodes have been normalized into
-             * a
-             * tree structure with relevant details pulled out for readability.
+             * a tree structure with relevant details pulled out for readability.
              */
             get: function () {
                 var lView = this._raw_lView;
@@ -7168,6 +7188,41 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(LViewDebug.prototype, "decls", {
+            get: function () {
+                var tView = this.tView;
+                var start = HEADER_OFFSET;
+                return toLViewRange(this.tView, this._raw_lView, start, start + tView._decls);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LViewDebug.prototype, "vars", {
+            get: function () {
+                var tView = this.tView;
+                var start = HEADER_OFFSET + tView._decls;
+                return toLViewRange(this.tView, this._raw_lView, start, start + tView._vars);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LViewDebug.prototype, "i18n", {
+            get: function () {
+                var tView = this.tView;
+                var start = HEADER_OFFSET + tView._decls + tView._vars;
+                return toLViewRange(this.tView, this._raw_lView, start, this.tView.expandoStartIndex);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LViewDebug.prototype, "expando", {
+            get: function () {
+                var tView = this.tView;
+                return toLViewRange(this.tView, this._raw_lView, this.tView.expandoStartIndex, this._raw_lView.length);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(LViewDebug.prototype, "childViews", {
             /**
              * Normalized view of child views (and containers) attached at this location.
@@ -7186,6 +7241,13 @@
         });
         return LViewDebug;
     }());
+    function toLViewRange(tView, lView, start, end) {
+        var content = [];
+        for (var index = start; index < end; index++) {
+            content.push({ index: index, t: tView.data[index], l: lView[index] });
+        }
+        return { start: start, end: end, length: end - start, content: content };
+    }
     /**
      * Turns a flat list of nodes into a tree by walking the associated `TNode` tree.
      *
@@ -7203,18 +7265,17 @@
             return debugNodes;
         }
         else {
-            return null;
+            return [];
         }
     }
     function buildDebugNode(tNode, lView, nodeIndex) {
         var rawValue = lView[nodeIndex];
         var native = unwrapRNode(rawValue);
-        var componentLViewDebug = toDebug(readLViewValue(rawValue));
         return {
             html: toHtml(native),
+            type: TNodeTypeAsString[tNode.type],
             native: native,
-            nodes: toDebugNodes(tNode.child, lView),
-            component: componentLViewDebug,
+            children: toDebugNodes(tNode.child, lView),
         };
     }
     var LContainerDebug = /** @class */ (function () {
@@ -7288,211 +7349,6 @@
         }
         return null;
     }
-    var I18NDebugItem = /** @class */ (function () {
-        function I18NDebugItem(__raw_opCode, _lView, nodeIndex, type) {
-            this.__raw_opCode = __raw_opCode;
-            this._lView = _lView;
-            this.nodeIndex = nodeIndex;
-            this.type = type;
-        }
-        Object.defineProperty(I18NDebugItem.prototype, "tNode", {
-            get: function () {
-                return getTNode(this._lView[TVIEW], this.nodeIndex);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return I18NDebugItem;
-    }());
-    /**
-     * Turns a list of "Create" & "Update" OpCodes into a human-readable list of operations for
-     * debugging purposes.
-     * @param mutateOpCodes mutation opCodes to read
-     * @param updateOpCodes update opCodes to read
-     * @param icus list of ICU expressions
-     * @param lView The view the opCodes are acting on
-     */
-    function attachI18nOpCodesDebug(mutateOpCodes, updateOpCodes, icus, lView) {
-        attachDebugObject(mutateOpCodes, new I18nMutateOpCodesDebug(mutateOpCodes, lView));
-        attachDebugObject(updateOpCodes, new I18nUpdateOpCodesDebug(updateOpCodes, icus, lView));
-        if (icus) {
-            icus.forEach(function (icu) {
-                icu.create.forEach(function (icuCase) {
-                    attachDebugObject(icuCase, new I18nMutateOpCodesDebug(icuCase, lView));
-                });
-                icu.update.forEach(function (icuCase) {
-                    attachDebugObject(icuCase, new I18nUpdateOpCodesDebug(icuCase, icus, lView));
-                });
-            });
-        }
-    }
-    var I18nMutateOpCodesDebug = /** @class */ (function () {
-        function I18nMutateOpCodesDebug(__raw_opCodes, __lView) {
-            this.__raw_opCodes = __raw_opCodes;
-            this.__lView = __lView;
-        }
-        Object.defineProperty(I18nMutateOpCodesDebug.prototype, "operations", {
-            /**
-             * A list of operation information about how the OpCodes will act on the view.
-             */
-            get: function () {
-                var _a = this, __lView = _a.__lView, __raw_opCodes = _a.__raw_opCodes;
-                var results = [];
-                for (var i = 0; i < __raw_opCodes.length; i++) {
-                    var opCode = __raw_opCodes[i];
-                    var result = void 0;
-                    if (typeof opCode === 'string') {
-                        result = {
-                            __raw_opCode: opCode,
-                            type: 'Create Text Node',
-                            nodeIndex: __raw_opCodes[++i],
-                            text: opCode,
-                        };
-                    }
-                    if (typeof opCode === 'number') {
-                        switch (opCode & 7 /* MASK_OPCODE */) {
-                            case 1 /* AppendChild */:
-                                var destinationNodeIndex = opCode >>> 17 /* SHIFT_PARENT */;
-                                result = new I18NDebugItem(opCode, __lView, destinationNodeIndex, 'AppendChild');
-                                break;
-                            case 0 /* Select */:
-                                var nodeIndex = opCode >>> 3 /* SHIFT_REF */;
-                                result = new I18NDebugItem(opCode, __lView, nodeIndex, 'Select');
-                                break;
-                            case 5 /* ElementEnd */:
-                                var elementIndex = opCode >>> 3 /* SHIFT_REF */;
-                                result = new I18NDebugItem(opCode, __lView, elementIndex, 'ElementEnd');
-                                break;
-                            case 4 /* Attr */:
-                                elementIndex = opCode >>> 3 /* SHIFT_REF */;
-                                result = new I18NDebugItem(opCode, __lView, elementIndex, 'Attr');
-                                result['attrName'] = __raw_opCodes[++i];
-                                result['attrValue'] = __raw_opCodes[++i];
-                                break;
-                        }
-                    }
-                    if (!result) {
-                        switch (opCode) {
-                            case COMMENT_MARKER:
-                                result = {
-                                    __raw_opCode: opCode,
-                                    type: 'COMMENT_MARKER',
-                                    commentValue: __raw_opCodes[++i],
-                                    nodeIndex: __raw_opCodes[++i],
-                                };
-                                break;
-                            case ELEMENT_MARKER:
-                                result = {
-                                    __raw_opCode: opCode,
-                                    type: 'ELEMENT_MARKER',
-                                };
-                                break;
-                        }
-                    }
-                    if (!result) {
-                        result = {
-                            __raw_opCode: opCode,
-                            type: 'Unknown Op Code',
-                            code: opCode,
-                        };
-                    }
-                    results.push(result);
-                }
-                return results;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return I18nMutateOpCodesDebug;
-    }());
-    var I18nUpdateOpCodesDebug = /** @class */ (function () {
-        function I18nUpdateOpCodesDebug(__raw_opCodes, icus, __lView) {
-            this.__raw_opCodes = __raw_opCodes;
-            this.icus = icus;
-            this.__lView = __lView;
-        }
-        Object.defineProperty(I18nUpdateOpCodesDebug.prototype, "operations", {
-            /**
-             * A list of operation information about how the OpCodes will act on the view.
-             */
-            get: function () {
-                var _a = this, __lView = _a.__lView, __raw_opCodes = _a.__raw_opCodes, icus = _a.icus;
-                var results = [];
-                for (var i = 0; i < __raw_opCodes.length; i++) {
-                    // bit code to check if we should apply the next update
-                    var checkBit = __raw_opCodes[i];
-                    // Number of opCodes to skip until next set of update codes
-                    var skipCodes = __raw_opCodes[++i];
-                    var value = '';
-                    for (var j = i + 1; j <= (i + skipCodes); j++) {
-                        var opCode = __raw_opCodes[j];
-                        if (typeof opCode === 'string') {
-                            value += opCode;
-                        }
-                        else if (typeof opCode == 'number') {
-                            if (opCode < 0) {
-                                // It's a binding index whose value is negative
-                                // We cannot know the value of the binding so we only show the index
-                                value += "\uFFFD" + (-opCode - 1) + "\uFFFD";
-                            }
-                            else {
-                                var nodeIndex = opCode >>> 2 /* SHIFT_REF */;
-                                var tIcuIndex = void 0;
-                                var tIcu = void 0;
-                                switch (opCode & 3 /* MASK_OPCODE */) {
-                                    case 1 /* Attr */:
-                                        var attrName = __raw_opCodes[++j];
-                                        var sanitizeFn = __raw_opCodes[++j];
-                                        results.push({
-                                            __raw_opCode: opCode,
-                                            checkBit: checkBit,
-                                            type: 'Attr',
-                                            attrValue: value,
-                                            attrName: attrName,
-                                            sanitizeFn: sanitizeFn,
-                                        });
-                                        break;
-                                    case 0 /* Text */:
-                                        results.push({
-                                            __raw_opCode: opCode,
-                                            checkBit: checkBit,
-                                            type: 'Text',
-                                            nodeIndex: nodeIndex,
-                                            text: value,
-                                        });
-                                        break;
-                                    case 2 /* IcuSwitch */:
-                                        tIcuIndex = __raw_opCodes[++j];
-                                        tIcu = icus[tIcuIndex];
-                                        var result = new I18NDebugItem(opCode, __lView, nodeIndex, 'IcuSwitch');
-                                        result['tIcuIndex'] = tIcuIndex;
-                                        result['checkBit'] = checkBit;
-                                        result['mainBinding'] = value;
-                                        result['tIcu'] = tIcu;
-                                        results.push(result);
-                                        break;
-                                    case 3 /* IcuUpdate */:
-                                        tIcuIndex = __raw_opCodes[++j];
-                                        tIcu = icus[tIcuIndex];
-                                        result = new I18NDebugItem(opCode, __lView, nodeIndex, 'IcuUpdate');
-                                        result['tIcuIndex'] = tIcuIndex;
-                                        result['checkBit'] = checkBit;
-                                        result['tIcu'] = tIcu;
-                                        results.push(result);
-                                        break;
-                                }
-                            }
-                        }
-                    }
-                    i += skipCodes;
-                }
-                return results;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return I18nUpdateOpCodesDebug;
-    }());
 
     var ɵ0$4 = function () { return Promise.resolve(null); };
     /**
@@ -8014,7 +7870,7 @@
         // that has a host binding, we will update the blueprint with that def's hostVars count.
         var initialViewLength = bindingStartIndex + vars;
         var blueprint = createViewBlueprint(bindingStartIndex, initialViewLength);
-        return blueprint[TVIEW] = ngDevMode ?
+        var tView = blueprint[TVIEW] = ngDevMode ?
             new TViewConstructor(type, viewIndex, // id: number,
             blueprint, // blueprint: LView,
             templateFn, // template: ComponentTemplate<{}>|null,
@@ -8046,8 +7902,9 @@
             null, // firstChild: TNode|null,
             schemas, // schemas: SchemaMetadata[]|null,
             consts, // consts: TConstants|null
-            false // incompleteFirstPass: boolean
-            ) :
+            false, // incompleteFirstPass: boolean
+            decls, // ngDevMode only: decls
+            vars) :
             {
                 type: type,
                 id: viewIndex,
@@ -8081,6 +7938,13 @@
                 consts: consts,
                 incompleteFirstPass: false
             };
+        if (ngDevMode) {
+            // For performance reasons it is important that the tView retains the same shape during runtime.
+            // (To make sure that all of the code is monomorphic.) For this reason we seal the object to
+            // prevent class transitions.
+            Object.seal(tView);
+        }
+        return tView;
     }
     function createViewBlueprint(bindingStartIndex, initialViewLength) {
         var blueprint = ngDevMode ? new LViewBlueprint() : [];
@@ -8154,37 +8018,38 @@
     function createTNode(tView, tParent, type, adjustedIndex, tagName, attrs) {
         ngDevMode && ngDevMode.tNode++;
         var injectorIndex = tParent ? tParent.injectorIndex : -1;
-        return ngDevMode ? new TNodeDebug(tView, // tView_: TView
-        type, // type: TNodeType
-        adjustedIndex, // index: number
-        injectorIndex, // injectorIndex: number
-        -1, // directiveStart: number
-        -1, // directiveEnd: number
-        -1, // directiveStylingLast: number
-        null, // propertyBindings: number[]|null
-        0, // flags: TNodeFlags
-        0, // providerIndexes: TNodeProviderIndexes
-        tagName, // tagName: string|null
-        attrs, // attrs: (string|AttributeMarker|(string|SelectorFlags)[])[]|null
-        null, // mergedAttrs
-        null, // localNames: (string|number)[]|null
-        undefined, // initialInputs: (string[]|null)[]|null|undefined
-        null, // inputs: PropertyAliases|null
-        null, // outputs: PropertyAliases|null
-        null, // tViews: ITView|ITView[]|null
-        null, // next: ITNode|null
-        null, // projectionNext: ITNode|null
-        null, // child: ITNode|null
-        tParent, // parent: TElementNode|TContainerNode|null
-        null, // projection: number|(ITNode|RNode[])[]|null
-        null, // styles: string|null
-        null, // stylesWithoutHost: string|null
-        undefined, // residualStyles: string|null
-        null, // classes: string|null
-        null, // classesWithoutHost: string|null
-        undefined, // residualClasses: string|null
-        0, // classBindings: TStylingRange;
-        0) :
+        var tNode = ngDevMode ?
+            new TNodeDebug(tView, // tView_: TView
+            type, // type: TNodeType
+            adjustedIndex, // index: number
+            injectorIndex, // injectorIndex: number
+            -1, // directiveStart: number
+            -1, // directiveEnd: number
+            -1, // directiveStylingLast: number
+            null, // propertyBindings: number[]|null
+            0, // flags: TNodeFlags
+            0, // providerIndexes: TNodeProviderIndexes
+            tagName, // tagName: string|null
+            attrs, // attrs: (string|AttributeMarker|(string|SelectorFlags)[])[]|null
+            null, // mergedAttrs
+            null, // localNames: (string|number)[]|null
+            undefined, // initialInputs: (string[]|null)[]|null|undefined
+            null, // inputs: PropertyAliases|null
+            null, // outputs: PropertyAliases|null
+            null, // tViews: ITView|ITView[]|null
+            null, // next: ITNode|null
+            null, // projectionNext: ITNode|null
+            null, // child: ITNode|null
+            tParent, // parent: TElementNode|TContainerNode|null
+            null, // projection: number|(ITNode|RNode[])[]|null
+            null, // styles: string|null
+            null, // stylesWithoutHost: string|null
+            undefined, // residualStyles: string|null
+            null, // classes: string|null
+            null, // classesWithoutHost: string|null
+            undefined, // residualClasses: string|null
+            0, // classBindings: TStylingRange;
+            0) :
             {
                 type: type,
                 index: adjustedIndex,
@@ -8217,6 +8082,13 @@
                 classBindings: 0,
                 styleBindings: 0,
             };
+        if (ngDevMode) {
+            // For performance reasons it is important that the tNode retains the same shape during runtime.
+            // (To make sure that all of the code is monomorphic.) For this reason we seal the object to
+            // prevent class transitions.
+            Object.seal(tNode);
+        }
+        return tNode;
     }
     function generatePropertyAliases(inputAliasMap, directiveDefIdx, propStore) {
         for (var publicName in inputAliasMap) {
@@ -9257,7 +9129,7 @@
             var index = inputs[i++];
             var privateName = inputs[i++];
             var instance = lView[index];
-            ngDevMode && assertDataInRange(lView, index);
+            ngDevMode && assertIndexInRange(lView, index);
             var def = tView.data[index];
             if (def.setInput !== null) {
                 def.setInput(instance, value, publicName, privateName);
@@ -9272,7 +9144,7 @@
      */
     function textBindingInternal(lView, index, value) {
         ngDevMode && assertNotSame(value, NO_CHANGE, 'value should not be NO_CHANGE');
-        ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
+        ngDevMode && assertIndexInRange(lView, index + HEADER_OFFSET);
         var element = getNativeByIndex(index, lView);
         ngDevMode && assertDefined(element, 'native element should exist');
         ngDevMode && ngDevMode.rendererSetText++;
@@ -9553,16 +9425,6 @@
         }
         return viewToDetach;
     }
-    /**
-     * Removes a view from a container, i.e. detaches it and then destroys the underlying LView.
-     *
-     * @param lContainer The container from which to remove a view
-     * @param removeIndex The index of the view to remove
-     */
-    function removeView(lContainer, removeIndex) {
-        var detachedView = detachView(lContainer, removeIndex);
-        detachedView && destroyLView(detachedView[TVIEW], detachedView);
-    }
     /**
      * A standalone function which destroys an LView,
      * conducting clean up (e.g. removing listeners, calling onDestroys).
@@ -10818,8 +10680,17 @@
                 ViewContainerRef.prototype.remove = function (index) {
                     this.allocateContainerIfNeeded();
                     var adjustedIdx = this._adjustIndex(index, -1);
-                    removeView(this._lContainer, adjustedIdx);
-                    removeFromArray(this._lContainer[VIEW_REFS], adjustedIdx);
+                    var detachedView = detachView(this._lContainer, adjustedIdx);
+                    if (detachedView) {
+                        // Before destroying the view, remove it from the container's array of `ViewRef`s.
+                        // This ensures the view container length is updated before calling
+                        // `destroyLView`, which could recursively call view container methods that
+                        // rely on an accurate container length.
+                        // (e.g. a method on this view container being called by a child directive's OnDestroy
+                        // lifecycle hook)
+                        removeFromArray(this._lContainer[VIEW_REFS], adjustedIdx);
+                        destroyLView(detachedView[TVIEW], detachedView);
+                    }
                 };
                 ViewContainerRef.prototype.detach = function (index) {
                     this.allocateContainerIfNeeded();
@@ -11035,13 +10906,42 @@
         return typeof v === 'function';
     }
 
+    /*
+     * #########################
+     * Attention: These Regular expressions have to hold even if the code is minified!
+     * ##########################
+     */
+    /**
+     * Regular expression that detects pass-through constructors for ES5 output. This Regex
+     * intends to capture the common delegation pattern emitted by TypeScript and Babel. Also
+     * it intends to capture the pattern where existing constructors have been downleveled from
+     * ES2015 to ES5 using TypeScript w/ downlevel iteration. e.g.
+     *
+     * ```
+     *   function MyClass() {
+     *     var _this = _super.apply(this, arguments) || this;
+     * ```
+     *
+     * ```
+     *   function MyClass() {
+     *     var _this = _super.apply(this, __spread(arguments)) || this;
+     * ```
+     *
+     * More details can be found in: https://github.com/angular/angular/issues/38453.
+     */
+    var ES5_DELEGATE_CTOR = /^function\s+\S+\(\)\s*{[\s\S]+\.apply\(this,\s*(arguments|[^()]+\(arguments\))\)/;
+    /** Regular expression that detects ES2015 classes which extend from other classes. */
+    var ES2015_INHERITED_CLASS = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{/;
+    /**
+     * Regular expression that detects ES2015 classes which extend from other classes and
+     * have an explicit constructor defined.
+     */
+    var ES2015_INHERITED_CLASS_WITH_CTOR = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(/;
     /**
-     * Attention: These regex has to hold even if the code is minified!
+     * Regular expression that detects ES2015 classes which extend from other classes
+     * and inherit a constructor.
      */
-    var DELEGATE_CTOR = /^function\s+\S+\(\)\s*{[\s\S]+\.apply\(this,\s*arguments\)/;
-    var INHERITED_CLASS = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{/;
-    var INHERITED_CLASS_WITH_CTOR = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(/;
-    var INHERITED_CLASS_WITH_DELEGATE_CTOR = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(\)\s*{\s*super\(\.\.\.arguments\)/;
+    var ES2015_INHERITED_CLASS_WITH_DELEGATE_CTOR = /^class\s+[A-Za-z\d$_]*\s*extends\s+[^{]+{[\s\S]*constructor\s*\(\)\s*{\s*super\(\.\.\.arguments\)/;
     /**
      * Determine whether a stringified type is a class which delegates its constructor
      * to its parent.
@@ -11051,8 +10951,9 @@
      * an initialized instance property.
      */
     function isDelegateCtor(typeStr) {
-        return DELEGATE_CTOR.test(typeStr) || INHERITED_CLASS_WITH_DELEGATE_CTOR.test(typeStr) ||
-            (INHERITED_CLASS.test(typeStr) && !INHERITED_CLASS_WITH_CTOR.test(typeStr));
+        return ES5_DELEGATE_CTOR.test(typeStr) ||
+            ES2015_INHERITED_CLASS_WITH_DELEGATE_CTOR.test(typeStr) ||
+            (ES2015_INHERITED_CLASS.test(typeStr) && !ES2015_INHERITED_CLASS_WITH_CTOR.test(typeStr));
     }
     var ReflectionCapabilities = /** @class */ (function () {
         function ReflectionCapabilities(reflect) {
@@ -13647,7 +13548,7 @@
     }
     /** Gets the current binding value. */
     function getBinding(lView, bindingIndex) {
-        ngDevMode && assertDataInRange(lView, bindingIndex);
+        ngDevMode && assertIndexInRange(lView, bindingIndex);
         ngDevMode &&
             assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
         return lView[bindingIndex];
@@ -14542,7 +14443,7 @@
         ngDevMode &&
             assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings');
         ngDevMode && ngDevMode.rendererCreateElement++;
-        ngDevMode && assertDataInRange(lView, adjustedIndex);
+        ngDevMode && assertIndexInRange(lView, adjustedIndex);
         var renderer = lView[RENDERER];
         var native = lView[adjustedIndex] = elementCreate(name, renderer, getNamespace());
         var tNode = tView.firstCreatePass ?
@@ -14702,7 +14603,7 @@
         var lView = getLView();
         var tView = getTView();
         var adjustedIndex = index + HEADER_OFFSET;
-        ngDevMode && assertDataInRange(lView, adjustedIndex);
+        ngDevMode && assertIndexInRange(lView, adjustedIndex);
         ngDevMode &&
             assertEqual(getBindingIndex(), tView.bindingStartIndex, 'element containers should be created before any bindings');
         var tNode = tView.firstCreatePass ?
@@ -14969,7 +14870,7 @@
             if (propsLength) {
                 for (var i = 0; i < propsLength; i += 2) {
                     var index = props[i];
-                    ngDevMode && assertDataInRange(lView, index);
+                    ngDevMode && assertIndexInRange(lView, index);
                     var minifiedName = props[i + 1];
                     var directiveInstance = lView[index];
                     var output = directiveInstance[minifiedName];
@@ -16029,7 +15930,7 @@
         // - we are a map in which case we have to continue searching even after we find what we were
         //   looking for since we are a wild card and everything needs to be flipped to duplicate.
         while (cursor !== 0 && (foundDuplicate === false || isMap)) {
-            ngDevMode && assertDataInRange(tData, cursor);
+            ngDevMode && assertIndexInRange(tData, cursor);
             var tStylingValueAtCursor = tData[cursor];
             var tStyleRangeAtCursor = tData[cursor + 1];
             if (isStylingMatch(tStylingValueAtCursor, tStylingKey)) {
@@ -16252,7 +16153,8 @@
         var ch;
         while (startIndex < endIndex &&
             ((ch = text.charCodeAt(startIndex)) === 45 /* DASH */ || ch === 95 /* UNDERSCORE */ ||
-                ((ch & -33 /* UPPER_CASE */) >= 65 /* A */ && (ch & -33 /* UPPER_CASE */) <= 90 /* Z */))) {
+                ((ch & -33 /* UPPER_CASE */) >= 65 /* A */ && (ch & -33 /* UPPER_CASE */) <= 90 /* Z */) ||
+                (ch >= 48 /* ZERO */ && ch <= 57 /* NINE */))) {
             startIndex++;
         }
         return startIndex;
@@ -17146,7 +17048,7 @@
         var adjustedIndex = index + HEADER_OFFSET;
         ngDevMode &&
             assertEqual(getBindingIndex(), tView.bindingStartIndex, 'text nodes should be created before any bindings');
-        ngDevMode && assertDataInRange(lView, adjustedIndex);
+        ngDevMode && assertIndexInRange(lView, adjustedIndex);
         var tNode = tView.firstCreatePass ?
             getOrCreateTNode(tView, lView[T_HOST], index, 3 /* Element */, null, null) :
             tView.data[adjustedIndex];
@@ -19009,7 +18911,7 @@
      */
     function createRootComponentView(rNode, def, rootView, rendererFactory, hostRenderer, sanitizer) {
         var tView = rootView[TVIEW];
-        ngDevMode && assertDataInRange(rootView, 0 + HEADER_OFFSET);
+        ngDevMode && assertIndexInRange(rootView, 0 + HEADER_OFFSET);
         rootView[0 + HEADER_OFFSET] = rNode;
         var tNode = getOrCreateTNode(tView, null, 0, 3 /* Element */, null, null);
         var mergedAttrs = tNode.mergedAttrs = def.hostAttrs;
@@ -19915,7 +19817,7 @@
     /**
      * @publicApi
      */
-    var VERSION = new Version('10.0.6');
+    var VERSION = new Version('10.0.10');
 
     /**
      * @license
@@ -23059,30 +22961,6 @@
         return ComponentRef;
     }(ComponentRef));
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * 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
-     */
-    /**
-     * NOTE: changes to the `ngI18nClosureMode` name must be synced with `compiler-cli/src/tooling.ts`.
-     */
-    if (typeof ngI18nClosureMode === 'undefined') {
-        // These property accesses can be ignored because ngI18nClosureMode will be set to false
-        // when optimizing code and the whole if statement will be dropped.
-        // Make sure to refer to ngI18nClosureMode as ['ngI18nClosureMode'] for closure.
-        // NOTE: we need to have it in IIFE so that the tree-shaker is happy.
-        (function () {
-            // tslint:disable-next-line:no-toplevel-property-access
-            _global['ngI18nClosureMode'] =
-                // TODO(FW-1250): validate that this actually, you know, works.
-                // tslint:disable-next-line:no-toplevel-property-access
-                typeof goog !== 'undefined' && typeof goog.getMsg === 'function';
-        })();
-    }
-
     /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -23285,405 +23163,401 @@
      */
     var USD_CURRENCY_CODE = 'USD';
 
-    var MARKER = "\uFFFD";
-    var ICU_BLOCK_REGEXP = /^\s*(�\d+:?\d*�)\s*,\s*(select|plural)\s*,/;
-    var SUBTEMPLATE_REGEXP = /�\/?\*(\d+:\d+)�/gi;
-    var PH_REGEXP = /�(\/?[#*!]\d+):?\d*�/gi;
-    var BINDING_REGEXP = /�(\d+):?\d*�/gi;
-    var ICU_REGEXP = /({\s*�\d+:?\d*�\s*,\s*\S{6}\s*,[\s\S]*})/gi;
-    // i18nPostprocess consts
-    var ROOT_TEMPLATE_ID = 0;
-    var PP_MULTI_VALUE_PLACEHOLDERS_REGEXP = /\[(�.+?�?)\]/;
-    var PP_PLACEHOLDERS_REGEXP = /\[(�.+?�?)\]|(�\/?\*\d+:\d+�)/g;
-    var PP_ICU_VARS_REGEXP = /({\s*)(VAR_(PLURAL|SELECT)(_\d+)?)(\s*,)/g;
-    var PP_ICU_PLACEHOLDERS_REGEXP = /{([A-Z0-9_]+)}/g;
-    var PP_ICUS_REGEXP = /�I18N_EXP_(ICU(_\d+)?)�/g;
-    var PP_CLOSE_TEMPLATE_REGEXP = /\/\*/;
-    var PP_TEMPLATE_ID_REGEXP = /\d+\:(\d+)/;
     /**
-     * Breaks pattern into strings and top level {...} blocks.
-     * Can be used to break a message into text and ICU expressions, or to break an ICU expression into
-     * keys and cases.
-     * Original code from closure library, modified for Angular.
-     *
-     * @param pattern (sub)Pattern to be broken.
+     * @license
+     * Copyright Google LLC All Rights Reserved.
      *
+     * 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
      */
-    function extractParts(pattern) {
-        if (!pattern) {
-            return [];
-        }
-        var prevPos = 0;
-        var braceStack = [];
-        var results = [];
-        var braces = /[{}]/g;
-        // lastIndex doesn't get set to 0 so we have to.
-        braces.lastIndex = 0;
-        var match;
-        while (match = braces.exec(pattern)) {
-            var pos = match.index;
-            if (match[0] == '}') {
-                braceStack.pop();
-                if (braceStack.length == 0) {
-                    // End of the block.
-                    var block = pattern.substring(prevPos, pos);
-                    if (ICU_BLOCK_REGEXP.test(block)) {
-                        results.push(parseICUBlock(block));
-                    }
-                    else {
-                        results.push(block);
-                    }
-                    prevPos = pos + 1;
-                }
-            }
-            else {
-                if (braceStack.length == 0) {
-                    var substring_1 = pattern.substring(prevPos, pos);
-                    results.push(substring_1);
-                    prevPos = pos + 1;
-                }
-                braceStack.push('{');
-            }
-        }
-        var substring = pattern.substring(prevPos);
-        results.push(substring);
-        return results;
-    }
     /**
-     * Parses text containing an ICU expression and produces a JSON object for it.
-     * Original code from closure library, modified for Angular.
-     *
-     * @param pattern Text containing an ICU expression that needs to be parsed.
-     *
+     * The locale id that the application is currently using (for translations and ICU expressions).
+     * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
+     * but is now defined as a global value.
      */
-    function parseICUBlock(pattern) {
-        var cases = [];
-        var values = [];
-        var icuType = 1 /* plural */;
-        var mainBinding = 0;
-        pattern = pattern.replace(ICU_BLOCK_REGEXP, function (str, binding, type) {
-            if (type === 'select') {
-                icuType = 0 /* select */;
-            }
-            else {
-                icuType = 1 /* plural */;
-            }
-            mainBinding = parseInt(binding.substr(1), 10);
-            return '';
-        });
-        var parts = extractParts(pattern);
-        // Looking for (key block)+ sequence. One of the keys has to be "other".
-        for (var pos = 0; pos < parts.length;) {
-            var key = parts[pos++].trim();
-            if (icuType === 1 /* plural */) {
-                // Key can be "=x", we just want "x"
-                key = key.replace(/\s*(?:=)?(\w+)\s*/, '$1');
-            }
-            if (key.length) {
-                cases.push(key);
-            }
-            var blocks = extractParts(parts[pos++]);
-            if (cases.length > values.length) {
-                values.push(blocks);
-            }
+    var LOCALE_ID = DEFAULT_LOCALE_ID;
+    /**
+     * Sets the locale id that will be used for translations and ICU expressions.
+     * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
+     * but is now defined as a global value.
+     *
+     * @param localeId
+     */
+    function setLocaleId(localeId) {
+        assertDefined(localeId, "Expected localeId to be defined");
+        if (typeof localeId === 'string') {
+            LOCALE_ID = localeId.toLowerCase().replace(/_/g, '-');
         }
-        // TODO(ocombe): support ICU expressions in attributes, see #21615
-        return { type: icuType, mainBinding: mainBinding, cases: cases, values: values };
     }
     /**
-     * Removes everything inside the sub-templates of a message.
+     * Gets the locale id that will be used for translations and ICU expressions.
+     * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
+     * but is now defined as a global value.
      */
-    function removeInnerTemplateTranslation(message) {
-        var match;
-        var res = '';
-        var index = 0;
-        var inTemplate = false;
-        var tagMatched;
-        while ((match = SUBTEMPLATE_REGEXP.exec(message)) !== null) {
-            if (!inTemplate) {
-                res += message.substring(index, match.index + match[0].length);
-                tagMatched = match[1];
-                inTemplate = true;
-            }
-            else {
-                if (match[0] === MARKER + "/*" + tagMatched + MARKER) {
-                    index = match.index;
-                    inTemplate = false;
-                }
-            }
-        }
-        ngDevMode &&
-            assertEqual(inTemplate, false, "Tag mismatch: unable to find the end of the sub-template in the translation \"" + message + "\"");
-        res += message.substr(index);
-        return res;
+    function getLocaleId() {
+        return LOCALE_ID;
     }
+
     /**
-     * Extracts a part of a message and removes the rest.
-     *
-     * This method is used for extracting a part of the message associated with a template. A translated
-     * message can span multiple templates.
-     *
-     * Example:
-     * ```
-     * <div i18n>Translate <span *ngIf>me</span>!</div>
-     * ```
+     * @license
+     * Copyright Google LLC All Rights Reserved.
      *
-     * @param message The message to crop
-     * @param subTemplateIndex Index of the sub-template to extract. If undefined it returns the
-     * external template and removes all sub-templates.
+     * 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
      */
-    function getTranslationForTemplate(message, subTemplateIndex) {
-        if (isRootTemplateMessage(subTemplateIndex)) {
-            // We want the root template message, ignore all sub-templates
-            return removeInnerTemplateTranslation(message);
-        }
-        else {
-            // We want a specific sub-template
-            var start = message.indexOf(":" + subTemplateIndex + MARKER) + 2 + subTemplateIndex.toString().length;
-            var end = message.search(new RegExp(MARKER + "\\/\\*\\d+:" + subTemplateIndex + MARKER));
-            return removeInnerTemplateTranslation(message.substring(start, end));
-        }
+    /**
+     * NOTE: changes to the `ngI18nClosureMode` name must be synced with `compiler-cli/src/tooling.ts`.
+     */
+    if (typeof ngI18nClosureMode === 'undefined') {
+        // These property accesses can be ignored because ngI18nClosureMode will be set to false
+        // when optimizing code and the whole if statement will be dropped.
+        // Make sure to refer to ngI18nClosureMode as ['ngI18nClosureMode'] for closure.
+        // NOTE: we need to have it in IIFE so that the tree-shaker is happy.
+        (function () {
+            // tslint:disable-next-line:no-toplevel-property-access
+            _global['ngI18nClosureMode'] =
+                // TODO(FW-1250): validate that this actually, you know, works.
+                // tslint:disable-next-line:no-toplevel-property-access
+                typeof goog !== 'undefined' && typeof goog.getMsg === 'function';
+        })();
     }
+
     /**
-     * Generate the OpCodes to update the bindings of a string.
+     * @license
+     * Copyright Google LLC All Rights Reserved.
      *
-     * @param str The string containing the bindings.
-     * @param destinationNode Index of the destination node which will receive the binding.
-     * @param attrName Name of the attribute, if the string belongs to an attribute.
-     * @param sanitizeFn Sanitization function used to sanitize the string after update, if necessary.
+     * 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
      */
-    function generateBindingUpdateOpCodes(str, destinationNode, attrName, sanitizeFn) {
-        if (sanitizeFn === void 0) { sanitizeFn = null; }
-        var updateOpCodes = [null, null]; // Alloc space for mask and size
-        var textParts = str.split(BINDING_REGEXP);
-        var mask = 0;
-        for (var j = 0; j < textParts.length; j++) {
-            var textValue = textParts[j];
-            if (j & 1) {
-                // Odd indexes are bindings
-                var bindingIndex = parseInt(textValue, 10);
-                updateOpCodes.push(-1 - bindingIndex);
-                mask = mask | toMaskBit(bindingIndex);
-            }
-            else if (textValue !== '') {
-                // Even indexes are text
-                updateOpCodes.push(textValue);
-            }
-        }
-        updateOpCodes.push(destinationNode << 2 /* SHIFT_REF */ |
-            (attrName ? 1 /* Attr */ : 0 /* Text */));
-        if (attrName) {
-            updateOpCodes.push(attrName, sanitizeFn);
-        }
-        updateOpCodes[0] = mask;
-        updateOpCodes[1] = updateOpCodes.length - 2;
-        return updateOpCodes;
+    function getParentFromI18nMutateOpCode(mergedCode) {
+        return mergedCode >>> 17 /* SHIFT_PARENT */;
     }
-    function getBindingMask(icuExpression, mask) {
-        if (mask === void 0) { mask = 0; }
-        mask = mask | toMaskBit(icuExpression.mainBinding);
-        var match;
-        for (var i = 0; i < icuExpression.values.length; i++) {
-            var valueArr = icuExpression.values[i];
-            for (var j = 0; j < valueArr.length; j++) {
-                var value = valueArr[j];
-                if (typeof value === 'string') {
-                    while (match = BINDING_REGEXP.exec(value)) {
-                        mask = mask | toMaskBit(parseInt(match[1], 10));
-                    }
-                }
-                else {
-                    mask = getBindingMask(value, mask);
-                }
-            }
-        }
-        return mask;
+    function getRefFromI18nMutateOpCode(mergedCode) {
+        return (mergedCode & 131064 /* MASK_REF */) >>> 3 /* SHIFT_REF */;
+    }
+    function getInstructionFromI18nMutateOpCode(mergedCode) {
+        return mergedCode & 7 /* MASK_INSTRUCTION */;
     }
-    var i18nIndexStack = [];
-    var i18nIndexStackPointer = -1;
     /**
-     * Convert binding index to mask bit.
+     * Marks that the next string is an element name.
      *
-     * Each index represents a single bit on the bit-mask. Because bit-mask only has 32 bits, we make
-     * the 32nd bit share all masks for all bindings higher than 32. Since it is extremely rare to have
-     * more than 32 bindings this will be hit very rarely. The downside of hitting this corner case is
-     * that we will execute binding code more often than necessary. (penalty of performance)
+     * See `I18nMutateOpCodes` documentation.
      */
-    function toMaskBit(bindingIndex) {
-        return 1 << Math.min(bindingIndex, 31);
-    }
-    var parentIndexStack = [];
+    var ELEMENT_MARKER = {
+        marker: 'element'
+    };
     /**
-     * Marks a block of text as translatable.
-     *
-     * The instructions `i18nStart` and `i18nEnd` mark the translation block in the template.
-     * The translation `message` is the value which is locale specific. The translation string may
-     * contain placeholders which associate inner elements and sub-templates within the translation.
+     * Marks that the next string is comment text.
      *
-     * The translation `message` placeholders are:
-     * - `�{index}(:{block})�`: *Binding Placeholder*: Marks a location where an expression will be
-     *   interpolated into. The placeholder `index` points to the expression binding index. An optional
-     *   `block` that matches the sub-template in which it was declared.
-     * - `�#{index}(:{block})�`/`�/#{index}(:{block})�`: *Element Placeholder*:  Marks the beginning
-     *   and end of DOM element that were embedded in the original translation block. The placeholder
-     *   `index` points to the element index in the template instructions set. An optional `block` that
-     *   matches the sub-template in which it was declared.
-     * - `�!{index}(:{block})�`/`�/!{index}(:{block})�`: *Projection Placeholder*:  Marks the
-     *   beginning and end of <ng-content> that was embedded in the original translation block.
-     *   The placeholder `index` points to the element index in the template instructions set.
-     *   An optional `block` that matches the sub-template in which it was declared.
-     * - `�*{index}:{block}�`/`�/*{index}:{block}�`: *Sub-template Placeholder*: Sub-templates must be
-     *   split up and translated separately in each angular template function. The `index` points to the
-     *   `template` instruction index. A `block` that matches the sub-template in which it was declared.
-     *
-     * @param index A unique index of the translation in the static block.
-     * @param message The translation message.
-     * @param subTemplateIndex Optional sub-template index in the `message`.
+     * See `I18nMutateOpCodes` documentation.
+     */
+    var COMMENT_MARKER = {
+        marker: 'comment'
+    };
+    // Note: This hack is necessary so we don't erroneously get a circular dependency
+    // failure based on types.
+    var unusedValueExportToPlacateAjd$6 = 1;
+
+    /**
+     * @license
+     * Copyright Google LLC All Rights Reserved.
      *
-     * @codeGenApi
+     * 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
      */
-    function ɵɵi18nStart(index, message, subTemplateIndex) {
-        var tView = getTView();
-        ngDevMode && assertDefined(tView, "tView should be defined");
+    var i18nIndexStack = [];
+    var i18nIndexStackPointer = -1;
+    function popI18nIndex() {
+        return i18nIndexStack[i18nIndexStackPointer--];
+    }
+    function pushI18nIndex(index) {
         i18nIndexStack[++i18nIndexStackPointer] = index;
-        // We need to delay projections until `i18nEnd`
-        setDelayProjection(true);
-        if (tView.firstCreatePass && tView.data[index + HEADER_OFFSET] === null) {
-            i18nStartFirstPass(getLView(), tView, index, message, subTemplateIndex);
-        }
     }
-    // Count for the number of vars that will be allocated for each i18n block.
-    // It is global because this is used in multiple functions that include loops and recursive calls.
-    // This is reset to 0 when `i18nStartFirstPass` is called.
-    var i18nVarsCount;
-    function allocNodeIndex(startIndex) {
-        return startIndex + i18nVarsCount++;
+    var changeMask = 0;
+    var shiftsCounter = 0;
+    function setMaskBit(bit) {
+        if (bit) {
+            changeMask = changeMask | (1 << shiftsCounter);
+        }
+        shiftsCounter++;
     }
-    /**
-     * See `i18nStart` above.
-     */
-    function i18nStartFirstPass(lView, tView, index, message, subTemplateIndex) {
-        var startIndex = tView.blueprint.length - HEADER_OFFSET;
-        i18nVarsCount = 0;
-        var previousOrParentTNode = getPreviousOrParentTNode();
-        var parentTNode = getIsParent() ? previousOrParentTNode : previousOrParentTNode && previousOrParentTNode.parent;
-        var parentIndex = parentTNode && parentTNode !== lView[T_HOST] ? parentTNode.index - HEADER_OFFSET : index;
-        var parentIndexPointer = 0;
-        parentIndexStack[parentIndexPointer] = parentIndex;
-        var createOpCodes = [];
-        // If the previous node wasn't the direct parent then we have a translation without top level
-        // element and we need to keep a reference of the previous element if there is one. We should also
-        // keep track whether an element was a parent node or not, so that the logic that consumes
-        // the generated `I18nMutateOpCode`s can leverage this information to properly set TNode state
-        // (whether it's a parent or sibling).
-        if (index > 0 && previousOrParentTNode !== parentTNode) {
-            var previousTNodeIndex = previousOrParentTNode.index - HEADER_OFFSET;
-            // If current TNode is a sibling node, encode it using a negative index. This information is
-            // required when the `Select` action is processed (see the `readCreateOpCodes` function).
-            if (!getIsParent()) {
-                previousTNodeIndex = ~previousTNodeIndex;
+    function applyI18n(tView, lView, index) {
+        if (shiftsCounter > 0) {
+            ngDevMode && assertDefined(tView, "tView should be defined");
+            var tI18n = tView.data[index + HEADER_OFFSET];
+            var updateOpCodes = void 0;
+            var tIcus = null;
+            if (Array.isArray(tI18n)) {
+                updateOpCodes = tI18n;
             }
-            // Create an OpCode to select the previous TNode
-            createOpCodes.push(previousTNodeIndex << 3 /* SHIFT_REF */ | 0 /* Select */);
-        }
-        var updateOpCodes = [];
-        var icuExpressions = [];
-        if (message === '' && isRootTemplateMessage(subTemplateIndex)) {
-            // If top level translation is an empty string, do not invoke additional processing
-            // and just create op codes for empty text node instead.
-            createOpCodes.push(message, allocNodeIndex(startIndex), parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+            else {
+                updateOpCodes = tI18n.update;
+                tIcus = tI18n.icus;
+            }
+            var bindingsStartIndex = getBindingIndex() - shiftsCounter - 1;
+            applyUpdateOpCodes(tView, tIcus, lView, updateOpCodes, bindingsStartIndex, changeMask);
+            // Reset changeMask & maskBit to default for the next update cycle
+            changeMask = 0;
+            shiftsCounter = 0;
         }
-        else {
-            var templateTranslation = getTranslationForTemplate(message, subTemplateIndex);
-            var msgParts = replaceNgsp(templateTranslation).split(PH_REGEXP);
-            for (var i = 0; i < msgParts.length; i++) {
-                var value = msgParts[i];
-                if (i & 1) {
-                    // Odd indexes are placeholders (elements and sub-templates)
-                    if (value.charAt(0) === '/') {
-                        // It is a closing tag
-                        if (value.charAt(1) === "#" /* ELEMENT */) {
-                            var phIndex = parseInt(value.substr(2), 10);
-                            parentIndex = parentIndexStack[--parentIndexPointer];
-                            createOpCodes.push(phIndex << 3 /* SHIFT_REF */ | 5 /* ElementEnd */);
+    }
+    /**
+     * Apply `I18nMutateOpCodes` OpCodes.
+     *
+     * @param tView Current `TView`
+     * @param rootIndex Pointer to the root (parent) tNode for the i18n.
+     * @param createOpCodes OpCodes to process
+     * @param lView Current `LView`
+     */
+    function applyCreateOpCodes(tView, rootindex, createOpCodes, lView) {
+        var renderer = lView[RENDERER];
+        var currentTNode = null;
+        var previousTNode = null;
+        var visitedNodes = [];
+        for (var i = 0; i < createOpCodes.length; i++) {
+            var opCode = createOpCodes[i];
+            if (typeof opCode == 'string') {
+                var textRNode = createTextNode(opCode, renderer);
+                var textNodeIndex = createOpCodes[++i];
+                ngDevMode && ngDevMode.rendererCreateTextNode++;
+                previousTNode = currentTNode;
+                currentTNode =
+                    createDynamicNodeAtIndex(tView, lView, textNodeIndex, 3 /* Element */, textRNode, null);
+                visitedNodes.push(textNodeIndex);
+                setIsNotParent();
+            }
+            else if (typeof opCode == 'number') {
+                switch (opCode & 7 /* MASK_INSTRUCTION */) {
+                    case 1 /* AppendChild */:
+                        var destinationNodeIndex = opCode >>> 17 /* SHIFT_PARENT */;
+                        var destinationTNode = void 0;
+                        if (destinationNodeIndex === rootindex) {
+                            // If the destination node is `i18nStart`, we don't have a
+                            // top-level node and we should use the host node instead
+                            destinationTNode = lView[T_HOST];
                         }
-                    }
-                    else {
-                        var phIndex = parseInt(value.substr(1), 10);
-                        var isElement = value.charAt(0) === "#" /* ELEMENT */;
-                        // The value represents a placeholder that we move to the designated index.
-                        // Note: positive indicies indicate that a TNode with a given index should also be marked
-                        // as parent while executing `Select` instruction.
-                        createOpCodes.push((isElement ? phIndex : ~phIndex) << 3 /* SHIFT_REF */ |
-                            0 /* Select */, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
-                        if (isElement) {
-                            parentIndexStack[++parentIndexPointer] = parentIndex = phIndex;
+                        else {
+                            destinationTNode = getTNode(tView, destinationNodeIndex);
                         }
-                    }
+                        ngDevMode &&
+                            assertDefined(currentTNode, "You need to create or select a node before you can insert it into the DOM");
+                        previousTNode =
+                            appendI18nNode(tView, currentTNode, destinationTNode, previousTNode, lView);
+                        break;
+                    case 0 /* Select */:
+                        // Negative indices indicate that a given TNode is a sibling node, not a parent node
+                        // (see `i18nStartFirstPass` for additional information).
+                        var isParent = opCode >= 0;
+                        // FIXME(misko): This SHIFT_REF looks suspect as it does not have mask.
+                        var nodeIndex = (isParent ? opCode : ~opCode) >>> 3 /* SHIFT_REF */;
+                        visitedNodes.push(nodeIndex);
+                        previousTNode = currentTNode;
+                        currentTNode = getTNode(tView, nodeIndex);
+                        if (currentTNode) {
+                            setPreviousOrParentTNode(currentTNode, isParent);
+                        }
+                        break;
+                    case 5 /* ElementEnd */:
+                        var elementIndex = opCode >>> 3 /* SHIFT_REF */;
+                        previousTNode = currentTNode = getTNode(tView, elementIndex);
+                        setPreviousOrParentTNode(currentTNode, false);
+                        break;
+                    case 4 /* Attr */:
+                        var elementNodeIndex = opCode >>> 3 /* SHIFT_REF */;
+                        var attrName = createOpCodes[++i];
+                        var attrValue = createOpCodes[++i];
+                        // This code is used for ICU expressions only, since we don't support
+                        // directives/components in ICUs, we don't need to worry about inputs here
+                        elementAttributeInternal(getTNode(tView, elementNodeIndex), lView, attrName, attrValue, null, null);
+                        break;
+                    default:
+                        throw new Error("Unable to determine the type of mutate operation for \"" + opCode + "\"");
                 }
-                else {
-                    // Even indexes are text (including bindings & ICU expressions)
-                    var parts = extractParts(value);
-                    for (var j = 0; j < parts.length; j++) {
-                        if (j & 1) {
-                            // Odd indexes are ICU expressions
-                            var icuExpression = parts[j];
-                            // Verify that ICU expression has the right shape. Translations might contain invalid
-                            // constructions (while original messages were correct), so ICU parsing at runtime may
-                            // not succeed (thus `icuExpression` remains a string).
-                            if (typeof icuExpression !== 'object') {
-                                throw new Error("Unable to parse ICU expression in \"" + templateTranslation + "\" message.");
-                            }
-                            // Create the comment node that will anchor the ICU expression
-                            var icuNodeIndex = allocNodeIndex(startIndex);
-                            createOpCodes.push(COMMENT_MARKER, ngDevMode ? "ICU " + icuNodeIndex : '', icuNodeIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
-                            // Update codes for the ICU expression
-                            var mask = getBindingMask(icuExpression);
-                            icuStart(icuExpressions, icuExpression, icuNodeIndex, icuNodeIndex);
-                            // Since this is recursive, the last TIcu that was pushed is the one we want
-                            var tIcuIndex = icuExpressions.length - 1;
-                            updateOpCodes.push(toMaskBit(icuExpression.mainBinding), // mask of the main binding
-                            3, // skip 3 opCodes if not changed
-                            -1 - icuExpression.mainBinding, icuNodeIndex << 2 /* SHIFT_REF */ | 2 /* IcuSwitch */, tIcuIndex, mask, // mask of all the bindings of this ICU expression
-                            2, // skip 2 opCodes if not changed
-                            icuNodeIndex << 2 /* SHIFT_REF */ | 3 /* IcuUpdate */, tIcuIndex);
+            }
+            else {
+                switch (opCode) {
+                    case COMMENT_MARKER:
+                        var commentValue = createOpCodes[++i];
+                        var commentNodeIndex = createOpCodes[++i];
+                        ngDevMode &&
+                            assertEqual(typeof commentValue, 'string', "Expected \"" + commentValue + "\" to be a comment node value");
+                        var commentRNode = renderer.createComment(commentValue);
+                        ngDevMode && ngDevMode.rendererCreateComment++;
+                        previousTNode = currentTNode;
+                        currentTNode = createDynamicNodeAtIndex(tView, lView, commentNodeIndex, 5 /* IcuContainer */, commentRNode, null);
+                        visitedNodes.push(commentNodeIndex);
+                        attachPatchData(commentRNode, lView);
+                        // We will add the case nodes later, during the update phase
+                        setIsNotParent();
+                        break;
+                    case ELEMENT_MARKER:
+                        var tagNameValue = createOpCodes[++i];
+                        var elementNodeIndex = createOpCodes[++i];
+                        ngDevMode &&
+                            assertEqual(typeof tagNameValue, 'string', "Expected \"" + tagNameValue + "\" to be an element node tag name");
+                        var elementRNode = renderer.createElement(tagNameValue);
+                        ngDevMode && ngDevMode.rendererCreateElement++;
+                        previousTNode = currentTNode;
+                        currentTNode = createDynamicNodeAtIndex(tView, lView, elementNodeIndex, 3 /* Element */, elementRNode, tagNameValue);
+                        visitedNodes.push(elementNodeIndex);
+                        break;
+                    default:
+                        throw new Error("Unable to determine the type of mutate operation for \"" + opCode + "\"");
+                }
+            }
+        }
+        setIsNotParent();
+        return visitedNodes;
+    }
+    /**
+     * Apply `I18nUpdateOpCodes` OpCodes
+     *
+     * @param tView Current `TView`
+     * @param tIcus If ICUs present than this contains them.
+     * @param lView Current `LView`
+     * @param updateOpCodes OpCodes to process
+     * @param bindingsStartIndex Location of the first `ɵɵi18nApply`
+     * @param changeMask Each bit corresponds to a `ɵɵi18nExp` (Counting backwards from
+     *     `bindingsStartIndex`)
+     */
+    function applyUpdateOpCodes(tView, tIcus, lView, updateOpCodes, bindingsStartIndex, changeMask) {
+        var caseCreated = false;
+        for (var i = 0; i < updateOpCodes.length; i++) {
+            // bit code to check if we should apply the next update
+            var checkBit = updateOpCodes[i];
+            // Number of opCodes to skip until next set of update codes
+            var skipCodes = updateOpCodes[++i];
+            if (checkBit & changeMask) {
+                // The value has been updated since last checked
+                var value = '';
+                for (var j = i + 1; j <= (i + skipCodes); j++) {
+                    var opCode = updateOpCodes[j];
+                    if (typeof opCode == 'string') {
+                        value += opCode;
+                    }
+                    else if (typeof opCode == 'number') {
+                        if (opCode < 0) {
+                            // Negative opCode represent `i18nExp` values offset.
+                            value += renderStringify(lView[bindingsStartIndex - opCode]);
                         }
-                        else if (parts[j] !== '') {
-                            var text = parts[j];
-                            // Even indexes are text (including bindings)
-                            var hasBinding = text.match(BINDING_REGEXP);
-                            // Create text nodes
-                            var textNodeIndex = allocNodeIndex(startIndex);
-                            createOpCodes.push(
-                            // If there is a binding, the value will be set during update
-                            hasBinding ? '' : text, textNodeIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
-                            if (hasBinding) {
-                                addAllToArray(generateBindingUpdateOpCodes(text, textNodeIndex), updateOpCodes);
+                        else {
+                            var nodeIndex = opCode >>> 2 /* SHIFT_REF */;
+                            switch (opCode & 3 /* MASK_OPCODE */) {
+                                case 1 /* Attr */:
+                                    var propName = updateOpCodes[++j];
+                                    var sanitizeFn = updateOpCodes[++j];
+                                    elementPropertyInternal(tView, getTNode(tView, nodeIndex), lView, propName, value, lView[RENDERER], sanitizeFn, false);
+                                    break;
+                                case 0 /* Text */:
+                                    textBindingInternal(lView, nodeIndex, value);
+                                    break;
+                                case 2 /* IcuSwitch */:
+                                    caseCreated =
+                                        applyIcuSwitchCase(tView, tIcus, updateOpCodes[++j], lView, value);
+                                    break;
+                                case 3 /* IcuUpdate */:
+                                    applyIcuUpdateCase(tView, tIcus, updateOpCodes[++j], bindingsStartIndex, lView, caseCreated);
+                                    break;
                             }
                         }
                     }
                 }
             }
+            i += skipCodes;
         }
-        if (i18nVarsCount > 0) {
-            allocExpando(tView, lView, i18nVarsCount);
+    }
+    /**
+     * Apply OpCodes associated with updating an existing ICU.
+     *
+     * @param tView Current `TView`
+     * @param tIcus ICUs active at this location.
+     * @param tIcuIndex Index into `tIcus` to process.
+     * @param bindingsStartIndex Location of the first `ɵɵi18nApply`
+     * @param lView Current `LView`
+     * @param changeMask Each bit corresponds to a `ɵɵi18nExp` (Counting backwards from
+     *     `bindingsStartIndex`)
+     */
+    function applyIcuUpdateCase(tView, tIcus, tIcuIndex, bindingsStartIndex, lView, caseCreated) {
+        ngDevMode && assertIndexInRange(tIcus, tIcuIndex);
+        var tIcu = tIcus[tIcuIndex];
+        ngDevMode && assertIndexInRange(lView, tIcu.currentCaseLViewIndex);
+        var activeCaseIndex = lView[tIcu.currentCaseLViewIndex];
+        if (activeCaseIndex !== null) {
+            var mask = caseCreated ?
+                -1 : // -1 is same as all bits on, which simulates creation since it marks all bits dirty
+                changeMask;
+            applyUpdateOpCodes(tView, tIcus, lView, tIcu.update[activeCaseIndex], bindingsStartIndex, mask);
         }
-        ngDevMode &&
-            attachI18nOpCodesDebug(createOpCodes, updateOpCodes, icuExpressions.length ? icuExpressions : null, lView);
-        // NOTE: local var needed to properly assert the type of `TI18n`.
-        var tI18n = {
-            vars: i18nVarsCount,
-            create: createOpCodes,
-            update: updateOpCodes,
-            icus: icuExpressions.length ? icuExpressions : null,
-        };
-        tView.data[index + HEADER_OFFSET] = tI18n;
     }
-    function appendI18nNode(tView, tNode, parentTNode, previousTNode, lView) {
-        ngDevMode && ngDevMode.rendererMoveNode++;
-        var nextNode = tNode.next;
-        if (!previousTNode) {
-            previousTNode = parentTNode;
+    /**
+     * Apply OpCodes associated with switching a case on ICU.
+     *
+     * This involves tearing down existing case and than building up a new case.
+     *
+     * @param tView Current `TView`
+     * @param tIcus ICUs active at this location.
+     * @param tICuIndex Index into `tIcus` to process.
+     * @param lView Current `LView`
+     * @param value Value of the case to update to.
+     * @returns true if a new case was created (needed so that the update executes regardless of the
+     *     bitmask)
+     */
+    function applyIcuSwitchCase(tView, tIcus, tICuIndex, lView, value) {
+        applyIcuSwitchCaseRemove(tView, tIcus, tICuIndex, lView);
+        // Rebuild a new case for this ICU
+        var caseCreated = false;
+        var tIcu = tIcus[tICuIndex];
+        var caseIndex = getCaseIndex(tIcu, value);
+        lView[tIcu.currentCaseLViewIndex] = caseIndex !== -1 ? caseIndex : null;
+        if (caseIndex > -1) {
+            // Add the nodes for the new case
+            applyCreateOpCodes(tView, -1, // -1 means we don't have parent node
+            tIcu.create[caseIndex], lView);
+            caseCreated = true;
+        }
+        return caseCreated;
+    }
+    /**
+     * Apply OpCodes associated with tearing down of DOM.
+     *
+     * This involves tearing down existing case and than building up a new case.
+     *
+     * @param tView Current `TView`
+     * @param tIcus ICUs active at this location.
+     * @param tIcuIndex Index into `tIcus` to process.
+     * @param lView Current `LView`
+     * @returns true if a new case was created (needed so that the update executes regardless of the
+     *     bitmask)
+     */
+    function applyIcuSwitchCaseRemove(tView, tIcus, tIcuIndex, lView) {
+        ngDevMode && assertIndexInRange(tIcus, tIcuIndex);
+        var tIcu = tIcus[tIcuIndex];
+        var activeCaseIndex = lView[tIcu.currentCaseLViewIndex];
+        if (activeCaseIndex !== null) {
+            var removeCodes = tIcu.remove[activeCaseIndex];
+            for (var k = 0; k < removeCodes.length; k++) {
+                var removeOpCode = removeCodes[k];
+                var nodeOrIcuIndex = removeOpCode >>> 3 /* SHIFT_REF */;
+                switch (removeOpCode & 7 /* MASK_INSTRUCTION */) {
+                    case 3 /* Remove */:
+                        // FIXME(misko): this comment is wrong!
+                        // Remove DOM element, but do *not* mark TNode as detached, since we are
+                        // just switching ICU cases (while keeping the same TNode), so a DOM element
+                        // representing a new ICU case will be re-created.
+                        removeNode(tView, lView, nodeOrIcuIndex, /* markAsDetached */ false);
+                        break;
+                    case 6 /* RemoveNestedIcu */:
+                        applyIcuSwitchCaseRemove(tView, tIcus, nodeOrIcuIndex, lView);
+                        break;
+                }
+            }
+        }
+    }
+    function appendI18nNode(tView, tNode, parentTNode, previousTNode, lView) {
+        ngDevMode && ngDevMode.rendererMoveNode++;
+        var nextNode = tNode.next;
+        if (!previousTNode) {
+            previousTNode = parentTNode;
         }
         // Re-organize node tree to put this node in the correct position.
         if (previousTNode === parentTNode && tNode !== parentTNode.child) {
@@ -23721,9 +23595,901 @@
         }
         return tNode;
     }
-    function isRootTemplateMessage(subTemplateIndex) {
-        return subTemplateIndex === undefined;
+    /**
+     * See `i18nEnd` above.
+     */
+    function i18nEndFirstPass(tView, lView) {
+        ngDevMode &&
+            assertEqual(getBindingIndex(), tView.bindingStartIndex, 'i18nEnd should be called before any binding');
+        var rootIndex = popI18nIndex();
+        var tI18n = tView.data[rootIndex + HEADER_OFFSET];
+        ngDevMode && assertDefined(tI18n, "You should call i18nStart before i18nEnd");
+        // Find the last node that was added before `i18nEnd`
+        var lastCreatedNode = getPreviousOrParentTNode();
+        // Read the instructions to insert/move/remove DOM elements
+        var visitedNodes = applyCreateOpCodes(tView, rootIndex, tI18n.create, lView);
+        // Remove deleted nodes
+        var index = rootIndex + 1;
+        while (index <= lastCreatedNode.index - HEADER_OFFSET) {
+            if (visitedNodes.indexOf(index) === -1) {
+                removeNode(tView, lView, index, /* markAsDetached */ true);
+            }
+            // Check if an element has any local refs and skip them
+            var tNode = getTNode(tView, index);
+            if (tNode &&
+                (tNode.type === 0 /* Container */ || tNode.type === 3 /* Element */ ||
+                    tNode.type === 4 /* ElementContainer */) &&
+                tNode.localNames !== null) {
+                // Divide by 2 to get the number of local refs,
+                // since they are stored as an array that also includes directive indexes,
+                // i.e. ["localRef", directiveIndex, ...]
+                index += tNode.localNames.length >> 1;
+            }
+            index++;
+        }
+    }
+    function removeNode(tView, lView, index, markAsDetached) {
+        var removedPhTNode = getTNode(tView, index);
+        var removedPhRNode = getNativeByIndex(index, lView);
+        if (removedPhRNode) {
+            nativeRemoveNode(lView[RENDERER], removedPhRNode);
+        }
+        var slotValue = load(lView, index);
+        if (isLContainer(slotValue)) {
+            var lContainer = slotValue;
+            if (removedPhTNode.type !== 0 /* Container */) {
+                nativeRemoveNode(lView[RENDERER], lContainer[NATIVE]);
+            }
+        }
+        if (markAsDetached) {
+            // Define this node as detached to avoid projecting it later
+            removedPhTNode.flags |= 64 /* isDetached */;
+        }
+        ngDevMode && ngDevMode.rendererRemoveNode++;
+    }
+    /**
+     * Creates and stores the dynamic TNode, and unhooks it from the tree for now.
+     */
+    function createDynamicNodeAtIndex(tView, lView, index, type, native, name) {
+        var previousOrParentTNode = getPreviousOrParentTNode();
+        ngDevMode && assertIndexInRange(lView, index + HEADER_OFFSET);
+        lView[index + HEADER_OFFSET] = native;
+        // FIXME(misko): Why does this create A TNode??? I would not expect this to be here.
+        var tNode = getOrCreateTNode(tView, lView[T_HOST], index, type, name, null);
+        // We are creating a dynamic node, the previous tNode might not be pointing at this node.
+        // We will link ourselves into the tree later with `appendI18nNode`.
+        if (previousOrParentTNode && previousOrParentTNode.next === tNode) {
+            previousOrParentTNode.next = null;
+        }
+        return tNode;
+    }
+    /**
+     * Returns the index of the current case of an ICU expression depending on the main binding value
+     *
+     * @param icuExpression
+     * @param bindingValue The value of the main binding used by this ICU expression
+     */
+    function getCaseIndex(icuExpression, bindingValue) {
+        var index = icuExpression.cases.indexOf(bindingValue);
+        if (index === -1) {
+            switch (icuExpression.type) {
+                case 1 /* plural */: {
+                    var resolvedCase = getPluralCase(bindingValue, getLocaleId());
+                    index = icuExpression.cases.indexOf(resolvedCase);
+                    if (index === -1 && resolvedCase !== 'other') {
+                        index = icuExpression.cases.indexOf('other');
+                    }
+                    break;
+                }
+                case 0 /* select */: {
+                    index = icuExpression.cases.indexOf('other');
+                    break;
+                }
+            }
+        }
+        return index;
+    }
+
+    /**
+     * @license
+     * Copyright Google LLC All Rights Reserved.
+     *
+     * 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
+     */
+    /**
+     * Converts `I18nUpdateOpCodes` array into a human readable format.
+     *
+     * This function is attached to the `I18nUpdateOpCodes.debug` property if `ngDevMode` is enabled.
+     * This function provides a human readable view of the opcodes. This is useful when debugging the
+     * application as well as writing more readable tests.
+     *
+     * @param this `I18nUpdateOpCodes` if attached as a method.
+     * @param opcodes `I18nUpdateOpCodes` if invoked as a function.
+     */
+    function i18nUpdateOpCodesToString(opcodes) {
+        var parser = new OpCodeParser(opcodes || (Array.isArray(this) ? this : []));
+        var lines = [];
+        function consumeOpCode(value) {
+            var ref = value >>> 2 /* SHIFT_REF */;
+            var opCode = value & 3 /* MASK_OPCODE */;
+            switch (opCode) {
+                case 0 /* Text */:
+                    return "(lView[" + ref + "] as Text).textContent = $$$";
+                case 1 /* Attr */:
+                    var attrName = parser.consumeString();
+                    var sanitizationFn = parser.consumeFunction();
+                    var value_1 = sanitizationFn ? "(" + sanitizationFn + ")($$$)" : '$$$';
+                    return "(lView[" + ref + "] as Element).setAttribute('" + attrName + "', " + value_1 + ")";
+                case 2 /* IcuSwitch */:
+                    return "icuSwitchCase(lView[" + ref + "] as Comment, " + parser.consumeNumber() + ", $$$)";
+                case 3 /* IcuUpdate */:
+                    return "icuUpdateCase(lView[" + ref + "] as Comment, " + parser.consumeNumber() + ")";
+            }
+            throw new Error('unexpected OpCode');
+        }
+        while (parser.hasMore()) {
+            var mask = parser.consumeNumber();
+            var size = parser.consumeNumber();
+            var end = parser.i + size;
+            var statements = [];
+            var statement = '';
+            while (parser.i < end) {
+                var value = parser.consumeNumberOrString();
+                if (typeof value === 'string') {
+                    statement += value;
+                }
+                else if (value < 0) {
+                    // Negative numbers are ref indexes
+                    statement += '${lView[' + (0 - value) + ']}';
+                }
+                else {
+                    // Positive numbers are operations.
+                    var opCodeText = consumeOpCode(value);
+                    statements.push(opCodeText.replace('$$$', '`' + statement + '`') + ';');
+                    statement = '';
+                }
+            }
+            lines.push("if (mask & 0b" + mask.toString(2) + ") { " + statements.join(' ') + " }");
+        }
+        return lines;
+    }
+    /**
+     * Converts `I18nMutableOpCodes` array into a human readable format.
+     *
+     * This function is attached to the `I18nMutableOpCodes.debug` if `ngDevMode` is enabled. This
+     * function provides a human readable view of the opcodes. This is useful when debugging the
+     * application as well as writing more readable tests.
+     *
+     * @param this `I18nMutableOpCodes` if attached as a method.
+     * @param opcodes `I18nMutableOpCodes` if invoked as a function.
+     */
+    function i18nMutateOpCodesToString(opcodes) {
+        var parser = new OpCodeParser(opcodes || (Array.isArray(this) ? this : []));
+        var lines = [];
+        function consumeOpCode(opCode) {
+            var parent = getParentFromI18nMutateOpCode(opCode);
+            var ref = getRefFromI18nMutateOpCode(opCode);
+            switch (getInstructionFromI18nMutateOpCode(opCode)) {
+                case 0 /* Select */:
+                    lastRef = ref;
+                    return '';
+                case 1 /* AppendChild */:
+                    return "(lView[" + parent + "] as Element).appendChild(lView[" + lastRef + "])";
+                case 3 /* Remove */:
+                    return "(lView[" + parent + "] as Element).remove(lView[" + ref + "])";
+                case 4 /* Attr */:
+                    return "(lView[" + ref + "] as Element).setAttribute(\"" + parser.consumeString() + "\", \"" + parser.consumeString() + "\")";
+                case 5 /* ElementEnd */:
+                    return "setPreviousOrParentTNode(tView.data[" + ref + "] as TNode)";
+                case 6 /* RemoveNestedIcu */:
+                    return "removeNestedICU(" + ref + ")";
+            }
+            throw new Error('Unexpected OpCode');
+        }
+        var lastRef = -1;
+        while (parser.hasMore()) {
+            var value = parser.consumeNumberStringOrMarker();
+            if (value === COMMENT_MARKER) {
+                var text = parser.consumeString();
+                lastRef = parser.consumeNumber();
+                lines.push("lView[" + lastRef + "] = document.createComment(\"" + text + "\")");
+            }
+            else if (value === ELEMENT_MARKER) {
+                var text = parser.consumeString();
+                lastRef = parser.consumeNumber();
+                lines.push("lView[" + lastRef + "] = document.createElement(\"" + text + "\")");
+            }
+            else if (typeof value === 'string') {
+                lastRef = parser.consumeNumber();
+                lines.push("lView[" + lastRef + "] = document.createTextNode(\"" + value + "\")");
+            }
+            else if (typeof value === 'number') {
+                var line = consumeOpCode(value);
+                line && lines.push(line);
+            }
+            else {
+                throw new Error('Unexpected value');
+            }
+        }
+        return lines;
+    }
+    var OpCodeParser = /** @class */ (function () {
+        function OpCodeParser(codes) {
+            this.i = 0;
+            this.codes = codes;
+        }
+        OpCodeParser.prototype.hasMore = function () {
+            return this.i < this.codes.length;
+        };
+        OpCodeParser.prototype.consumeNumber = function () {
+            var value = this.codes[this.i++];
+            assertNumber(value, 'expecting number in OpCode');
+            return value;
+        };
+        OpCodeParser.prototype.consumeString = function () {
+            var value = this.codes[this.i++];
+            assertString(value, 'expecting string in OpCode');
+            return value;
+        };
+        OpCodeParser.prototype.consumeFunction = function () {
+            var value = this.codes[this.i++];
+            if (value === null || typeof value === 'function') {
+                return value;
+            }
+            throw new Error('expecting function in OpCode');
+        };
+        OpCodeParser.prototype.consumeNumberOrString = function () {
+            var value = this.codes[this.i++];
+            if (typeof value === 'string') {
+                return value;
+            }
+            assertNumber(value, 'expecting number or string in OpCode');
+            return value;
+        };
+        OpCodeParser.prototype.consumeNumberStringOrMarker = function () {
+            var value = this.codes[this.i++];
+            if (typeof value === 'string' || typeof value === 'number' || value == COMMENT_MARKER ||
+                value == ELEMENT_MARKER) {
+                return value;
+            }
+            assertNumber(value, 'expecting number, string, COMMENT_MARKER or ELEMENT_MARKER in OpCode');
+            return value;
+        };
+        return OpCodeParser;
+    }());
+
+    var BINDING_REGEXP = /�(\d+):?\d*�/gi;
+    var ICU_REGEXP = /({\s*�\d+:?\d*�\s*,\s*\S{6}\s*,[\s\S]*})/gi;
+    var NESTED_ICU = /�(\d+)�/;
+    var ICU_BLOCK_REGEXP = /^\s*(�\d+:?\d*�)\s*,\s*(select|plural)\s*,/;
+    // Count for the number of vars that will be allocated for each i18n block.
+    // It is global because this is used in multiple functions that include loops and recursive calls.
+    // This is reset to 0 when `i18nStartFirstPass` is called.
+    var i18nVarsCount;
+    var parentIndexStack = [];
+    var MARKER = "\uFFFD";
+    var SUBTEMPLATE_REGEXP = /�\/?\*(\d+:\d+)�/gi;
+    var PH_REGEXP = /�(\/?[#*!]\d+):?\d*�/gi;
+    /**
+     * Angular Dart introduced &ngsp; as a placeholder for non-removable space, see:
+     * https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart#L25-L32
+     * In Angular Dart &ngsp; is converted to the 0xE500 PUA (Private Use Areas) unicode character
+     * and later on replaced by a space. We are re-implementing the same idea here, since translations
+     * might contain this special character.
+     */
+    var NGSP_UNICODE_REGEXP = /\uE500/g;
+    function replaceNgsp(value) {
+        return value.replace(NGSP_UNICODE_REGEXP, ' ');
     }
+    /**
+     * See `i18nStart` above.
+     */
+    function i18nStartFirstPass(lView, tView, index, message, subTemplateIndex) {
+        var startIndex = tView.blueprint.length - HEADER_OFFSET;
+        i18nVarsCount = 0;
+        var previousOrParentTNode = getPreviousOrParentTNode();
+        var parentTNode = getIsParent() ? previousOrParentTNode : previousOrParentTNode && previousOrParentTNode.parent;
+        var parentIndex = parentTNode && parentTNode !== lView[T_HOST] ? parentTNode.index - HEADER_OFFSET : index;
+        var parentIndexPointer = 0;
+        parentIndexStack[parentIndexPointer] = parentIndex;
+        var createOpCodes = [];
+        if (ngDevMode) {
+            attachDebugGetter(createOpCodes, i18nMutateOpCodesToString);
+        }
+        // If the previous node wasn't the direct parent then we have a translation without top level
+        // element and we need to keep a reference of the previous element if there is one. We should also
+        // keep track whether an element was a parent node or not, so that the logic that consumes
+        // the generated `I18nMutateOpCode`s can leverage this information to properly set TNode state
+        // (whether it's a parent or sibling).
+        if (index > 0 && previousOrParentTNode !== parentTNode) {
+            var previousTNodeIndex = previousOrParentTNode.index - HEADER_OFFSET;
+            // If current TNode is a sibling node, encode it using a negative index. This information is
+            // required when the `Select` action is processed (see the `readCreateOpCodes` function).
+            if (!getIsParent()) {
+                previousTNodeIndex = ~previousTNodeIndex;
+            }
+            // Create an OpCode to select the previous TNode
+            createOpCodes.push(previousTNodeIndex << 3 /* SHIFT_REF */ | 0 /* Select */);
+        }
+        var updateOpCodes = [];
+        if (ngDevMode) {
+            attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString);
+        }
+        var icuExpressions = [];
+        if (message === '' && isRootTemplateMessage(subTemplateIndex)) {
+            // If top level translation is an empty string, do not invoke additional processing
+            // and just create op codes for empty text node instead.
+            createOpCodes.push(message, allocNodeIndex(startIndex), parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+        }
+        else {
+            var templateTranslation = getTranslationForTemplate(message, subTemplateIndex);
+            var msgParts = replaceNgsp(templateTranslation).split(PH_REGEXP);
+            for (var i = 0; i < msgParts.length; i++) {
+                var value = msgParts[i];
+                if (i & 1) {
+                    // Odd indexes are placeholders (elements and sub-templates)
+                    if (value.charAt(0) === '/') {
+                        // It is a closing tag
+                        if (value.charAt(1) === "#" /* ELEMENT */) {
+                            var phIndex = parseInt(value.substr(2), 10);
+                            parentIndex = parentIndexStack[--parentIndexPointer];
+                            createOpCodes.push(phIndex << 3 /* SHIFT_REF */ | 5 /* ElementEnd */);
+                        }
+                    }
+                    else {
+                        var phIndex = parseInt(value.substr(1), 10);
+                        var isElement = value.charAt(0) === "#" /* ELEMENT */;
+                        // The value represents a placeholder that we move to the designated index.
+                        // Note: positive indicies indicate that a TNode with a given index should also be marked
+                        // as parent while executing `Select` instruction.
+                        createOpCodes.push((isElement ? phIndex : ~phIndex) << 3 /* SHIFT_REF */ |
+                            0 /* Select */, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+                        if (isElement) {
+                            parentIndexStack[++parentIndexPointer] = parentIndex = phIndex;
+                        }
+                    }
+                }
+                else {
+                    // Even indexes are text (including bindings & ICU expressions)
+                    var parts = extractParts(value);
+                    for (var j = 0; j < parts.length; j++) {
+                        if (j & 1) {
+                            // Odd indexes are ICU expressions
+                            var icuExpression = parts[j];
+                            // Verify that ICU expression has the right shape. Translations might contain invalid
+                            // constructions (while original messages were correct), so ICU parsing at runtime may
+                            // not succeed (thus `icuExpression` remains a string).
+                            if (typeof icuExpression !== 'object') {
+                                throw new Error("Unable to parse ICU expression in \"" + templateTranslation + "\" message.");
+                            }
+                            // Create the comment node that will anchor the ICU expression
+                            var icuNodeIndex = allocNodeIndex(startIndex);
+                            createOpCodes.push(COMMENT_MARKER, ngDevMode ? "ICU " + icuNodeIndex : '', icuNodeIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+                            // Update codes for the ICU expression
+                            var mask = getBindingMask(icuExpression);
+                            icuStart(icuExpressions, icuExpression, icuNodeIndex, icuNodeIndex);
+                            // Since this is recursive, the last TIcu that was pushed is the one we want
+                            var tIcuIndex = icuExpressions.length - 1;
+                            updateOpCodes.push(toMaskBit(icuExpression.mainBinding), // mask of the main binding
+                            3, // skip 3 opCodes if not changed
+                            -1 - icuExpression.mainBinding, icuNodeIndex << 2 /* SHIFT_REF */ | 2 /* IcuSwitch */, tIcuIndex, mask, // mask of all the bindings of this ICU expression
+                            2, // skip 2 opCodes if not changed
+                            icuNodeIndex << 2 /* SHIFT_REF */ | 3 /* IcuUpdate */, tIcuIndex);
+                        }
+                        else if (parts[j] !== '') {
+                            var text = parts[j];
+                            // Even indexes are text (including bindings)
+                            var hasBinding = text.match(BINDING_REGEXP);
+                            // Create text nodes
+                            var textNodeIndex = allocNodeIndex(startIndex);
+                            createOpCodes.push(
+                            // If there is a binding, the value will be set during update
+                            hasBinding ? '' : text, textNodeIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+                            if (hasBinding) {
+                                addAllToArray(generateBindingUpdateOpCodes(text, textNodeIndex), updateOpCodes);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (i18nVarsCount > 0) {
+            allocExpando(tView, lView, i18nVarsCount);
+        }
+        // NOTE: local var needed to properly assert the type of `TI18n`.
+        var tI18n = {
+            vars: i18nVarsCount,
+            create: createOpCodes,
+            update: updateOpCodes,
+            icus: icuExpressions.length ? icuExpressions : null,
+        };
+        tView.data[index + HEADER_OFFSET] = tI18n;
+    }
+    /**
+     * See `i18nAttributes` above.
+     */
+    function i18nAttributesFirstPass(lView, tView, index, values) {
+        var previousElement = getPreviousOrParentTNode();
+        var previousElementIndex = previousElement.index - HEADER_OFFSET;
+        var updateOpCodes = [];
+        if (ngDevMode) {
+            attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString);
+        }
+        for (var i = 0; i < values.length; i += 2) {
+            var attrName = values[i];
+            var message = values[i + 1];
+            var parts = message.split(ICU_REGEXP);
+            for (var j = 0; j < parts.length; j++) {
+                var value = parts[j];
+                if (j & 1) {
+                    // Odd indexes are ICU expressions
+                    // TODO(ocombe): support ICU expressions in attributes
+                    throw new Error('ICU expressions are not yet supported in attributes');
+                }
+                else if (value !== '') {
+                    // Even indexes are text (including bindings)
+                    var hasBinding = !!value.match(BINDING_REGEXP);
+                    if (hasBinding) {
+                        if (tView.firstCreatePass && tView.data[index + HEADER_OFFSET] === null) {
+                            addAllToArray(generateBindingUpdateOpCodes(value, previousElementIndex, attrName), updateOpCodes);
+                        }
+                    }
+                    else {
+                        var tNode = getTNode(tView, previousElementIndex);
+                        // Set attributes for Elements only, for other types (like ElementContainer),
+                        // only set inputs below
+                        if (tNode.type === 3 /* Element */) {
+                            elementAttributeInternal(tNode, lView, attrName, value, null, null);
+                        }
+                        // Check if that attribute is a directive input
+                        var dataValue = tNode.inputs !== null && tNode.inputs[attrName];
+                        if (dataValue) {
+                            setInputsForProperty(tView, lView, dataValue, attrName, value);
+                            if (ngDevMode) {
+                                var element = getNativeByIndex(previousElementIndex, lView);
+                                setNgReflectProperties(lView, element, tNode.type, dataValue, value);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (tView.firstCreatePass && tView.data[index + HEADER_OFFSET] === null) {
+            tView.data[index + HEADER_OFFSET] = updateOpCodes;
+        }
+    }
+    /**
+     * Generate the OpCodes to update the bindings of a string.
+     *
+     * @param str The string containing the bindings.
+     * @param destinationNode Index of the destination node which will receive the binding.
+     * @param attrName Name of the attribute, if the string belongs to an attribute.
+     * @param sanitizeFn Sanitization function used to sanitize the string after update, if necessary.
+     */
+    function generateBindingUpdateOpCodes(str, destinationNode, attrName, sanitizeFn) {
+        if (sanitizeFn === void 0) { sanitizeFn = null; }
+        var updateOpCodes = [null, null]; // Alloc space for mask and size
+        if (ngDevMode) {
+            attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString);
+        }
+        var textParts = str.split(BINDING_REGEXP);
+        var mask = 0;
+        for (var j = 0; j < textParts.length; j++) {
+            var textValue = textParts[j];
+            if (j & 1) {
+                // Odd indexes are bindings
+                var bindingIndex = parseInt(textValue, 10);
+                updateOpCodes.push(-1 - bindingIndex);
+                mask = mask | toMaskBit(bindingIndex);
+            }
+            else if (textValue !== '') {
+                // Even indexes are text
+                updateOpCodes.push(textValue);
+            }
+        }
+        updateOpCodes.push(destinationNode << 2 /* SHIFT_REF */ |
+            (attrName ? 1 /* Attr */ : 0 /* Text */));
+        if (attrName) {
+            updateOpCodes.push(attrName, sanitizeFn);
+        }
+        updateOpCodes[0] = mask;
+        updateOpCodes[1] = updateOpCodes.length - 2;
+        return updateOpCodes;
+    }
+    function getBindingMask(icuExpression, mask) {
+        if (mask === void 0) { mask = 0; }
+        mask = mask | toMaskBit(icuExpression.mainBinding);
+        var match;
+        for (var i = 0; i < icuExpression.values.length; i++) {
+            var valueArr = icuExpression.values[i];
+            for (var j = 0; j < valueArr.length; j++) {
+                var value = valueArr[j];
+                if (typeof value === 'string') {
+                    while (match = BINDING_REGEXP.exec(value)) {
+                        mask = mask | toMaskBit(parseInt(match[1], 10));
+                    }
+                }
+                else {
+                    mask = getBindingMask(value, mask);
+                }
+            }
+        }
+        return mask;
+    }
+    function allocNodeIndex(startIndex) {
+        return startIndex + i18nVarsCount++;
+    }
+    /**
+     * Convert binding index to mask bit.
+     *
+     * Each index represents a single bit on the bit-mask. Because bit-mask only has 32 bits, we make
+     * the 32nd bit share all masks for all bindings higher than 32. Since it is extremely rare to have
+     * more than 32 bindings this will be hit very rarely. The downside of hitting this corner case is
+     * that we will execute binding code more often than necessary. (penalty of performance)
+     */
+    function toMaskBit(bindingIndex) {
+        return 1 << Math.min(bindingIndex, 31);
+    }
+    function isRootTemplateMessage(subTemplateIndex) {
+        return subTemplateIndex === undefined;
+    }
+    /**
+     * Removes everything inside the sub-templates of a message.
+     */
+    function removeInnerTemplateTranslation(message) {
+        var match;
+        var res = '';
+        var index = 0;
+        var inTemplate = false;
+        var tagMatched;
+        while ((match = SUBTEMPLATE_REGEXP.exec(message)) !== null) {
+            if (!inTemplate) {
+                res += message.substring(index, match.index + match[0].length);
+                tagMatched = match[1];
+                inTemplate = true;
+            }
+            else {
+                if (match[0] === MARKER + "/*" + tagMatched + MARKER) {
+                    index = match.index;
+                    inTemplate = false;
+                }
+            }
+        }
+        ngDevMode &&
+            assertEqual(inTemplate, false, "Tag mismatch: unable to find the end of the sub-template in the translation \"" + message + "\"");
+        res += message.substr(index);
+        return res;
+    }
+    /**
+     * Extracts a part of a message and removes the rest.
+     *
+     * This method is used for extracting a part of the message associated with a template. A translated
+     * message can span multiple templates.
+     *
+     * Example:
+     * ```
+     * <div i18n>Translate <span *ngIf>me</span>!</div>
+     * ```
+     *
+     * @param message The message to crop
+     * @param subTemplateIndex Index of the sub-template to extract. If undefined it returns the
+     * external template and removes all sub-templates.
+     */
+    function getTranslationForTemplate(message, subTemplateIndex) {
+        if (isRootTemplateMessage(subTemplateIndex)) {
+            // We want the root template message, ignore all sub-templates
+            return removeInnerTemplateTranslation(message);
+        }
+        else {
+            // We want a specific sub-template
+            var start = message.indexOf(":" + subTemplateIndex + MARKER) + 2 + subTemplateIndex.toString().length;
+            var end = message.search(new RegExp(MARKER + "\\/\\*\\d+:" + subTemplateIndex + MARKER));
+            return removeInnerTemplateTranslation(message.substring(start, end));
+        }
+    }
+    /**
+     * Generate the OpCodes for ICU expressions.
+     *
+     * @param tIcus
+     * @param icuExpression
+     * @param startIndex
+     * @param expandoStartIndex
+     */
+    function icuStart(tIcus, icuExpression, startIndex, expandoStartIndex) {
+        var createCodes = [];
+        var removeCodes = [];
+        var updateCodes = [];
+        var vars = [];
+        var childIcus = [];
+        var values = icuExpression.values;
+        for (var i = 0; i < values.length; i++) {
+            // Each value is an array of strings & other ICU expressions
+            var valueArr = values[i];
+            var nestedIcus = [];
+            for (var j = 0; j < valueArr.length; j++) {
+                var value = valueArr[j];
+                if (typeof value !== 'string') {
+                    // It is an nested ICU expression
+                    var icuIndex = nestedIcus.push(value) - 1;
+                    // Replace nested ICU expression by a comment node
+                    valueArr[j] = "<!--\uFFFD" + icuIndex + "\uFFFD-->";
+                }
+            }
+            var icuCase = parseIcuCase(valueArr.join(''), startIndex, nestedIcus, tIcus, expandoStartIndex);
+            createCodes.push(icuCase.create);
+            removeCodes.push(icuCase.remove);
+            updateCodes.push(icuCase.update);
+            vars.push(icuCase.vars);
+            childIcus.push(icuCase.childIcus);
+        }
+        var tIcu = {
+            type: icuExpression.type,
+            vars: vars,
+            currentCaseLViewIndex: HEADER_OFFSET +
+                expandoStartIndex // expandoStartIndex does not include the header so add it.
+                + 1,
+            childIcus: childIcus,
+            cases: icuExpression.cases,
+            create: createCodes,
+            remove: removeCodes,
+            update: updateCodes
+        };
+        tIcus.push(tIcu);
+        // Adding the maximum possible of vars needed (based on the cases with the most vars)
+        i18nVarsCount += Math.max.apply(Math, __spread(vars));
+    }
+    /**
+     * Parses text containing an ICU expression and produces a JSON object for it.
+     * Original code from closure library, modified for Angular.
+     *
+     * @param pattern Text containing an ICU expression that needs to be parsed.
+     *
+     */
+    function parseICUBlock(pattern) {
+        var cases = [];
+        var values = [];
+        var icuType = 1 /* plural */;
+        var mainBinding = 0;
+        pattern = pattern.replace(ICU_BLOCK_REGEXP, function (str, binding, type) {
+            if (type === 'select') {
+                icuType = 0 /* select */;
+            }
+            else {
+                icuType = 1 /* plural */;
+            }
+            mainBinding = parseInt(binding.substr(1), 10);
+            return '';
+        });
+        var parts = extractParts(pattern);
+        // Looking for (key block)+ sequence. One of the keys has to be "other".
+        for (var pos = 0; pos < parts.length;) {
+            var key = parts[pos++].trim();
+            if (icuType === 1 /* plural */) {
+                // Key can be "=x", we just want "x"
+                key = key.replace(/\s*(?:=)?(\w+)\s*/, '$1');
+            }
+            if (key.length) {
+                cases.push(key);
+            }
+            var blocks = extractParts(parts[pos++]);
+            if (cases.length > values.length) {
+                values.push(blocks);
+            }
+        }
+        // TODO(ocombe): support ICU expressions in attributes, see #21615
+        return { type: icuType, mainBinding: mainBinding, cases: cases, values: values };
+    }
+    /**
+     * Transforms a string template into an HTML template and a list of instructions used to update
+     * attributes or nodes that contain bindings.
+     *
+     * @param unsafeHtml The string to parse
+     * @param parentIndex
+     * @param nestedIcus
+     * @param tIcus
+     * @param expandoStartIndex
+     */
+    function parseIcuCase(unsafeHtml, parentIndex, nestedIcus, tIcus, expandoStartIndex) {
+        var inertBodyHelper = getInertBodyHelper(getDocument());
+        var inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeHtml);
+        if (!inertBodyElement) {
+            throw new Error('Unable to generate inert body element');
+        }
+        var wrapper = getTemplateContent(inertBodyElement) || inertBodyElement;
+        var opCodes = {
+            vars: 1,
+            childIcus: [],
+            create: [],
+            remove: [],
+            update: []
+        };
+        if (ngDevMode) {
+            attachDebugGetter(opCodes.create, i18nMutateOpCodesToString);
+            attachDebugGetter(opCodes.remove, i18nMutateOpCodesToString);
+            attachDebugGetter(opCodes.update, i18nUpdateOpCodesToString);
+        }
+        parseNodes(wrapper.firstChild, opCodes, parentIndex, nestedIcus, tIcus, expandoStartIndex);
+        return opCodes;
+    }
+    /**
+     * Breaks pattern into strings and top level {...} blocks.
+     * Can be used to break a message into text and ICU expressions, or to break an ICU expression into
+     * keys and cases.
+     * Original code from closure library, modified for Angular.
+     *
+     * @param pattern (sub)Pattern to be broken.
+     *
+     */
+    function extractParts(pattern) {
+        if (!pattern) {
+            return [];
+        }
+        var prevPos = 0;
+        var braceStack = [];
+        var results = [];
+        var braces = /[{}]/g;
+        // lastIndex doesn't get set to 0 so we have to.
+        braces.lastIndex = 0;
+        var match;
+        while (match = braces.exec(pattern)) {
+            var pos = match.index;
+            if (match[0] == '}') {
+                braceStack.pop();
+                if (braceStack.length == 0) {
+                    // End of the block.
+                    var block = pattern.substring(prevPos, pos);
+                    if (ICU_BLOCK_REGEXP.test(block)) {
+                        results.push(parseICUBlock(block));
+                    }
+                    else {
+                        results.push(block);
+                    }
+                    prevPos = pos + 1;
+                }
+            }
+            else {
+                if (braceStack.length == 0) {
+                    var substring_1 = pattern.substring(prevPos, pos);
+                    results.push(substring_1);
+                    prevPos = pos + 1;
+                }
+                braceStack.push('{');
+            }
+        }
+        var substring = pattern.substring(prevPos);
+        results.push(substring);
+        return results;
+    }
+    /**
+     * Parses a node, its children and its siblings, and generates the mutate & update OpCodes.
+     *
+     * @param currentNode The first node to parse
+     * @param icuCase The data for the ICU expression case that contains those nodes
+     * @param parentIndex Index of the current node's parent
+     * @param nestedIcus Data for the nested ICU expressions that this case contains
+     * @param tIcus Data for all ICU expressions of the current message
+     * @param expandoStartIndex Expando start index for the current ICU expression
+     */
+    function parseNodes(currentNode, icuCase, parentIndex, nestedIcus, tIcus, expandoStartIndex) {
+        if (currentNode) {
+            var nestedIcusToCreate = [];
+            while (currentNode) {
+                var nextNode = currentNode.nextSibling;
+                var newIndex = expandoStartIndex + ++icuCase.vars;
+                switch (currentNode.nodeType) {
+                    case Node.ELEMENT_NODE:
+                        var element = currentNode;
+                        var tagName = element.tagName.toLowerCase();
+                        if (!VALID_ELEMENTS.hasOwnProperty(tagName)) {
+                            // This isn't a valid element, we won't create an element for it
+                            icuCase.vars--;
+                        }
+                        else {
+                            icuCase.create.push(ELEMENT_MARKER, tagName, newIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+                            var elAttrs = element.attributes;
+                            for (var i = 0; i < elAttrs.length; i++) {
+                                var attr = elAttrs.item(i);
+                                var lowerAttrName = attr.name.toLowerCase();
+                                var hasBinding_1 = !!attr.value.match(BINDING_REGEXP);
+                                // we assume the input string is safe, unless it's using a binding
+                                if (hasBinding_1) {
+                                    if (VALID_ATTRS.hasOwnProperty(lowerAttrName)) {
+                                        if (URI_ATTRS[lowerAttrName]) {
+                                            addAllToArray(generateBindingUpdateOpCodes(attr.value, newIndex, attr.name, _sanitizeUrl), icuCase.update);
+                                        }
+                                        else if (SRCSET_ATTRS[lowerAttrName]) {
+                                            addAllToArray(generateBindingUpdateOpCodes(attr.value, newIndex, attr.name, sanitizeSrcset), icuCase.update);
+                                        }
+                                        else {
+                                            addAllToArray(generateBindingUpdateOpCodes(attr.value, newIndex, attr.name), icuCase.update);
+                                        }
+                                    }
+                                    else {
+                                        ngDevMode &&
+                                            console.warn("WARNING: ignoring unsafe attribute value " + lowerAttrName + " on element " + tagName + " (see http://g.co/ng/security#xss)");
+                                    }
+                                }
+                                else {
+                                    icuCase.create.push(newIndex << 3 /* SHIFT_REF */ | 4 /* Attr */, attr.name, attr.value);
+                                }
+                            }
+                            // Parse the children of this node (if any)
+                            parseNodes(currentNode.firstChild, icuCase, newIndex, nestedIcus, tIcus, expandoStartIndex);
+                            // Remove the parent node after the children
+                            icuCase.remove.push(newIndex << 3 /* SHIFT_REF */ | 3 /* Remove */);
+                        }
+                        break;
+                    case Node.TEXT_NODE:
+                        var value = currentNode.textContent || '';
+                        var hasBinding = value.match(BINDING_REGEXP);
+                        icuCase.create.push(hasBinding ? '' : value, newIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+                        icuCase.remove.push(newIndex << 3 /* SHIFT_REF */ | 3 /* Remove */);
+                        if (hasBinding) {
+                            addAllToArray(generateBindingUpdateOpCodes(value, newIndex), icuCase.update);
+                        }
+                        break;
+                    case Node.COMMENT_NODE:
+                        // Check if the comment node is a placeholder for a nested ICU
+                        var match = NESTED_ICU.exec(currentNode.textContent || '');
+                        if (match) {
+                            var nestedIcuIndex = parseInt(match[1], 10);
+                            var newLocal = ngDevMode ? "nested ICU " + nestedIcuIndex : '';
+                            // Create the comment node that will anchor the ICU expression
+                            icuCase.create.push(COMMENT_MARKER, newLocal, newIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
+                            var nestedIcu = nestedIcus[nestedIcuIndex];
+                            nestedIcusToCreate.push([nestedIcu, newIndex]);
+                        }
+                        else {
+                            // We do not handle any other type of comment
+                            icuCase.vars--;
+                        }
+                        break;
+                    default:
+                        // We do not handle any other type of element
+                        icuCase.vars--;
+                }
+                currentNode = nextNode;
+            }
+            for (var i = 0; i < nestedIcusToCreate.length; i++) {
+                var nestedIcu = nestedIcusToCreate[i][0];
+                var nestedIcuNodeIndex = nestedIcusToCreate[i][1];
+                icuStart(tIcus, nestedIcu, nestedIcuNodeIndex, expandoStartIndex + icuCase.vars);
+                // Since this is recursive, the last TIcu that was pushed is the one we want
+                var nestTIcuIndex = tIcus.length - 1;
+                icuCase.vars += Math.max.apply(Math, __spread(tIcus[nestTIcuIndex].vars));
+                icuCase.childIcus.push(nestTIcuIndex);
+                var mask = getBindingMask(nestedIcu);
+                icuCase.update.push(toMaskBit(nestedIcu.mainBinding), // mask of the main binding
+                3, // skip 3 opCodes if not changed
+                -1 - nestedIcu.mainBinding, nestedIcuNodeIndex << 2 /* SHIFT_REF */ | 2 /* IcuSwitch */, 
+                // FIXME(misko): Index should be part of the opcode
+                nestTIcuIndex, mask, // mask of all the bindings of this ICU expression
+                2, // skip 2 opCodes if not changed
+                nestedIcuNodeIndex << 2 /* SHIFT_REF */ | 3 /* IcuUpdate */, nestTIcuIndex);
+                icuCase.remove.push(nestTIcuIndex << 3 /* SHIFT_REF */ | 6 /* RemoveNestedIcu */, 
+                // FIXME(misko): Index should be part of the opcode
+                nestedIcuNodeIndex << 3 /* SHIFT_REF */ | 3 /* Remove */);
+            }
+        }
+    }
+
+    /**
+     * @license
+     * Copyright Google LLC All Rights Reserved.
+     *
+     * 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
+     */
+    // i18nPostprocess consts
+    var ROOT_TEMPLATE_ID = 0;
+    var PP_MULTI_VALUE_PLACEHOLDERS_REGEXP = /\[(�.+?�?)\]/;
+    var PP_PLACEHOLDERS_REGEXP = /\[(�.+?�?)\]|(�\/?\*\d+:\d+�)/g;
+    var PP_ICU_VARS_REGEXP = /({\s*)(VAR_(PLURAL|SELECT)(_\d+)?)(\s*,)/g;
+    var PP_ICU_PLACEHOLDERS_REGEXP = /{([A-Z0-9_]+)}/g;
+    var PP_ICUS_REGEXP = /�I18N_EXP_(ICU(_\d+)?)�/g;
+    var PP_CLOSE_TEMPLATE_REGEXP = /\/\*/;
+    var PP_TEMPLATE_ID_REGEXP = /\d+\:(\d+)/;
     /**
      * Handles message string post-processing for internationalization.
      *
@@ -23744,7 +24510,7 @@
      *
      * @codeGenApi
      */
-    function ɵɵi18nPostprocess(message, replacements) {
+    function i18nPostprocess(message, replacements) {
         if (replacements === void 0) { replacements = {}; }
         /**
          * Step 1: resolve all multi-value placeholders like [�#5�|�*1:1��#2:1�|�#4:1�]
@@ -23774,337 +24540,73 @@
                 }
                 if (!placeholders.length) {
                     throw new Error("i18n postprocess: unmatched placeholder - " + content);
-                }
-                var currentTemplateId = templateIdsStack_1[templateIdsStack_1.length - 1];
-                var idx = 0;
-                // find placeholder index that matches current template id
-                for (var i = 0; i < placeholders.length; i++) {
-                    if (placeholders[i][0] === currentTemplateId) {
-                        idx = i;
-                        break;
-                    }
-                }
-                // update template id stack based on the current tag extracted
-                var _a = __read(placeholders[idx], 3), templateId = _a[0], isCloseTemplateTag = _a[1], placeholder = _a[2];
-                if (isCloseTemplateTag) {
-                    templateIdsStack_1.pop();
-                }
-                else if (currentTemplateId !== templateId) {
-                    templateIdsStack_1.push(templateId);
-                }
-                // remove processed tag from the list
-                placeholders.splice(idx, 1);
-                return placeholder;
-            });
-        }
-        // return current result if no replacements specified
-        if (!Object.keys(replacements).length) {
-            return result;
-        }
-        /**
-         * Step 2: replace all ICU vars (like "VAR_PLURAL")
-         */
-        result = result.replace(PP_ICU_VARS_REGEXP, function (match, start, key, _type, _idx, end) {
-            return replacements.hasOwnProperty(key) ? "" + start + replacements[key] + end : match;
-        });
-        /**
-         * Step 3: replace all placeholders used inside ICUs in a form of {PLACEHOLDER}
-         */
-        result = result.replace(PP_ICU_PLACEHOLDERS_REGEXP, function (match, key) {
-            return replacements.hasOwnProperty(key) ? replacements[key] : match;
-        });
-        /**
-         * Step 4: replace all ICU references with corresponding values (like �ICU_EXP_ICU_1�) in case
-         * multiple ICUs have the same placeholder name
-         */
-        result = result.replace(PP_ICUS_REGEXP, function (match, key) {
-            if (replacements.hasOwnProperty(key)) {
-                var list = replacements[key];
-                if (!list.length) {
-                    throw new Error("i18n postprocess: unmatched ICU - " + match + " with key: " + key);
-                }
-                return list.shift();
-            }
-            return match;
-        });
-        return result;
-    }
-    /**
-     * Translates a translation block marked by `i18nStart` and `i18nEnd`. It inserts the text/ICU nodes
-     * into the render tree, moves the placeholder nodes and removes the deleted nodes.
-     *
-     * @codeGenApi
-     */
-    function ɵɵi18nEnd() {
-        var lView = getLView();
-        var tView = getTView();
-        ngDevMode && assertDefined(tView, "tView should be defined");
-        i18nEndFirstPass(tView, lView);
-        // Stop delaying projections
-        setDelayProjection(false);
-    }
-    /**
-     * See `i18nEnd` above.
-     */
-    function i18nEndFirstPass(tView, lView) {
-        ngDevMode &&
-            assertEqual(getBindingIndex(), tView.bindingStartIndex, 'i18nEnd should be called before any binding');
-        var rootIndex = i18nIndexStack[i18nIndexStackPointer--];
-        var tI18n = tView.data[rootIndex + HEADER_OFFSET];
-        ngDevMode && assertDefined(tI18n, "You should call i18nStart before i18nEnd");
-        // Find the last node that was added before `i18nEnd`
-        var lastCreatedNode = getPreviousOrParentTNode();
-        // Read the instructions to insert/move/remove DOM elements
-        var visitedNodes = readCreateOpCodes(rootIndex, tI18n.create, tView, lView);
-        // Remove deleted nodes
-        var index = rootIndex + 1;
-        while (index <= lastCreatedNode.index - HEADER_OFFSET) {
-            if (visitedNodes.indexOf(index) === -1) {
-                removeNode(tView, lView, index, /* markAsDetached */ true);
-            }
-            // Check if an element has any local refs and skip them
-            var tNode = getTNode(tView, index);
-            if (tNode &&
-                (tNode.type === 0 /* Container */ || tNode.type === 3 /* Element */ ||
-                    tNode.type === 4 /* ElementContainer */) &&
-                tNode.localNames !== null) {
-                // Divide by 2 to get the number of local refs,
-                // since they are stored as an array that also includes directive indexes,
-                // i.e. ["localRef", directiveIndex, ...]
-                index += tNode.localNames.length >> 1;
-            }
-            index++;
-        }
-    }
-    /**
-     * Creates and stores the dynamic TNode, and unhooks it from the tree for now.
-     */
-    function createDynamicNodeAtIndex(tView, lView, index, type, native, name) {
-        var previousOrParentTNode = getPreviousOrParentTNode();
-        ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
-        lView[index + HEADER_OFFSET] = native;
-        var tNode = getOrCreateTNode(tView, lView[T_HOST], index, type, name, null);
-        // We are creating a dynamic node, the previous tNode might not be pointing at this node.
-        // We will link ourselves into the tree later with `appendI18nNode`.
-        if (previousOrParentTNode && previousOrParentTNode.next === tNode) {
-            previousOrParentTNode.next = null;
-        }
-        return tNode;
-    }
-    function readCreateOpCodes(index, createOpCodes, tView, lView) {
-        var renderer = lView[RENDERER];
-        var currentTNode = null;
-        var previousTNode = null;
-        var visitedNodes = [];
-        for (var i = 0; i < createOpCodes.length; i++) {
-            var opCode = createOpCodes[i];
-            if (typeof opCode == 'string') {
-                var textRNode = createTextNode(opCode, renderer);
-                var textNodeIndex = createOpCodes[++i];
-                ngDevMode && ngDevMode.rendererCreateTextNode++;
-                previousTNode = currentTNode;
-                currentTNode =
-                    createDynamicNodeAtIndex(tView, lView, textNodeIndex, 3 /* Element */, textRNode, null);
-                visitedNodes.push(textNodeIndex);
-                setIsNotParent();
-            }
-            else if (typeof opCode == 'number') {
-                switch (opCode & 7 /* MASK_OPCODE */) {
-                    case 1 /* AppendChild */:
-                        var destinationNodeIndex = opCode >>> 17 /* SHIFT_PARENT */;
-                        var destinationTNode = void 0;
-                        if (destinationNodeIndex === index) {
-                            // If the destination node is `i18nStart`, we don't have a
-                            // top-level node and we should use the host node instead
-                            destinationTNode = lView[T_HOST];
-                        }
-                        else {
-                            destinationTNode = getTNode(tView, destinationNodeIndex);
-                        }
-                        ngDevMode &&
-                            assertDefined(currentTNode, "You need to create or select a node before you can insert it into the DOM");
-                        previousTNode =
-                            appendI18nNode(tView, currentTNode, destinationTNode, previousTNode, lView);
-                        break;
-                    case 0 /* Select */:
-                        // Negative indicies indicate that a given TNode is a sibling node, not a parent node
-                        // (see `i18nStartFirstPass` for additional information).
-                        var isParent = opCode >= 0;
-                        var nodeIndex = (isParent ? opCode : ~opCode) >>> 3 /* SHIFT_REF */;
-                        visitedNodes.push(nodeIndex);
-                        previousTNode = currentTNode;
-                        currentTNode = getTNode(tView, nodeIndex);
-                        if (currentTNode) {
-                            setPreviousOrParentTNode(currentTNode, isParent);
-                        }
-                        break;
-                    case 5 /* ElementEnd */:
-                        var elementIndex = opCode >>> 3 /* SHIFT_REF */;
-                        previousTNode = currentTNode = getTNode(tView, elementIndex);
-                        setPreviousOrParentTNode(currentTNode, false);
-                        break;
-                    case 4 /* Attr */:
-                        var elementNodeIndex = opCode >>> 3 /* SHIFT_REF */;
-                        var attrName = createOpCodes[++i];
-                        var attrValue = createOpCodes[++i];
-                        // This code is used for ICU expressions only, since we don't support
-                        // directives/components in ICUs, we don't need to worry about inputs here
-                        elementAttributeInternal(getTNode(tView, elementNodeIndex), lView, attrName, attrValue, null, null);
-                        break;
-                    default:
-                        throw new Error("Unable to determine the type of mutate operation for \"" + opCode + "\"");
-                }
-            }
-            else {
-                switch (opCode) {
-                    case COMMENT_MARKER:
-                        var commentValue = createOpCodes[++i];
-                        var commentNodeIndex = createOpCodes[++i];
-                        ngDevMode &&
-                            assertEqual(typeof commentValue, 'string', "Expected \"" + commentValue + "\" to be a comment node value");
-                        var commentRNode = renderer.createComment(commentValue);
-                        ngDevMode && ngDevMode.rendererCreateComment++;
-                        previousTNode = currentTNode;
-                        currentTNode = createDynamicNodeAtIndex(tView, lView, commentNodeIndex, 5 /* IcuContainer */, commentRNode, null);
-                        visitedNodes.push(commentNodeIndex);
-                        attachPatchData(commentRNode, lView);
-                        currentTNode.activeCaseIndex = null;
-                        // We will add the case nodes later, during the update phase
-                        setIsNotParent();
-                        break;
-                    case ELEMENT_MARKER:
-                        var tagNameValue = createOpCodes[++i];
-                        var elementNodeIndex = createOpCodes[++i];
-                        ngDevMode &&
-                            assertEqual(typeof tagNameValue, 'string', "Expected \"" + tagNameValue + "\" to be an element node tag name");
-                        var elementRNode = renderer.createElement(tagNameValue);
-                        ngDevMode && ngDevMode.rendererCreateElement++;
-                        previousTNode = currentTNode;
-                        currentTNode = createDynamicNodeAtIndex(tView, lView, elementNodeIndex, 3 /* Element */, elementRNode, tagNameValue);
-                        visitedNodes.push(elementNodeIndex);
-                        break;
-                    default:
-                        throw new Error("Unable to determine the type of mutate operation for \"" + opCode + "\"");
-                }
-            }
-        }
-        setIsNotParent();
-        return visitedNodes;
-    }
-    function readUpdateOpCodes(updateOpCodes, icus, bindingsStartIndex, changeMask, tView, lView, bypassCheckBit) {
-        if (bypassCheckBit === void 0) { bypassCheckBit = false; }
-        var caseCreated = false;
-        for (var i = 0; i < updateOpCodes.length; i++) {
-            // bit code to check if we should apply the next update
-            var checkBit = updateOpCodes[i];
-            // Number of opCodes to skip until next set of update codes
-            var skipCodes = updateOpCodes[++i];
-            if (bypassCheckBit || (checkBit & changeMask)) {
-                // The value has been updated since last checked
-                var value = '';
-                for (var j = i + 1; j <= (i + skipCodes); j++) {
-                    var opCode = updateOpCodes[j];
-                    if (typeof opCode == 'string') {
-                        value += opCode;
-                    }
-                    else if (typeof opCode == 'number') {
-                        if (opCode < 0) {
-                            // It's a binding index whose value is negative
-                            value += renderStringify(lView[bindingsStartIndex - opCode]);
-                        }
-                        else {
-                            var nodeIndex = opCode >>> 2 /* SHIFT_REF */;
-                            var tIcuIndex = void 0;
-                            var tIcu = void 0;
-                            var icuTNode = void 0;
-                            switch (opCode & 3 /* MASK_OPCODE */) {
-                                case 1 /* Attr */:
-                                    var propName = updateOpCodes[++j];
-                                    var sanitizeFn = updateOpCodes[++j];
-                                    elementPropertyInternal(tView, getTNode(tView, nodeIndex), lView, propName, value, lView[RENDERER], sanitizeFn, false);
-                                    break;
-                                case 0 /* Text */:
-                                    textBindingInternal(lView, nodeIndex, value);
-                                    break;
-                                case 2 /* IcuSwitch */:
-                                    tIcuIndex = updateOpCodes[++j];
-                                    tIcu = icus[tIcuIndex];
-                                    icuTNode = getTNode(tView, nodeIndex);
-                                    // If there is an active case, delete the old nodes
-                                    if (icuTNode.activeCaseIndex !== null) {
-                                        var removeCodes = tIcu.remove[icuTNode.activeCaseIndex];
-                                        for (var k = 0; k < removeCodes.length; k++) {
-                                            var removeOpCode = removeCodes[k];
-                                            switch (removeOpCode & 7 /* MASK_OPCODE */) {
-                                                case 3 /* Remove */:
-                                                    var nodeIndex_1 = removeOpCode >>> 3 /* SHIFT_REF */;
-                                                    // Remove DOM element, but do *not* mark TNode as detached, since we are
-                                                    // just switching ICU cases (while keeping the same TNode), so a DOM element
-                                                    // representing a new ICU case will be re-created.
-                                                    removeNode(tView, lView, nodeIndex_1, /* markAsDetached */ false);
-                                                    break;
-                                                case 6 /* RemoveNestedIcu */:
-                                                    var nestedIcuNodeIndex = removeCodes[k + 1] >>> 3 /* SHIFT_REF */;
-                                                    var nestedIcuTNode = getTNode(tView, nestedIcuNodeIndex);
-                                                    var activeIndex = nestedIcuTNode.activeCaseIndex;
-                                                    if (activeIndex !== null) {
-                                                        var nestedIcuTIndex = removeOpCode >>> 3 /* SHIFT_REF */;
-                                                        var nestedTIcu = icus[nestedIcuTIndex];
-                                                        addAllToArray(nestedTIcu.remove[activeIndex], removeCodes);
-                                                    }
-                                                    break;
-                                            }
-                                        }
-                                    }
-                                    // Update the active caseIndex
-                                    var caseIndex = getCaseIndex(tIcu, value);
-                                    icuTNode.activeCaseIndex = caseIndex !== -1 ? caseIndex : null;
-                                    if (caseIndex > -1) {
-                                        // Add the nodes for the new case
-                                        readCreateOpCodes(-1, tIcu.create[caseIndex], tView, lView);
-                                        caseCreated = true;
-                                    }
-                                    break;
-                                case 3 /* IcuUpdate */:
-                                    tIcuIndex = updateOpCodes[++j];
-                                    tIcu = icus[tIcuIndex];
-                                    icuTNode = getTNode(tView, nodeIndex);
-                                    if (icuTNode.activeCaseIndex !== null) {
-                                        readUpdateOpCodes(tIcu.update[icuTNode.activeCaseIndex], icus, bindingsStartIndex, changeMask, tView, lView, caseCreated);
-                                    }
-                                    break;
-                            }
-                        }
+                }
+                var currentTemplateId = templateIdsStack_1[templateIdsStack_1.length - 1];
+                var idx = 0;
+                // find placeholder index that matches current template id
+                for (var i = 0; i < placeholders.length; i++) {
+                    if (placeholders[i][0] === currentTemplateId) {
+                        idx = i;
+                        break;
                     }
                 }
-            }
-            i += skipCodes;
+                // update template id stack based on the current tag extracted
+                var _a = __read(placeholders[idx], 3), templateId = _a[0], isCloseTemplateTag = _a[1], placeholder = _a[2];
+                if (isCloseTemplateTag) {
+                    templateIdsStack_1.pop();
+                }
+                else if (currentTemplateId !== templateId) {
+                    templateIdsStack_1.push(templateId);
+                }
+                // remove processed tag from the list
+                placeholders.splice(idx, 1);
+                return placeholder;
+            });
         }
-    }
-    function removeNode(tView, lView, index, markAsDetached) {
-        var removedPhTNode = getTNode(tView, index);
-        var removedPhRNode = getNativeByIndex(index, lView);
-        if (removedPhRNode) {
-            nativeRemoveNode(lView[RENDERER], removedPhRNode);
+        // return current result if no replacements specified
+        if (!Object.keys(replacements).length) {
+            return result;
         }
-        var slotValue = load(lView, index);
-        if (isLContainer(slotValue)) {
-            var lContainer = slotValue;
-            if (removedPhTNode.type !== 0 /* Container */) {
-                nativeRemoveNode(lView[RENDERER], lContainer[NATIVE]);
+        /**
+         * Step 2: replace all ICU vars (like "VAR_PLURAL")
+         */
+        result = result.replace(PP_ICU_VARS_REGEXP, function (match, start, key, _type, _idx, end) {
+            return replacements.hasOwnProperty(key) ? "" + start + replacements[key] + end : match;
+        });
+        /**
+         * Step 3: replace all placeholders used inside ICUs in a form of {PLACEHOLDER}
+         */
+        result = result.replace(PP_ICU_PLACEHOLDERS_REGEXP, function (match, key) {
+            return replacements.hasOwnProperty(key) ? replacements[key] : match;
+        });
+        /**
+         * Step 4: replace all ICU references with corresponding values (like �ICU_EXP_ICU_1�) in case
+         * multiple ICUs have the same placeholder name
+         */
+        result = result.replace(PP_ICUS_REGEXP, function (match, key) {
+            if (replacements.hasOwnProperty(key)) {
+                var list = replacements[key];
+                if (!list.length) {
+                    throw new Error("i18n postprocess: unmatched ICU - " + match + " with key: " + key);
+                }
+                return list.shift();
             }
-        }
-        if (markAsDetached) {
-            // Define this node as detached to avoid projecting it later
-            removedPhTNode.flags |= 64 /* isDetached */;
-        }
-        ngDevMode && ngDevMode.rendererRemoveNode++;
+            return match;
+        });
+        return result;
     }
+
     /**
+     * @license
+     * Copyright Google LLC All Rights Reserved.
      *
-     * Use this instruction to create a translation block that doesn't contain any placeholder.
-     * It calls both {@link i18nStart} and {@link i18nEnd} in one instruction.
+     * 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
+     */
+    /**
+     * Marks a block of text as translatable.
      *
+     * The instructions `i18nStart` and `i18nEnd` mark the translation block in the template.
      * The translation `message` is the value which is locale specific. The translation string may
      * contain placeholders which associate inner elements and sub-templates within the translation.
      *
@@ -24116,6 +24618,10 @@
      *   and end of DOM element that were embedded in the original translation block. The placeholder
      *   `index` points to the element index in the template instructions set. An optional `block` that
      *   matches the sub-template in which it was declared.
+     * - `�!{index}(:{block})�`/`�/!{index}(:{block})�`: *Projection Placeholder*:  Marks the
+     *   beginning and end of <ng-content> that was embedded in the original translation block.
+     *   The placeholder `index` points to the element index in the template instructions set.
+     *   An optional `block` that matches the sub-template in which it was declared.
      * - `�*{index}:{block}�`/`�/*{index}:{block}�`: *Sub-template Placeholder*: Sub-templates must be
      *   split up and translated separately in each angular template function. The `index` points to the
      *   `template` instruction index. A `block` that matches the sub-template in which it was declared.
@@ -24126,364 +24632,123 @@
      *
      * @codeGenApi
      */
-    function ɵɵi18n(index, message, subTemplateIndex) {
-        ɵɵi18nStart(index, message, subTemplateIndex);
-        ɵɵi18nEnd();
-    }
-    /**
-     * Marks a list of attributes as translatable.
-     *
-     * @param index A unique index in the static block
-     * @param values
-     *
-     * @codeGenApi
-     */
-    function ɵɵi18nAttributes(index, values) {
-        var lView = getLView();
-        var tView = getTView();
-        ngDevMode && assertDefined(tView, "tView should be defined");
-        i18nAttributesFirstPass(lView, tView, index, values);
-    }
-    /**
-     * See `i18nAttributes` above.
-     */
-    function i18nAttributesFirstPass(lView, tView, index, values) {
-        var previousElement = getPreviousOrParentTNode();
-        var previousElementIndex = previousElement.index - HEADER_OFFSET;
-        var updateOpCodes = [];
-        for (var i = 0; i < values.length; i += 2) {
-            var attrName = values[i];
-            var message = values[i + 1];
-            var parts = message.split(ICU_REGEXP);
-            for (var j = 0; j < parts.length; j++) {
-                var value = parts[j];
-                if (j & 1) {
-                    // Odd indexes are ICU expressions
-                    // TODO(ocombe): support ICU expressions in attributes
-                    throw new Error('ICU expressions are not yet supported in attributes');
-                }
-                else if (value !== '') {
-                    // Even indexes are text (including bindings)
-                    var hasBinding = !!value.match(BINDING_REGEXP);
-                    if (hasBinding) {
-                        if (tView.firstCreatePass && tView.data[index + HEADER_OFFSET] === null) {
-                            addAllToArray(generateBindingUpdateOpCodes(value, previousElementIndex, attrName), updateOpCodes);
-                        }
-                    }
-                    else {
-                        var tNode = getTNode(tView, previousElementIndex);
-                        // Set attributes for Elements only, for other types (like ElementContainer),
-                        // only set inputs below
-                        if (tNode.type === 3 /* Element */) {
-                            elementAttributeInternal(tNode, lView, attrName, value, null, null);
-                        }
-                        // Check if that attribute is a directive input
-                        var dataValue = tNode.inputs !== null && tNode.inputs[attrName];
-                        if (dataValue) {
-                            setInputsForProperty(tView, lView, dataValue, attrName, value);
-                            if (ngDevMode) {
-                                var element = getNativeByIndex(previousElementIndex, lView);
-                                setNgReflectProperties(lView, element, tNode.type, dataValue, value);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        if (tView.firstCreatePass && tView.data[index + HEADER_OFFSET] === null) {
-            tView.data[index + HEADER_OFFSET] = updateOpCodes;
-        }
-    }
-    var changeMask = 0;
-    var shiftsCounter = 0;
-    /**
-     * Stores the values of the bindings during each update cycle in order to determine if we need to
-     * update the translated nodes.
-     *
-     * @param value The binding's value
-     * @returns This function returns itself so that it may be chained
-     * (e.g. `i18nExp(ctx.name)(ctx.title)`)
-     *
-     * @codeGenApi
-     */
-    function ɵɵi18nExp(value) {
-        var lView = getLView();
-        if (bindingUpdated(lView, nextBindingIndex(), value)) {
-            changeMask = changeMask | (1 << shiftsCounter);
-        }
-        shiftsCounter++;
-        return ɵɵi18nExp;
-    }
-    /**
-     * Updates a translation block or an i18n attribute when the bindings have changed.
-     *
-     * @param index Index of either {@link i18nStart} (translation block) or {@link i18nAttributes}
-     * (i18n attribute) on which it should update the content.
-     *
-     * @codeGenApi
-     */
-    function ɵɵi18nApply(index) {
-        if (shiftsCounter) {
-            var tView = getTView();
-            ngDevMode && assertDefined(tView, "tView should be defined");
-            var tI18n = tView.data[index + HEADER_OFFSET];
-            var updateOpCodes = void 0;
-            var icus = null;
-            if (Array.isArray(tI18n)) {
-                updateOpCodes = tI18n;
-            }
-            else {
-                updateOpCodes = tI18n.update;
-                icus = tI18n.icus;
-            }
-            var bindingsStartIndex = getBindingIndex() - shiftsCounter - 1;
-            var lView = getLView();
-            readUpdateOpCodes(updateOpCodes, icus, bindingsStartIndex, changeMask, tView, lView);
-            // Reset changeMask & maskBit to default for the next update cycle
-            changeMask = 0;
-            shiftsCounter = 0;
-        }
-    }
-    /**
-     * Returns the index of the current case of an ICU expression depending on the main binding value
-     *
-     * @param icuExpression
-     * @param bindingValue The value of the main binding used by this ICU expression
-     */
-    function getCaseIndex(icuExpression, bindingValue) {
-        var index = icuExpression.cases.indexOf(bindingValue);
-        if (index === -1) {
-            switch (icuExpression.type) {
-                case 1 /* plural */: {
-                    var resolvedCase = getPluralCase(bindingValue, getLocaleId());
-                    index = icuExpression.cases.indexOf(resolvedCase);
-                    if (index === -1 && resolvedCase !== 'other') {
-                        index = icuExpression.cases.indexOf('other');
-                    }
-                    break;
-                }
-                case 0 /* select */: {
-                    index = icuExpression.cases.indexOf('other');
-                    break;
-                }
-            }
-        }
-        return index;
-    }
-    /**
-     * Generate the OpCodes for ICU expressions.
-     *
-     * @param tIcus
-     * @param icuExpression
-     * @param startIndex
-     * @param expandoStartIndex
-     */
-    function icuStart(tIcus, icuExpression, startIndex, expandoStartIndex) {
-        var createCodes = [];
-        var removeCodes = [];
-        var updateCodes = [];
-        var vars = [];
-        var childIcus = [];
-        for (var i = 0; i < icuExpression.values.length; i++) {
-            // Each value is an array of strings & other ICU expressions
-            var valueArr = icuExpression.values[i];
-            var nestedIcus = [];
-            for (var j = 0; j < valueArr.length; j++) {
-                var value = valueArr[j];
-                if (typeof value !== 'string') {
-                    // It is an nested ICU expression
-                    var icuIndex = nestedIcus.push(value) - 1;
-                    // Replace nested ICU expression by a comment node
-                    valueArr[j] = "<!--\uFFFD" + icuIndex + "\uFFFD-->";
-                }
-            }
-            var icuCase = parseIcuCase(valueArr.join(''), startIndex, nestedIcus, tIcus, expandoStartIndex);
-            createCodes.push(icuCase.create);
-            removeCodes.push(icuCase.remove);
-            updateCodes.push(icuCase.update);
-            vars.push(icuCase.vars);
-            childIcus.push(icuCase.childIcus);
+    function ɵɵi18nStart(index, message, subTemplateIndex) {
+        var tView = getTView();
+        ngDevMode && assertDefined(tView, "tView should be defined");
+        pushI18nIndex(index);
+        // We need to delay projections until `i18nEnd`
+        setDelayProjection(true);
+        if (tView.firstCreatePass && tView.data[index + HEADER_OFFSET] === null) {
+            i18nStartFirstPass(getLView(), tView, index, message, subTemplateIndex);
         }
-        var tIcu = {
-            type: icuExpression.type,
-            vars: vars,
-            childIcus: childIcus,
-            cases: icuExpression.cases,
-            create: createCodes,
-            remove: removeCodes,
-            update: updateCodes
-        };
-        tIcus.push(tIcu);
-        // Adding the maximum possible of vars needed (based on the cases with the most vars)
-        i18nVarsCount += Math.max.apply(Math, __spread(vars));
     }
     /**
-     * Transforms a string template into an HTML template and a list of instructions used to update
-     * attributes or nodes that contain bindings.
+     * Translates a translation block marked by `i18nStart` and `i18nEnd`. It inserts the text/ICU nodes
+     * into the render tree, moves the placeholder nodes and removes the deleted nodes.
      *
-     * @param unsafeHtml The string to parse
-     * @param parentIndex
-     * @param nestedIcus
-     * @param tIcus
-     * @param expandoStartIndex
+     * @codeGenApi
      */
-    function parseIcuCase(unsafeHtml, parentIndex, nestedIcus, tIcus, expandoStartIndex) {
-        var inertBodyHelper = getInertBodyHelper(getDocument());
-        var inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeHtml);
-        if (!inertBodyElement) {
-            throw new Error('Unable to generate inert body element');
-        }
-        var wrapper = getTemplateContent(inertBodyElement) || inertBodyElement;
-        var opCodes = { vars: 0, childIcus: [], create: [], remove: [], update: [] };
-        parseNodes(wrapper.firstChild, opCodes, parentIndex, nestedIcus, tIcus, expandoStartIndex);
-        return opCodes;
+    function ɵɵi18nEnd() {
+        var lView = getLView();
+        var tView = getTView();
+        ngDevMode && assertDefined(tView, "tView should be defined");
+        i18nEndFirstPass(tView, lView);
+        // Stop delaying projections
+        setDelayProjection(false);
     }
-    var NESTED_ICU = /�(\d+)�/;
     /**
-     * Parses a node, its children and its siblings, and generates the mutate & update OpCodes.
      *
-     * @param currentNode The first node to parse
-     * @param icuCase The data for the ICU expression case that contains those nodes
-     * @param parentIndex Index of the current node's parent
-     * @param nestedIcus Data for the nested ICU expressions that this case contains
-     * @param tIcus Data for all ICU expressions of the current message
-     * @param expandoStartIndex Expando start index for the current ICU expression
+     * Use this instruction to create a translation block that doesn't contain any placeholder.
+     * It calls both {@link i18nStart} and {@link i18nEnd} in one instruction.
+     *
+     * The translation `message` is the value which is locale specific. The translation string may
+     * contain placeholders which associate inner elements and sub-templates within the translation.
+     *
+     * The translation `message` placeholders are:
+     * - `�{index}(:{block})�`: *Binding Placeholder*: Marks a location where an expression will be
+     *   interpolated into. The placeholder `index` points to the expression binding index. An optional
+     *   `block` that matches the sub-template in which it was declared.
+     * - `�#{index}(:{block})�`/`�/#{index}(:{block})�`: *Element Placeholder*:  Marks the beginning
+     *   and end of DOM element that were embedded in the original translation block. The placeholder
+     *   `index` points to the element index in the template instructions set. An optional `block` that
+     *   matches the sub-template in which it was declared.
+     * - `�*{index}:{block}�`/`�/*{index}:{block}�`: *Sub-template Placeholder*: Sub-templates must be
+     *   split up and translated separately in each angular template function. The `index` points to the
+     *   `template` instruction index. A `block` that matches the sub-template in which it was declared.
+     *
+     * @param index A unique index of the translation in the static block.
+     * @param message The translation message.
+     * @param subTemplateIndex Optional sub-template index in the `message`.
+     *
+     * @codeGenApi
      */
-    function parseNodes(currentNode, icuCase, parentIndex, nestedIcus, tIcus, expandoStartIndex) {
-        if (currentNode) {
-            var nestedIcusToCreate = [];
-            while (currentNode) {
-                var nextNode = currentNode.nextSibling;
-                var newIndex = expandoStartIndex + ++icuCase.vars;
-                switch (currentNode.nodeType) {
-                    case Node.ELEMENT_NODE:
-                        var element = currentNode;
-                        var tagName = element.tagName.toLowerCase();
-                        if (!VALID_ELEMENTS.hasOwnProperty(tagName)) {
-                            // This isn't a valid element, we won't create an element for it
-                            icuCase.vars--;
-                        }
-                        else {
-                            icuCase.create.push(ELEMENT_MARKER, tagName, newIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
-                            var elAttrs = element.attributes;
-                            for (var i = 0; i < elAttrs.length; i++) {
-                                var attr = elAttrs.item(i);
-                                var lowerAttrName = attr.name.toLowerCase();
-                                var hasBinding_1 = !!attr.value.match(BINDING_REGEXP);
-                                // we assume the input string is safe, unless it's using a binding
-                                if (hasBinding_1) {
-                                    if (VALID_ATTRS.hasOwnProperty(lowerAttrName)) {
-                                        if (URI_ATTRS[lowerAttrName]) {
-                                            addAllToArray(generateBindingUpdateOpCodes(attr.value, newIndex, attr.name, _sanitizeUrl), icuCase.update);
-                                        }
-                                        else if (SRCSET_ATTRS[lowerAttrName]) {
-                                            addAllToArray(generateBindingUpdateOpCodes(attr.value, newIndex, attr.name, sanitizeSrcset), icuCase.update);
-                                        }
-                                        else {
-                                            addAllToArray(generateBindingUpdateOpCodes(attr.value, newIndex, attr.name), icuCase.update);
-                                        }
-                                    }
-                                    else {
-                                        ngDevMode &&
-                                            console.warn("WARNING: ignoring unsafe attribute value " + lowerAttrName + " on element " + tagName + " (see http://g.co/ng/security#xss)");
-                                    }
-                                }
-                                else {
-                                    icuCase.create.push(newIndex << 3 /* SHIFT_REF */ | 4 /* Attr */, attr.name, attr.value);
-                                }
-                            }
-                            // Parse the children of this node (if any)
-                            parseNodes(currentNode.firstChild, icuCase, newIndex, nestedIcus, tIcus, expandoStartIndex);
-                            // Remove the parent node after the children
-                            icuCase.remove.push(newIndex << 3 /* SHIFT_REF */ | 3 /* Remove */);
-                        }
-                        break;
-                    case Node.TEXT_NODE:
-                        var value = currentNode.textContent || '';
-                        var hasBinding = value.match(BINDING_REGEXP);
-                        icuCase.create.push(hasBinding ? '' : value, newIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
-                        icuCase.remove.push(newIndex << 3 /* SHIFT_REF */ | 3 /* Remove */);
-                        if (hasBinding) {
-                            addAllToArray(generateBindingUpdateOpCodes(value, newIndex), icuCase.update);
-                        }
-                        break;
-                    case Node.COMMENT_NODE:
-                        // Check if the comment node is a placeholder for a nested ICU
-                        var match = NESTED_ICU.exec(currentNode.textContent || '');
-                        if (match) {
-                            var nestedIcuIndex = parseInt(match[1], 10);
-                            var newLocal = ngDevMode ? "nested ICU " + nestedIcuIndex : '';
-                            // Create the comment node that will anchor the ICU expression
-                            icuCase.create.push(COMMENT_MARKER, newLocal, newIndex, parentIndex << 17 /* SHIFT_PARENT */ | 1 /* AppendChild */);
-                            var nestedIcu = nestedIcus[nestedIcuIndex];
-                            nestedIcusToCreate.push([nestedIcu, newIndex]);
-                        }
-                        else {
-                            // We do not handle any other type of comment
-                            icuCase.vars--;
-                        }
-                        break;
-                    default:
-                        // We do not handle any other type of element
-                        icuCase.vars--;
-                }
-                currentNode = nextNode;
-            }
-            for (var i = 0; i < nestedIcusToCreate.length; i++) {
-                var nestedIcu = nestedIcusToCreate[i][0];
-                var nestedIcuNodeIndex = nestedIcusToCreate[i][1];
-                icuStart(tIcus, nestedIcu, nestedIcuNodeIndex, expandoStartIndex + icuCase.vars);
-                // Since this is recursive, the last TIcu that was pushed is the one we want
-                var nestTIcuIndex = tIcus.length - 1;
-                icuCase.vars += Math.max.apply(Math, __spread(tIcus[nestTIcuIndex].vars));
-                icuCase.childIcus.push(nestTIcuIndex);
-                var mask = getBindingMask(nestedIcu);
-                icuCase.update.push(toMaskBit(nestedIcu.mainBinding), // mask of the main binding
-                3, // skip 3 opCodes if not changed
-                -1 - nestedIcu.mainBinding, nestedIcuNodeIndex << 2 /* SHIFT_REF */ | 2 /* IcuSwitch */, nestTIcuIndex, mask, // mask of all the bindings of this ICU expression
-                2, // skip 2 opCodes if not changed
-                nestedIcuNodeIndex << 2 /* SHIFT_REF */ | 3 /* IcuUpdate */, nestTIcuIndex);
-                icuCase.remove.push(nestTIcuIndex << 3 /* SHIFT_REF */ | 6 /* RemoveNestedIcu */, nestedIcuNodeIndex << 3 /* SHIFT_REF */ | 3 /* Remove */);
-            }
-        }
+    function ɵɵi18n(index, message, subTemplateIndex) {
+        ɵɵi18nStart(index, message, subTemplateIndex);
+        ɵɵi18nEnd();
     }
     /**
-     * Angular Dart introduced &ngsp; as a placeholder for non-removable space, see:
-     * https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart#L25-L32
-     * In Angular Dart &ngsp; is converted to the 0xE500 PUA (Private Use Areas) unicode character
-     * and later on replaced by a space. We are re-implementing the same idea here, since translations
-     * might contain this special character.
+     * Marks a list of attributes as translatable.
+     *
+     * @param index A unique index in the static block
+     * @param values
+     *
+     * @codeGenApi
      */
-    var NGSP_UNICODE_REGEXP = /\uE500/g;
-    function replaceNgsp(value) {
-        return value.replace(NGSP_UNICODE_REGEXP, ' ');
+    function ɵɵi18nAttributes(index, values) {
+        var lView = getLView();
+        var tView = getTView();
+        ngDevMode && assertDefined(tView, "tView should be defined");
+        i18nAttributesFirstPass(lView, tView, index, values);
     }
     /**
-     * The locale id that the application is currently using (for translations and ICU expressions).
-     * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
-     * but is now defined as a global value.
+     * Stores the values of the bindings during each update cycle in order to determine if we need to
+     * update the translated nodes.
+     *
+     * @param value The binding's value
+     * @returns This function returns itself so that it may be chained
+     * (e.g. `i18nExp(ctx.name)(ctx.title)`)
+     *
+     * @codeGenApi
      */
-    var LOCALE_ID = DEFAULT_LOCALE_ID;
+    function ɵɵi18nExp(value) {
+        var lView = getLView();
+        setMaskBit(bindingUpdated(lView, nextBindingIndex(), value));
+        return ɵɵi18nExp;
+    }
     /**
-     * Sets the locale id that will be used for translations and ICU expressions.
-     * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
-     * but is now defined as a global value.
+     * Updates a translation block or an i18n attribute when the bindings have changed.
      *
-     * @param localeId
+     * @param index Index of either {@link i18nStart} (translation block) or {@link i18nAttributes}
+     * (i18n attribute) on which it should update the content.
+     *
+     * @codeGenApi
      */
-    function setLocaleId(localeId) {
-        assertDefined(localeId, "Expected localeId to be defined");
-        if (typeof localeId === 'string') {
-            LOCALE_ID = localeId.toLowerCase().replace(/_/g, '-');
-        }
+    function ɵɵi18nApply(index) {
+        applyI18n(getTView(), getLView(), index);
     }
     /**
-     * Gets the locale id that will be used for translations and ICU expressions.
-     * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
-     * but is now defined as a global value.
+     * Handles message string post-processing for internationalization.
+     *
+     * Handles message string post-processing by transforming it from intermediate
+     * format (that might contain some markers that we need to replace) to the final
+     * form, consumable by i18nStart instruction. Post processing steps include:
+     *
+     * 1. Resolve all multi-value cases (like [�*1:1��#2:1�|�#4:1�|�5�])
+     * 2. Replace all ICU vars (like "VAR_PLURAL")
+     * 3. Replace all placeholders used inside ICUs in a form of {PLACEHOLDER}
+     * 4. Replace all ICU references with corresponding values (like �ICU_EXP_ICU_1�)
+     *    in case multiple ICUs have the same placeholder name
+     *
+     * @param message Raw translation string for post processing
+     * @param replacements Set of replacements that should be applied
+     *
+     * @returns Transformed string that can be consumed by i18nStart instruction
+     *
+     * @codeGenApi
      */
-    function getLocaleId() {
-        return LOCALE_ID;
+    function ɵɵi18nPostprocess(message, replacements) {
+        if (replacements === void 0) { replacements = {}; }
+        return i18nPostprocess(message, replacements);
     }
 
     /**
@@ -24923,7 +25188,7 @@
      * it to `undefined`.
      */
     function getPureFunctionReturnValue(lView, returnValueIndex) {
-        ngDevMode && assertDataInRange(lView, returnValueIndex);
+        ngDevMode && assertIndexInRange(lView, returnValueIndex);
         var lastReturnValue = lView[returnValueIndex];
         return lastReturnValue === NO_CHANGE ? undefined : lastReturnValue;
     }
@@ -25548,7 +25813,7 @@
             }
         };
         TQueries_.prototype.getByIndex = function (index) {
-            ngDevMode && assertDataInRange(this.queries, index);
+            ngDevMode && assertIndexInRange(this.queries, index);
             return this.queries[index];
         };
         Object.defineProperty(TQueries_.prototype, "length", {
@@ -25624,21 +25889,23 @@
             return this._appliesToNextNode;
         };
         TQuery_.prototype.matchTNode = function (tView, tNode) {
-            if (Array.isArray(this.metadata.predicate)) {
-                var localNames = this.metadata.predicate;
-                for (var i = 0; i < localNames.length; i++) {
-                    this.matchTNodeWithReadOption(tView, tNode, getIdxOfMatchingSelector(tNode, localNames[i]));
+            var predicate = this.metadata.predicate;
+            if (Array.isArray(predicate)) {
+                for (var i = 0; i < predicate.length; i++) {
+                    var name = predicate[i];
+                    this.matchTNodeWithReadOption(tView, tNode, getIdxOfMatchingSelector(tNode, name));
+                    // Also try matching the name to a provider since strings can be used as DI tokens too.
+                    this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, name, false, false));
                 }
             }
             else {
-                var typePredicate = this.metadata.predicate;
-                if (typePredicate === TemplateRef) {
+                if (predicate === TemplateRef) {
                     if (tNode.type === 0 /* Container */) {
                         this.matchTNodeWithReadOption(tView, tNode, -1);
                     }
                 }
                 else {
-                    this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, typePredicate, false, false));
+                    this.matchTNodeWithReadOption(tView, tNode, locateDirectiveOrProvider(tNode, tView, predicate, false, false));
                 }
             }
         };
@@ -25751,7 +26018,7 @@
                     result.push(null);
                 }
                 else {
-                    ngDevMode && assertDataInRange(tViewData, matchedNodeIdx);
+                    ngDevMode && assertIndexInRange(tViewData, matchedNodeIdx);
                     var tNode = tViewData[matchedNodeIdx];
                     result.push(createResultForNode(lView, tNode, tQueryMatches[i + 1], tQuery.metadata.read));
                 }
@@ -25913,7 +26180,7 @@
     function loadQueryInternal(lView, queryIndex) {
         ngDevMode &&
             assertDefined(lView[QUERIES], 'LQueries should be defined when trying to load a query');
-        ngDevMode && assertDataInRange(lView[QUERIES].queries, queryIndex);
+        ngDevMode && assertIndexInRange(lView[QUERIES].queries, queryIndex);
         return lView[QUERIES].queries[queryIndex].queryList;
     }
     function createLQuery(tView, lView) {
@@ -26610,6 +26877,20 @@
      * 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
      */
+    /**
+     * Keep track of the compilation depth to avoid reentrancy issues during JIT compilation. This
+     * matters in the following scenario:
+     *
+     * Consider a component 'A' that extends component 'B', both declared in module 'M'. During
+     * the compilation of 'A' the definition of 'B' is requested to capture the inheritance chain,
+     * potentially triggering compilation of 'B'. If this nested compilation were to trigger
+     * `flushModuleScopingQueueAsMuchAsPossible` it may happen that module 'M' is still pending in the
+     * queue, resulting in 'A' and 'B' to be patched with the NgModule scope. As the compilation of
+     * 'A' is still in progress, this would introduce a circular dependency on its compilation. To avoid
+     * this issue, the module scope queue is only flushed for compilations at the depth 0, to ensure
+     * all compilations have finished.
+     */
+    var compilationDepth = 0;
     /**
      * Compile an Angular component according to its decorator metadata, and patch the resulting
      * component def (ɵcmp) onto the component type.
@@ -26670,16 +26951,25 @@
                     }
                     var templateUrl = metadata.templateUrl || "ng:///" + type.name + "/template.html";
                     var meta = Object.assign(Object.assign({}, directiveMetadata(type, metadata)), { typeSourceSpan: compiler.createParseSourceSpan('Component', type.name, templateUrl), template: metadata.template || '', preserveWhitespaces: preserveWhitespaces, styles: metadata.styles || EMPTY_ARRAY, animations: metadata.animations, directives: [], changeDetection: metadata.changeDetection, pipes: new Map(), encapsulation: encapsulation, interpolation: metadata.interpolation, viewProviders: metadata.viewProviders || null });
-                    if (meta.usesInheritance) {
-                        addDirectiveDefToUndecoratedParents(type);
+                    compilationDepth++;
+                    try {
+                        if (meta.usesInheritance) {
+                            addDirectiveDefToUndecoratedParents(type);
+                        }
+                        ngComponentDef = compiler.compileComponent(angularCoreEnv, templateUrl, meta);
+                    }
+                    finally {
+                        // Ensure that the compilation depth is decremented even when the compilation failed.
+                        compilationDepth--;
+                    }
+                    if (compilationDepth === 0) {
+                        // When NgModule decorator executed, we enqueued the module definition such that
+                        // it would only dequeue and add itself as module scope to all of its declarations,
+                        // but only if  if all of its declarations had resolved. This call runs the check
+                        // to see if any modules that are in the queue can be dequeued and add scope to
+                        // their declarations.
+                        flushModuleScopingQueueAsMuchAsPossible();
                     }
-                    ngComponentDef = compiler.compileComponent(angularCoreEnv, templateUrl, meta);
-                    // When NgModule decorator executed, we enqueued the module definition such that
-                    // it would only dequeue and add itself as module scope to all of its declarations,
-                    // but only if  if all of its declarations had resolved. This call runs the check
-                    // to see if any modules that are in the queue can be dequeued and add scope to
-                    // their declarations.
-                    flushModuleScopingQueueAsMuchAsPossible();
                     // If component compilation is async, then the @NgModule annotation which declares the
                     // component may execute and set an ngSelectorScope property on the component type. This
                     // allows the component to patch itself with directiveDefs from the module after it
@@ -32488,8 +32778,8 @@
     exports.ɵangular_packages_core_core_bm = makeParamDecorator;
     exports.ɵangular_packages_core_core_bn = makePropDecorator;
     exports.ɵangular_packages_core_core_bo = getClosureSafeProperty;
-    exports.ɵangular_packages_core_core_bq = noSideEffects;
-    exports.ɵangular_packages_core_core_br = getRootContext;
+    exports.ɵangular_packages_core_core_bq = getRootContext;
+    exports.ɵangular_packages_core_core_br = i18nPostprocess;
     exports.ɵangular_packages_core_core_c = NullInjector;
     exports.ɵangular_packages_core_core_d = ReflectiveInjector_;
     exports.ɵangular_packages_core_core_e = ReflectiveDependency;
@@ -32565,6 +32855,7 @@
     exports.ɵmod = moduleDef;
     exports.ɵmpd = moduleProvideDef;
     exports.ɵncd = ngContentDef;
+    exports.ɵnoSideEffects = noSideEffects;
     exports.ɵnov = nodeValue;
     exports.ɵoverrideComponentView = overrideComponentView;
     exports.ɵoverrideProvider = overrideProvider;