@angular/core 8.1.0-next.3 → 8.1.2

package/bundles/core.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v8.1.0-next.3
+ * @license Angular v8.1.2
  * (c) 2010-2019 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -947,7 +947,7 @@
                 if (typeof paramTypes === 'undefined') {
                     result[i] = [];
                 }
-                else if (paramTypes[i] != Object) {
+                else if (paramTypes[i] && paramTypes[i] != Object) {
                     result[i] = [paramTypes[i]];
                 }
                 else {
@@ -4000,7 +4000,7 @@
     function assertDomNode(node) {
         // If we're in a worker, `Node` will not be defined.
         assertEqual((typeof Node !== 'undefined' && node instanceof Node) ||
-            (typeof node === 'object' && node.constructor.name === 'WebWorkerRenderNode'), true, 'The provided value must be an instance of a DOM Node');
+            (typeof node === 'object' && node.constructor.name === 'WebWorkerRenderNode'), true, "The provided value must be an instance of a DOM Node but got " + stringify(node));
     }
     function assertDataInRange(arr, index) {
         var maxLen = arr ? arr.length : 0;
@@ -4029,13 +4029,14 @@
     // PARENT, NEXT, QUERIES and T_HOST are indices 3, 4, 5 and 6.
     // As we already have these constants in LView, we don't need to re-create them.
     var NATIVE = 7;
+    var VIEW_REFS = 8;
     /**
      * Size of LContainer's header. Represents the index after which all views in the
      * container will be inserted. We need to keep a record of current views so we know
      * which views are already in the DOM (and don't need to be re-added) and so we can
      * remove views from the DOM when they are no longer required.
      */
-    var CONTAINER_HEADER_OFFSET = 8;
+    var CONTAINER_HEADER_OFFSET = 9;
 
     /**
      * @license
@@ -4888,8 +4889,11 @@
      * the direction of traversal (up or down the view tree) a bit clearer.
      *
      * @param newView New state to become active
+     * @param safeToRunHooks Whether the runtime is in a state where running lifecycle hooks is valid.
+     * This is not always the case (for example, the application may have crashed and `leaveView` is
+     * being executed while unwinding the call stack).
      */
-    function leaveView(newView) {
+    function leaveView(newView, safeToRunHooks) {
         var tView = lView[TVIEW];
         if (isCreationMode(lView)) {
             lView[FLAGS] &= ~4 /* CreationMode */;
@@ -4897,7 +4901,7 @@
         else {
             try {
                 resetPreOrderHookFlags(lView);
-                executeHooks(lView, tView.viewHooks, tView.viewCheckHooks, checkNoChangesMode, 2 /* AfterViewInitHooksToBeRun */, undefined);
+                safeToRunHooks && executeHooks(lView, tView.viewHooks, tView.viewCheckHooks, checkNoChangesMode, 2 /* AfterViewInitHooksToBeRun */, undefined);
             }
             finally {
                 // Views are clean and in update mode after being checked, so these bits are cleared
@@ -6774,7 +6778,12 @@
         return lView;
     }
     /**
-     * Given a current view, finds the nearest component's host (LElement).
+     * Given an `LView`, find the closest declaration view which is not an embedded view.
+     *
+     * This method searches for the `LView` associated with the component which declared the `LView`.
+     *
+     * This function may return itself if the `LView` passed in is not an embedded `LView`. Otherwise
+     * it walks the declaration parents until it finds a component view (non-embedded-view.)
      *
      * @param lView LView for which we want a host element node
      * @returns The host node
@@ -11456,6 +11465,8 @@
             tickRootContext(getRootContext(viewToRender));
         }
         else {
+            // Will become true if the `try` block executes with no errors.
+            var safeToRunHooks = false;
             try {
                 setPreviousOrParentTNode(null, true);
                 oldView = enterView(viewToRender, viewToRender[T_HOST]);
@@ -11467,9 +11478,10 @@
                 // matching, etc again and again.
                 viewToRender[TVIEW].firstTemplatePass = false;
                 refreshDescendantViews(viewToRender);
+                safeToRunHooks = true;
             }
             finally {
-                leaveView(oldView);
+                leaveView(oldView, safeToRunHooks);
                 setPreviousOrParentTNode(_previousOrParentTNode, _isParent);
             }
         }
@@ -11479,6 +11491,8 @@
         var oldView = enterView(hostView, hostView[T_HOST]);
         var normalExecutionPath = !getCheckNoChangesMode();
         var creationModeIsActive = isCreationMode(hostView);
+        // Will become true if the `try` block executes with no errors.
+        var safeToRunHooks = false;
         try {
             if (normalExecutionPath && !creationModeIsActive && rendererFactory.begin) {
                 rendererFactory.begin();
@@ -11493,12 +11507,13 @@
             resetPreOrderHookFlags(hostView);
             templateFn && executeTemplate(hostView, templateFn, 2 /* Update */, context);
             refreshDescendantViews(hostView);
+            safeToRunHooks = true;
         }
         finally {
             if (normalExecutionPath && !creationModeIsActive && rendererFactory.end) {
                 rendererFactory.end();
             }
-            leaveView(oldView);
+            leaveView(oldView, safeToRunHooks);
         }
     }
     function executeTemplate(lView, templateFn, rf, context) {
@@ -12373,7 +12388,8 @@
         null, // next
         null, // queries
         tNode, // t_host
-        native);
+        native, // native,
+        null);
         ngDevMode && attachLContainerDebug(lContainer);
         return lContainer;
     }
@@ -12605,6 +12621,8 @@
         var oldView = enterView(hostView, hostView[T_HOST]);
         var templateFn = hostTView.template;
         var creationMode = isCreationMode(hostView);
+        // Will become true if the `try` block executes with no errors.
+        var safeToRunHooks = false;
         try {
             resetPreOrderHookFlags(hostView);
             creationMode && executeViewQueryFn(1 /* Create */, hostTView, component);
@@ -12614,9 +12632,10 @@
             if (!creationMode || hostTView.staticViewQueries) {
                 executeViewQueryFn(2 /* Update */, hostTView, component);
             }
+            safeToRunHooks = true;
         }
         finally {
-            leaveView(oldView);
+            leaveView(oldView, safeToRunHooks);
         }
     }
     function executeViewQueryFn(flags, tView, component) {
@@ -13066,7 +13085,8 @@
     function ɵɵproperty(propName, value, sanitizer, nativeOnly) {
         var index = getSelectedIndex();
         ngDevMode && assertNotEqual(index, -1, 'selected index cannot be -1');
-        var bindReconciledValue = ɵɵbind(value);
+        var lView = getLView();
+        var bindReconciledValue = bind(lView, value);
         if (bindReconciledValue !== NO_CHANGE) {
             elementPropertyInternal(index, propName, bindReconciledValue, sanitizer, nativeOnly);
         }
@@ -13075,12 +13095,10 @@
     /**
      * Creates a single value binding.
      *
+     * @param lView Current view
      * @param value Value to diff
-     *
-     * @codeGenApi
      */
-    function ɵɵbind(value) {
-        var lView = getLView();
+    function bind(lView, value) {
         var bindingIndex = lView[BINDING_INDEX]++;
         storeBindingMetadata(lView);
         return bindingUpdated(lView, bindingIndex, value) ? value : NO_CHANGE;
@@ -13110,8 +13128,9 @@
      */
     function ɵɵupdateSyntheticHostBinding(propName, value, sanitizer, nativeOnly) {
         var index = getSelectedIndex();
+        var lView = getLView();
         // TODO(benlesh): remove bind call here.
-        var bound = ɵɵbind(value);
+        var bound = bind(lView, value);
         if (bound !== NO_CHANGE) {
             elementPropertyInternal(index, propName, bound, sanitizer, nativeOnly, loadComponentRenderer);
         }
@@ -13134,10 +13153,11 @@
         var index = getSelectedIndex();
         var lView = getLView();
         // TODO(FW-1340): Refactor to remove the use of other instructions here.
-        var bound = ɵɵbind(value);
+        var bound = bind(lView, value);
         if (bound !== NO_CHANGE) {
-            return elementAttributeInternal(index, name, bound, lView, sanitizer, namespace);
+            elementAttributeInternal(index, name, bound, lView, sanitizer, namespace);
         }
+        return ɵɵattribute;
     }
 
     /**
@@ -13823,193 +13843,52 @@
         var container = getLContainer(tViewNode, view);
         return container ? nativeParentNode(view[RENDERER], container[NATIVE]) : null;
     }
-    /**
-     * Stack used to keep track of projection nodes in walkTNodeTree.
-     *
-     * This is deliberately created outside of walkTNodeTree to avoid allocating
-     * a new array each time the function is called. Instead the array will be
-     * re-used by each invocation. This works because the function is not reentrant.
-     */
-    var projectionNodeStack = [];
-    /**
-     * Walks a tree of TNodes, applying a transformation on the element nodes, either only on the first
-     * one found, or on all of them.
-     *
-     * @param viewToWalk the view to walk
-     * @param action identifies the action to be performed on the elements
-     * @param renderer the current renderer.
-     * @param renderParent Optional the render parent node to be set in all LContainers found,
-     * required for action modes Insert and Destroy.
-     * @param beforeNode Optional the node before which elements should be added, required for action
-     * Insert.
-     */
-    function walkTNodeTree(viewToWalk, action, renderer, renderParent, beforeNode) {
-        var e_1, _a;
-        var rootTNode = viewToWalk[TVIEW].node;
-        var projectionNodeIndex = -1;
-        var currentView = viewToWalk;
-        var tNode = rootTNode.child;
-        while (tNode) {
-            var nextTNode = null;
-            if (tNode.type === 3 /* Element */ || tNode.type === 4 /* ElementContainer */) {
-                executeNodeAction(action, renderer, renderParent, getNativeByTNode(tNode, currentView), tNode, beforeNode);
-                var nodeOrContainer = currentView[tNode.index];
-                if (isLContainer(nodeOrContainer)) {
-                    // This element has an LContainer, and its comment needs to be handled
-                    executeNodeAction(action, renderer, renderParent, nodeOrContainer[NATIVE], tNode, beforeNode);
-                    var firstView = nodeOrContainer[CONTAINER_HEADER_OFFSET];
-                    if (firstView) {
-                        currentView = firstView;
-                        nextTNode = currentView[TVIEW].node;
-                        // When the walker enters a container, then the beforeNode has to become the local native
-                        // comment node.
-                        beforeNode = nodeOrContainer[NATIVE];
-                    }
-                }
-            }
-            else if (tNode.type === 0 /* Container */) {
-                var lContainer = currentView[tNode.index];
-                executeNodeAction(action, renderer, renderParent, lContainer[NATIVE], tNode, beforeNode);
-                var firstView = lContainer[CONTAINER_HEADER_OFFSET];
-                if (firstView) {
-                    currentView = firstView;
-                    nextTNode = currentView[TVIEW].node;
-                    // When the walker enters a container, then the beforeNode has to become the local native
-                    // comment node.
-                    beforeNode = lContainer[NATIVE];
-                }
-            }
-            else if (tNode.type === 1 /* Projection */) {
-                var componentView = findComponentView(currentView);
-                var componentHost = componentView[T_HOST];
-                var head = componentHost.projection[tNode.projection];
-                if (Array.isArray(head)) {
-                    try {
-                        for (var head_1 = __values(head), head_1_1 = head_1.next(); !head_1_1.done; head_1_1 = head_1.next()) {
-                            var nativeNode = head_1_1.value;
-                            executeNodeAction(action, renderer, renderParent, nativeNode, tNode, beforeNode);
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (head_1_1 && !head_1_1.done && (_a = head_1.return)) _a.call(head_1);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                }
-                else {
-                    // Must store both the TNode and the view because this projection node could be nested
-                    // deeply inside embedded views, and we need to get back down to this particular nested
-                    // view.
-                    projectionNodeStack[++projectionNodeIndex] = tNode;
-                    projectionNodeStack[++projectionNodeIndex] = currentView;
-                    if (head) {
-                        currentView = componentView[PARENT];
-                        nextTNode = currentView[TVIEW].data[head.index];
-                    }
-                }
-            }
-            else {
-                // Otherwise, this is a View
-                nextTNode = tNode.child;
-            }
-            if (nextTNode === null) {
-                // this last node was projected, we need to get back down to its projection node
-                if (tNode.projectionNext === null && (tNode.flags & 2 /* isProjected */)) {
-                    currentView = projectionNodeStack[projectionNodeIndex--];
-                    tNode = projectionNodeStack[projectionNodeIndex--];
-                }
-                if (tNode.flags & 2 /* isProjected */) {
-                    nextTNode = tNode.projectionNext;
-                }
-                else if (tNode.type === 4 /* ElementContainer */) {
-                    nextTNode = tNode.child || tNode.next;
-                }
-                else {
-                    nextTNode = tNode.next;
-                }
-                /**
-                 * Find the next node in the TNode tree, taking into account the place where a node is
-                 * projected (in the shadow DOM) rather than where it comes from (in the light DOM).
-                 *
-                 * If there is no sibling node, then it goes to the next sibling of the parent node...
-                 * until it reaches rootNode (at which point null is returned).
-                 */
-                while (!nextTNode) {
-                    // If parent is null, we're crossing the view boundary, so we should get the host TNode.
-                    tNode = tNode.parent || currentView[T_HOST];
-                    if (tNode === null || tNode === rootTNode)
-                        return;
-                    // When exiting a container, the beforeNode must be restored to the previous value
-                    if (tNode.type === 0 /* Container */) {
-                        currentView = getLViewParent(currentView);
-                        beforeNode = currentView[tNode.index][NATIVE];
-                    }
-                    if (tNode.type === 2 /* View */) {
-                        /**
-                         * If current lView doesn't have next pointer, we try to find it by going up parents
-                         * chain until:
-                         * - we find an lView with a next pointer
-                         * - or find a tNode with a parent that has a next pointer
-                         * - or find a lContainer
-                         * - or reach root TNode (in which case we exit, since we traversed all nodes)
-                         */
-                        while (!currentView[NEXT] && currentView[PARENT] &&
-                            !(tNode.parent && tNode.parent.next)) {
-                            if (tNode === rootTNode)
-                                return;
-                            currentView = currentView[PARENT];
-                            if (isLContainer(currentView)) {
-                                tNode = currentView[T_HOST];
-                                currentView = currentView[PARENT];
-                                beforeNode = currentView[tNode.index][NATIVE];
-                                break;
-                            }
-                            tNode = currentView[T_HOST];
-                        }
-                        if (currentView[NEXT]) {
-                            currentView = currentView[NEXT];
-                            nextTNode = currentView[T_HOST];
-                        }
-                        else {
-                            nextTNode = tNode.type === 4 /* ElementContainer */ && tNode.child || tNode.next;
-                        }
-                    }
-                    else {
-                        nextTNode = tNode.next;
-                    }
-                }
-            }
-            tNode = nextTNode;
-        }
-    }
     /**
      * NOTE: for performance reasons, the possible actions are inlined within the function instead of
      * being passed as an argument.
      */
-    function executeNodeAction(action, renderer, parent, node, tNode, beforeNode) {
+    function executeActionOnElementOrContainer(action, renderer, parent, lNodeToHandle, beforeNode) {
+        ngDevMode && assertDefined(lNodeToHandle, '\'lNodeToHandle\' is undefined');
+        var lContainer;
+        var isComponent = false;
+        // We are expecting an RNode, but in the case of a component or LContainer the `RNode` is wrapped
+        // in an array which needs to be unwrapped. We need to know if it is a component and if
+        // it has LContainer so that we can process all of those cases appropriately.
+        if (isLContainer(lNodeToHandle)) {
+            lContainer = lNodeToHandle;
+        }
+        else if (isLView(lNodeToHandle)) {
+            isComponent = true;
+            ngDevMode && assertDefined(lNodeToHandle[HOST], 'HOST must be defined for a component LView');
+            lNodeToHandle = lNodeToHandle[HOST];
+        }
+        var rNode = unwrapRNode(lNodeToHandle);
+        ngDevMode && assertDomNode(rNode);
         if (action === 0 /* Insert */) {
-            nativeInsertBefore(renderer, parent, node, beforeNode || null);
+            nativeInsertBefore(renderer, parent, rNode, beforeNode || null);
         }
         else if (action === 1 /* Detach */) {
-            nativeRemoveNode(renderer, node, isComponent(tNode));
+            nativeRemoveNode(renderer, rNode, isComponent);
         }
         else if (action === 2 /* Destroy */) {
             ngDevMode && ngDevMode.rendererDestroyNode++;
-            renderer.destroyNode(node);
+            renderer.destroyNode(rNode);
+        }
+        if (lContainer != null) {
+            executeActionOnContainer(renderer, action, lContainer, parent, beforeNode);
         }
     }
     function createTextNode(value, renderer) {
         return isProceduralRenderer(renderer) ? renderer.createText(renderStringify(value)) :
             renderer.createTextNode(renderStringify(value));
     }
-    function addRemoveViewFromContainer(viewToWalk, insertMode, beforeNode) {
-        var renderParent = getContainerRenderParent(viewToWalk[TVIEW].node, viewToWalk);
-        ngDevMode && assertNodeType(viewToWalk[TVIEW].node, 2 /* View */);
+    function addRemoveViewFromContainer(lView, insertMode, beforeNode) {
+        var renderParent = getContainerRenderParent(lView[TVIEW].node, lView);
+        ngDevMode && assertNodeType(lView[TVIEW].node, 2 /* View */);
         if (renderParent) {
-            var renderer = viewToWalk[RENDERER];
-            walkTNodeTree(viewToWalk, insertMode ? 0 /* Insert */ : 1 /* Detach */, renderer, renderParent, beforeNode);
+            var renderer = lView[RENDERER];
+            var action = insertMode ? 0 /* Insert */ : 1 /* Detach */;
+            executeActionOnView(renderer, action, lView, renderParent, beforeNode);
         }
     }
     /**
@@ -14018,7 +13897,7 @@
      * @param lView the `LView` to be detached.
      */
     function renderDetachView(lView) {
-        walkTNodeTree(lView, 1 /* Detach */, lView[RENDERER], null);
+        executeActionOnView(lView[RENDERER], 1 /* Detach */, lView, null, null);
     }
     /**
      * Traverses down and up the tree of views and containers to remove listeners and
@@ -14148,15 +14027,15 @@
      * A standalone function which destroys an LView,
      * conducting cleanup (e.g. removing listeners, calling onDestroys).
      *
-     * @param view The view to be destroyed.
+     * @param lView The view to be destroyed.
      */
-    function destroyLView(view) {
-        if (!(view[FLAGS] & 256 /* Destroyed */)) {
-            var renderer = view[RENDERER];
+    function destroyLView(lView) {
+        if (!(lView[FLAGS] & 256 /* Destroyed */)) {
+            var renderer = lView[RENDERER];
             if (isProceduralRenderer(renderer) && renderer.destroyNode) {
-                walkTNodeTree(view, 2 /* Destroy */, renderer, null);
+                executeActionOnView(renderer, 2 /* Destroy */, lView, null, null);
             }
-            destroyViewTree(view);
+            destroyViewTree(lView);
         }
     }
     /**
@@ -14219,7 +14098,7 @@
     /** Removes listeners and unsubscribes from output subscriptions */
     function removeListeners(lView) {
         var tCleanup = lView[TVIEW].cleanup;
-        if (tCleanup != null) {
+        if (tCleanup !== null) {
             var lCleanup = lView[CLEANUP];
             for (var i = 0; i < tCleanup.length - 1; i += 2) {
                 if (typeof tCleanup[i] === 'string') {
@@ -14371,7 +14250,7 @@
         }
     }
     function nativeAppendOrInsertBefore(renderer, parent, child, beforeNode) {
-        if (beforeNode) {
+        if (beforeNode !== null) {
             nativeInsertBefore(renderer, parent, child, beforeNode);
         }
         else {
@@ -14428,7 +14307,7 @@
      * @returns Whether or not the child was appended
      */
     function appendChild(childEl, childTNode, currentView) {
-        var e_2, _a;
+        var e_1, _a;
         var renderParent = getRenderParent(childTNode, currentView);
         if (renderParent != null) {
             var renderer = currentView[RENDERER];
@@ -14441,12 +14320,12 @@
                         nativeAppendOrInsertBefore(renderer, renderParent, nativeNode, anchorNode);
                     }
                 }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
                         if (childEl_1_1 && !childEl_1_1.done && (_a = childEl_1.return)) _a.call(childEl_1);
                     }
-                    finally { if (e_2) throw e_2.error; }
+                    finally { if (e_1) throw e_1.error; }
                 }
             }
             else {
@@ -14471,6 +14350,7 @@
         var nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
         if (nextViewIndex < lContainer.length) {
             var lView = lContainer[nextViewIndex];
+            ngDevMode && assertDefined(lView[T_HOST], 'Missing Host TNode');
             var tViewNodeChild = lView[T_HOST].child;
             return tViewNodeChild !== null ? getNativeByTNode(tViewNodeChild, lView) : lContainer[NATIVE];
         }
@@ -14496,7 +14376,7 @@
     /**
      * Appends nodes to a target projection place. Nodes to insert were previously re-distribution and
      * stored on a component host level.
-     * @param lView A LView where nodes are inserted (target VLview)
+     * @param lView A LView where nodes are inserted (target LView)
      * @param tProjectionNode A projection node where previously re-distribution should be appended
      * (target insertion place)
      * @param selectorIndex A bucket from where nodes to project should be taken
@@ -14582,6 +14462,137 @@
             }
         }
     }
+    /**
+     * `executeActionOnView` performs an operation on the view as specified in `action` (insert, detach,
+     * destroy)
+     *
+     * Inserting a view without projection or containers at top level is simple. Just iterate over the
+     * root nodes of the View, and for each node perform the `action`.
+     *
+     * Things get more complicated with containers and projections. That is because coming across:
+     * - Container: implies that we have to insert/remove/destroy the views of that container as well
+     *              which in turn can have their own Containers at the View roots.
+     * - Projection: implies that we have to insert/remove/destroy the nodes of the projection. The
+     *               complication is that the nodes we are projecting can themselves have Containers
+     *               or other Projections.
+     *
+     * As you can see this is a very recursive problem. While the recursive implementation is not the
+     * most efficient one, trying to unroll the nodes non-recursively results in very complex code that
+     * is very hard (to maintain). We are sacrificing a bit of performance for readability using a
+     * recursive implementation.
+     *
+     * @param renderer Renderer to use
+     * @param action action to perform (insert, detach, destroy)
+     * @param lView The LView which needs to be inserted, detached, destroyed.
+     * @param renderParent parent DOM element for insertion/removal.
+     * @param beforeNode Before which node the insertions should happen.
+     */
+    function executeActionOnView(renderer, action, lView, renderParent, beforeNode) {
+        var tView = lView[TVIEW];
+        ngDevMode && assertNodeType(tView.node, 2 /* View */);
+        var viewRootTNode = tView.node.child;
+        while (viewRootTNode !== null) {
+            executeActionOnNode(renderer, action, lView, viewRootTNode, renderParent, beforeNode);
+            viewRootTNode = viewRootTNode.next;
+        }
+    }
+    /**
+     * `executeActionOnProjection` performs an operation on the projection specified by `action`
+     * (insert, detach, destroy).
+     *
+     * Inserting a projection requires us to locate the projected nodes from the parent component. The
+     * complication is that those nodes themselves could be re-projected from their parent component.
+     *
+     * @param renderer Renderer to use
+     * @param action action to perform (insert, detach, destroy)
+     * @param lView The LView which needs to be inserted, detached, destroyed.
+     * @param renderParent parent DOM element for insertion/removal.
+     * @param beforeNode Before which node the insertions should happen.
+     */
+    function executeActionOnProjection(renderer, action, lView, tProjectionNode, renderParent, beforeNode) {
+        var componentLView = findComponentView(lView);
+        var componentNode = componentLView[T_HOST];
+        var nodeToProject = componentNode.projection[tProjectionNode.projection];
+        if (Array.isArray(nodeToProject)) {
+            for (var i = 0; i < nodeToProject.length; i++) {
+                var rNode = nodeToProject[i];
+                ngDevMode && assertDomNode(rNode);
+                executeActionOnElementOrContainer(action, renderer, renderParent, rNode, beforeNode);
+            }
+        }
+        else {
+            var projectionTNode = nodeToProject;
+            var projectedComponentLView = componentLView[PARENT];
+            while (projectionTNode !== null) {
+                executeActionOnNode(renderer, action, projectedComponentLView, projectionTNode, renderParent, beforeNode);
+                projectionTNode = projectionTNode.projectionNext;
+            }
+        }
+    }
+    /**
+     * `executeActionOnContainer` performs an operation on the container and its views as specified by
+     * `action` (insert, detach, destroy)
+     *
+     * Inserting a Container is complicated by the fact that the container may have Views which
+     * themselves have containers or projections.
+     *
+     * @param renderer Renderer to use
+     * @param action action to perform (insert, detach, destroy)
+     * @param lContainer The LContainer which needs to be inserted, detached, destroyed.
+     * @param renderParent parent DOM element for insertion/removal.
+     * @param beforeNode Before which node the insertions should happen.
+     */
+    function executeActionOnContainer(renderer, action, lContainer, renderParent, beforeNode) {
+        ngDevMode && assertLContainer(lContainer);
+        var anchor = lContainer[NATIVE]; // LContainer has its own before node.
+        var native = unwrapRNode(lContainer);
+        // An LContainer can be created dynamically on any node by injecting ViewContainerRef.
+        // Asking for a ViewContainerRef on an element will result in a creation of a separate anchor node
+        // (comment in the DOM) that will be different from the LContainer's host node. In this particular
+        // case we need to execute action on 2 nodes:
+        // - container's host node (this is done in the executeNodeAction)
+        // - container's host node (this is done here)
+        if (anchor !== native) {
+            executeActionOnElementOrContainer(action, renderer, renderParent, anchor, beforeNode);
+        }
+        for (var i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
+            var lView = lContainer[i];
+            executeActionOnView(renderer, action, lView, renderParent, anchor);
+        }
+    }
+    /**
+     * `executeActionOnElementContainer` performs an operation on the ng-container node and its child
+     * nodes as specified by the `action` (insert, detach, destroy).
+     *
+     * @param renderer Renderer to use
+     * @param action action to perform (insert, detach, destroy)
+     * @param lView The LView which needs to be inserted, detached, destroyed.
+     * @param tElementContainerNode The TNode associated with the ElementContainer.
+     * @param renderParent parent DOM element for insertion/removal.
+     * @param beforeNode Before which node the insertions should happen.
+     */
+    function executeActionOnElementContainer(renderer, action, lView, tElementContainerNode, renderParent, beforeNode) {
+        var node = lView[tElementContainerNode.index];
+        executeActionOnElementOrContainer(action, renderer, renderParent, node, beforeNode);
+        var childTNode = tElementContainerNode.child;
+        while (childTNode) {
+            executeActionOnNode(renderer, action, lView, childTNode, renderParent, beforeNode);
+            childTNode = childTNode.next;
+        }
+    }
+    function executeActionOnNode(renderer, action, lView, tNode, renderParent, beforeNode) {
+        var elementContainerRootTNodeType = tNode.type;
+        if (elementContainerRootTNodeType === 4 /* ElementContainer */) {
+            executeActionOnElementContainer(renderer, action, lView, tNode, renderParent, beforeNode);
+        }
+        else if (elementContainerRootTNodeType === 1 /* Projection */) {
+            executeActionOnProjection(renderer, action, lView, tNode, renderParent, beforeNode);
+        }
+        else {
+            ngDevMode && assertNodeOfPossibleTypes(tNode, 3 /* Element */, 0 /* Container */);
+            executeActionOnElementOrContainer(action, renderer, renderParent, lView[tNode.index], beforeNode);
+        }
+    }
 
     /**
      * @license
@@ -15805,7 +15816,10 @@
         refreshDescendantViews(lView); // update mode pass
         var lContainer = lView[PARENT];
         ngDevMode && assertLContainerOrUndefined(lContainer);
-        leaveView(lContainer[PARENT]);
+        // It's always safe to run hooks here, as `leaveView` is not called during the 'finally' block
+        // of a try-catch-finally statement, so it can never be reached while unwinding the stack due to
+        // an error being thrown.
+        leaveView(lContainer[PARENT], /* safeToRunHooks */ true);
         setPreviousOrParentTNode(viewHost, false);
     }
 
@@ -16675,7 +16689,7 @@
     function ɵɵtextBinding(value) {
         var lView = getLView();
         var index = getSelectedIndex();
-        var bound = ɵɵbind(value);
+        var bound = bind(lView, value);
         if (bound !== NO_CHANGE) {
             textBindingInternal(lView, index, renderStringify(bound));
         }
@@ -17420,6 +17434,8 @@
         var rootView = createLView(null, createTView(-1, null, 1, 0, null, null, null, null), rootContext, rootFlags, null, null, rendererFactory, renderer, undefined, opts.injector || null);
         var oldView = enterView(rootView, null);
         var component;
+        // Will become true if the `try` block executes with no errors.
+        var safeToRunHooks = false;
         try {
             if (rendererFactory.begin)
                 rendererFactory.begin();
@@ -17430,9 +17446,10 @@
             rootView[FLAGS] &= ~4 /* CreationMode */;
             resetPreOrderHookFlags(rootView);
             refreshDescendantViews(rootView); // update mode pass
+            safeToRunHooks = true;
         }
         finally {
-            leaveView(oldView);
+            leaveView(oldView, safeToRunHooks);
             if (rendererFactory.end)
                 rendererFactory.end();
         }
@@ -18121,6 +18138,12 @@
         return ComponentRef;
     }());
     /**
+     * Base class for a factory that can create a component dynamically.
+     * Instantiate a factory for a given type of component with `resolveComponentFactory()`.
+     * Use the resulting `ComponentFactory.create()` method to create a component of that type.
+     *
+     * @see [Dynamic Components](guide/dynamic-component-loader)
+     *
      * @publicApi
      */
     var ComponentFactory = /** @class */ (function () {
@@ -18151,6 +18174,12 @@
         return _NullComponentFactoryResolver;
     }());
     /**
+     * A simple registry that maps `Components` to generated `ComponentFactory` classes
+     * that can be used to create instances of components.
+     * Use to obtain the factory for a given component type,
+     * then use the factory's `create()` method to create a component of that type.
+     *
+     * @see [Dynamic Components](guide/dynamic-component-loader)
      * @publicApi
      */
     var ComponentFactoryResolver = /** @class */ (function () {
@@ -18648,7 +18677,6 @@
                     _this._lContainer = _lContainer;
                     _this._hostTNode = _hostTNode;
                     _this._hostView = _hostView;
-                    _this._viewRefs = [];
                     return _this;
                 }
                 Object.defineProperty(ViewContainerRef_.prototype, "element", {
@@ -18681,7 +18709,9 @@
                         this.remove(0);
                     }
                 };
-                ViewContainerRef_.prototype.get = function (index) { return this._viewRefs[index] || null; };
+                ViewContainerRef_.prototype.get = function (index) {
+                    return this._lContainer[VIEW_REFS] !== null && this._lContainer[VIEW_REFS][index] || null;
+                };
                 Object.defineProperty(ViewContainerRef_.prototype, "length", {
                     get: function () {
                         // Note that if there are no views, the container
@@ -18693,11 +18723,12 @@
                     configurable: true
                 });
                 ViewContainerRef_.prototype.createEmbeddedView = function (templateRef, context, index) {
+                    this.allocateContainerIfNeeded();
                     var adjustedIdx = this._adjustIndex(index);
                     var viewRef = templateRef
                         .createEmbeddedView(context || {}, this._lContainer, adjustedIdx);
                     viewRef.attachToViewContainerRef(this);
-                    this._viewRefs.splice(adjustedIdx, 0, viewRef);
+                    this._lContainer[VIEW_REFS].splice(adjustedIdx, 0, viewRef);
                     return viewRef;
                 };
                 ViewContainerRef_.prototype.createComponent = function (componentFactory, index, injector, projectableNodes, ngModuleRef) {
@@ -18713,6 +18744,7 @@
                     if (viewRef.destroyed) {
                         throw new Error('Cannot insert a destroyed View in a ViewContainer!');
                     }
+                    this.allocateContainerIfNeeded();
                     var lView = viewRef._lView;
                     var adjustedIdx = this._adjustIndex(index);
                     if (viewAttachedToContainer(lView)) {
@@ -18724,7 +18756,7 @@
                     var beforeNode = getBeforeNodeForView(adjustedIdx, this._lContainer);
                     addRemoveViewFromContainer(lView, true, beforeNode);
                     viewRef.attachToViewContainerRef(this);
-                    this._viewRefs.splice(adjustedIdx, 0, viewRef);
+                    this._lContainer[VIEW_REFS].splice(adjustedIdx, 0, viewRef);
                     return viewRef;
                 };
                 ViewContainerRef_.prototype.move = function (viewRef, newIndex) {
@@ -18737,16 +18769,22 @@
                     this.insert(viewRef, newIndex);
                     return viewRef;
                 };
-                ViewContainerRef_.prototype.indexOf = function (viewRef) { return this._viewRefs.indexOf(viewRef); };
+                ViewContainerRef_.prototype.indexOf = function (viewRef) {
+                    return this._lContainer[VIEW_REFS] !== null ?
+                        this._lContainer[VIEW_REFS].indexOf(viewRef) :
+                        0;
+                };
                 ViewContainerRef_.prototype.remove = function (index) {
+                    this.allocateContainerIfNeeded();
                     var adjustedIdx = this._adjustIndex(index, -1);
                     removeView(this._lContainer, adjustedIdx);
-                    this._viewRefs.splice(adjustedIdx, 1);
+                    this._lContainer[VIEW_REFS].splice(adjustedIdx, 1);
                 };
                 ViewContainerRef_.prototype.detach = function (index) {
+                    this.allocateContainerIfNeeded();
                     var adjustedIdx = this._adjustIndex(index, -1);
                     var view = detachView(this._lContainer, adjustedIdx);
-                    var wasDetached = view && this._viewRefs.splice(adjustedIdx, 1)[0] != null;
+                    var wasDetached = view && this._lContainer[VIEW_REFS].splice(adjustedIdx, 1)[0] != null;
                     return wasDetached ? new ViewRef(view, view[CONTEXT], -1) : null;
                 };
                 ViewContainerRef_.prototype._adjustIndex = function (index, shift) {
@@ -18761,6 +18799,11 @@
                     }
                     return index;
                 };
+                ViewContainerRef_.prototype.allocateContainerIfNeeded = function () {
+                    if (this._lContainer[VIEW_REFS] === null) {
+                        this._lContainer[VIEW_REFS] = [];
+                    }
+                };
                 return ViewContainerRef_;
             }(ViewContainerRefToken));
         }
@@ -18827,6 +18870,7 @@
         }
         return null;
     }
+    /** Returns a Renderer2 (or throws when application was bootstrapped with Renderer3) */
     function getOrCreateRenderer2(view) {
         var renderer = view[RENDERER];
         if (isProceduralRenderer(renderer)) {
@@ -18836,9 +18880,14 @@
             throw new Error('Cannot inject Renderer2 when the application uses Renderer3!');
         }
     }
-    /** Returns a Renderer2 (or throws when application was bootstrapped with Renderer3) */
+    /** Injects a Renderer2 for the current component. */
     function injectRenderer2() {
-        return getOrCreateRenderer2(getLView());
+        // We need the Renderer to be based on the component that it's being injected into, however since
+        // DI happens before we've entered its view, `getLView` will return the parent view instead.
+        var lView = getLView();
+        var tNode = getPreviousOrParentTNode();
+        var nodeAtIndex = getComponentViewByIndex(tNode.index, lView);
+        return getOrCreateRenderer2(isLView(nodeAtIndex) ? nodeAtIndex : lView);
     }
 
     /**
@@ -19026,7 +19075,7 @@
     /**
      * @publicApi
      */
-    var VERSION = new Version('8.1.0-next.3');
+    var VERSION = new Version('8.1.2');
 
     /**
      * @license
@@ -22226,6 +22275,8 @@
             var oldLView = enterView(rootLView, null);
             var component;
             var tElementNode;
+            // Will become true if the `try` block executes with no errors.
+            var safeToRunHooks = false;
             try {
                 var componentView = createRootComponentView(hostRNode, this.componentDef, rootLView, rendererFactory, renderer);
                 tElementNode = getTNode(0, rootLView);
@@ -22242,9 +22293,10 @@
                 component = createRootComponent(componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
                 addToViewTree(rootLView, componentView);
                 refreshDescendantViews(rootLView);
+                safeToRunHooks = true;
             }
             finally {
-                leaveView(oldLView);
+                leaveView(oldLView, safeToRunHooks);
             }
             var componentRef = new ComponentRef$1(this.componentType, component, createElementRef(ElementRef, tElementNode, rootLView), rootLView, tElementNode);
             if (isInternalRootView) {
@@ -23357,15 +23409,19 @@
      * 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 expression = ɵɵbind(value);
+        var lView = getLView();
+        var expression = bind(lView, value);
         if (expression !== NO_CHANGE) {
             changeMask = changeMask | (1 << shiftsCounter);
         }
         shiftsCounter++;
+        return ɵɵi18nExp;
     }
     /**
      * Updates a translation block or an i18n attribute when the bindings have changed.
@@ -23624,13 +23680,13 @@
      * @deprecated this method is temporary & should not be used as it will be removed soon
      */
     function ɵɵi18nLocalize(input, placeholders) {
-        if (placeholders === void 0) { placeholders = {}; }
         if (typeof TRANSLATIONS[input] !== 'undefined') { // to account for empty string
             input = TRANSLATIONS[input];
         }
-        return Object.keys(placeholders).length ?
-            input.replace(LOCALIZE_PH_REGEXP, function (match, key) { return placeholders[key] || ''; }) :
-            input;
+        if (placeholders !== undefined && Object.keys(placeholders).length) {
+            return input.replace(LOCALIZE_PH_REGEXP, function (_, key) { return placeholders[key] || ''; });
+        }
+        return input;
     }
     /**
      * The locale id that the application is currently using (for translations and ICU expressions).
@@ -24325,7 +24381,7 @@
      * that create event emitters. When the title is clicked, the emitter
      * emits an open or close event to toggle the current visibility state.
      *
-     * ```
+     * ```html
      * @Component({
      *   selector: 'zippy',
      *   template: `
@@ -24354,17 +24410,10 @@
      * Access the event object with the `$event` argument passed to the output event
      * handler:
      *
-     * ```
+     * ```html
      * <zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>
      * ```
      *
-     * ### Notes
-     *
-     * Uses Rx.Observable but provides an adapter to make it work as specified here:
-     * https://github.com/jhusain/observable-spec
-     *
-     * Once a reference implementation of the spec is available, switch to it.
-     *
      * @publicApi
      */
     var EventEmitter = /** @class */ (function (_super) {
@@ -25058,7 +25107,6 @@
         'ɵɵNgOnChangesFeature': ɵɵNgOnChangesFeature,
         'ɵɵProvidersFeature': ɵɵProvidersFeature,
         'ɵɵInheritDefinitionFeature': ɵɵInheritDefinitionFeature,
-        'ɵɵbind': ɵɵbind,
         'ɵɵcontainer': ɵɵcontainer,
         'ɵɵnextContext': ɵɵnextContext,
         'ɵɵcontainerRefreshStart': ɵɵcontainerRefreshStart,
@@ -25929,9 +25977,10 @@
     var HostBinding = makePropDecorator('HostBinding', ɵ8);
     var ɵ9 = function (eventName, args) { return ({ eventName: eventName, args: args }); };
     /**
-     * Binds a CSS event to a host listener and supplies configuration metadata.
+     * Decorator that binds a DOM event to a host listener and supplies configuration metadata.
      * Angular invokes the supplied handler method when the host element emits the specified event,
      * and updates the bound element with the result.
+     *
      * If the handler method returns false, applies `preventDefault` on the bound element.
      *
      * @usageNotes
@@ -25939,7 +25988,7 @@
      * The following example declares a directive
      * that attaches a click listener to a button and counts clicks.
      *
-     * ```
+     * ```ts
      * @Directive({selector: 'button[counting]'})
      * class CountClicks {
      *   numberOfClicks = 0;
@@ -31317,7 +31366,6 @@
     exports.ɵɵtextInterpolateV = ɵɵtextInterpolateV;
     exports.ɵɵembeddedViewStart = ɵɵembeddedViewStart;
     exports.ɵɵprojection = ɵɵprojection;
-    exports.ɵɵbind = ɵɵbind;
     exports.ɵɵinterpolation1 = ɵɵinterpolation1;
     exports.ɵɵinterpolation2 = ɵɵinterpolation2;
     exports.ɵɵinterpolation3 = ɵɵinterpolation3;