fix(ivy): process creation mode deeply before running update mode (angular#27744)

Prior to this commit, we had two different modes for change detection
execution for Ivy, depending on whether you called `bootstrap()` or
`renderComponent()`. In the former case, we would complete creation
mode for all components in the tree before beginning update mode for
any component. In the latter case, we would run creation mode and
update mode together for each component individually.

Maintaining code to support these two different execution orders was
unnecessarily complex, so this commit aligns the two bootstrapping
mechanisms to execute in the same order. Now creation mode always
runs for all components before update mode begins.

This change also simplifies our rendering logic so that we use
`LView` flags as the source of truth for rendering mode instead of
`rf` function arguments. This fixed some related bugs (e.g. calling
`ViewRef.detectChanges` synchronously after the view's creation
would create view nodes twice, view queries would execute twice, etc).

PR Close angular#27744

Author: kara

packages/common/test/BUILD.bazel

@@ -15,6 +15,7 @@ ts_library(
         "//packages/platform-browser",
         "//packages/platform-browser-dynamic",
         "//packages/platform-browser/testing",
+        "//packages/private/testing",
     ],
 )
 

packages/common/test/directives/ng_component_outlet_spec.ts

@@ -11,6 +11,7 @@ import {NgComponentOutlet} from '@angular/common/src/directives/ng_component_out
 import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
 import {TestBed, async} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {modifiedInIvy} from '@angular/private/testing';
 
 describe('insert/remove', () => {
 
@@ -106,17 +107,20 @@ describe('insert/remove', () => {
 
      }));
 
-  it('should resolve a with injector', async(() => {
-       let fixture = TestBed.createComponent(TestComponent);
 
-       fixture.componentInstance.cmpRef = null;
-       fixture.componentInstance.currentComponent = InjectedComponent;
-       fixture.detectChanges();
-       let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef !;
-       expect(cmpRef).toBeAnInstanceOf(ComponentRef);
-       expect(cmpRef.instance).toBeAnInstanceOf(InjectedComponent);
-       expect(cmpRef.instance.testToken).toBeNull();
-     }));
+  modifiedInIvy('Static ViewChild and ContentChild queries are resolved in update mode')
+      .it('should resolve with an injector', async(() => {
+            let fixture = TestBed.createComponent(TestComponent);
+
+            // We are accessing a ViewChild (ngComponentOutlet) before change detection has run
+            fixture.componentInstance.cmpRef = null;
+            fixture.componentInstance.currentComponent = InjectedComponent;
+            fixture.detectChanges();
+            let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef !;
+            expect(cmpRef).toBeAnInstanceOf(ComponentRef);
+            expect(cmpRef.instance).toBeAnInstanceOf(InjectedComponent);
+            expect(cmpRef.instance.testToken).toBeNull();
+          }));
 
   it('should render projectable nodes, if supplied', async(() => {
        const template = `<ng-template>projected foo</ng-template>${TEST_CMP_TEMPLATE}`;

packages/core/src/render3/bindings.ts

@@ -11,7 +11,7 @@ import {devModeEqual} from '../change_detection/change_detection_util';
 import {assertDataInRange, assertLessThan, assertNotEqual} from './assert';
 import {throwErrorIfNoChangesMode} from './errors';
 import {BINDING_INDEX, LView} from './interfaces/view';
-import {getCheckNoChangesMode, getCreationMode} from './state';
+import {getCheckNoChangesMode, isCreationMode} from './state';
 import {NO_CHANGE} from './tokens';
 import {isDifferent} from './util';
 
@@ -44,7 +44,7 @@ export function bindingUpdated(lView: LView, bindingIndex: number, value: any):
   } else if (isDifferent(lView[bindingIndex], value)) {
     if (ngDevMode && getCheckNoChangesMode()) {
       if (!devModeEqual(lView[bindingIndex], value)) {
-        throwErrorIfNoChangesMode(getCreationMode(), lView[bindingIndex], value);
+        throwErrorIfNoChangesMode(isCreationMode(lView), lView[bindingIndex], value);
       }
     }
     lView[bindingIndex] = value;

packages/core/src/render3/component.ts

@@ -22,7 +22,7 @@ import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition'
 import {TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
 import {PlayerHandler} from './interfaces/player';
 import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
-import {CONTEXT, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
+import {CONTEXT, FLAGS, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
 import {enterView, getPreviousOrParentTNode, leaveView, resetComponentState, setCurrentDirectiveDef} from './state';
 import {defaultScheduler, getRootView, readPatchedLView, stringify} from './util';
 
@@ -133,7 +133,9 @@ export function renderComponent<T>(
     component = createRootComponent(
         componentView, componentDef, rootView, rootContext, opts.hostFeatures || null);
 
-    refreshDescendantViews(rootView, null);
+    refreshDescendantViews(rootView);  // creation mode pass
+    rootView[FLAGS] &= ~LViewFlags.CreationMode;
+    refreshDescendantViews(rootView);  // update mode pass
   } finally {
     leaveView(oldView);
     if (rendererFactory.end) rendererFactory.end();

packages/core/src/render3/component_ref.ts

@@ -208,10 +208,9 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
           componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
 
       addToViewTree(rootLView, HEADER_OFFSET, componentView);
-
-      refreshDescendantViews(rootLView, RenderFlags.Create);
+      refreshDescendantViews(rootLView);
     } finally {
-      leaveView(oldLView, true);
+      leaveView(oldLView);
       if (rendererFactory.end) rendererFactory.end();
     }
 

packages/core/src/render3/hooks.ts

@@ -93,9 +93,10 @@ function queueDestroyHooks(def: DirectiveDef<any>, tView: TView, i: number): voi
  *
  * @param currentView The current view
  */
-export function executeInitHooks(currentView: LView, tView: TView, creationMode: boolean): void {
-  if (currentView[FLAGS] & LViewFlags.RunInit) {
-    executeHooks(currentView, tView.initHooks, tView.checkHooks, creationMode);
+export function executeInitHooks(
+    currentView: LView, tView: TView, checkNoChangesMode: boolean): void {
+  if (!checkNoChangesMode && currentView[FLAGS] & LViewFlags.RunInit) {
+    executeHooks(currentView, tView.initHooks, tView.checkHooks, checkNoChangesMode);
     currentView[FLAGS] &= ~LViewFlags.RunInit;
   }
 }
@@ -106,17 +107,19 @@ export function executeInitHooks(currentView: LView, tView: TView, creationMode:
  * @param currentView The current view
  */
 export function executeHooks(
-    data: LView, allHooks: HookData | null, checkHooks: HookData | null,
-    creationMode: boolean): void {
-  const hooksToCall = creationMode ? allHooks : checkHooks;
+    currentView: LView, allHooks: HookData | null, checkHooks: HookData | null,
+    checkNoChangesMode: boolean): void {
+  if (checkNoChangesMode) return;
+
+  const hooksToCall = currentView[FLAGS] & LViewFlags.FirstLViewPass ? allHooks : checkHooks;
   if (hooksToCall) {
-    callHooks(data, hooksToCall);
+    callHooks(currentView, hooksToCall);
   }
 }
 
 /**
  * Calls lifecycle hooks with their contexts, skipping init hooks if it's not
- * creation mode.
+ * the first LView pass.
  *
  * @param currentView The current view
  * @param arr The array in which the hooks are found