@angular/core 19.1.0 → 19.1.1

package/fesm2022/core.mjs

@@ -1,10 +1,10 @@
 /**
- * @license Angular v19.1.0
+ * @license Angular v19.1.1
  * (c) 2010-2024 Google LLC. https://angular.io/
  * License: MIT
  */
 
-import { SIGNAL_NODE as SIGNAL_NODE$1, signalSetFn as signalSetFn$1, producerAccessed as producerAccessed$1, SIGNAL as SIGNAL$1, getActiveConsumer as getActiveConsumer$1, setActiveConsumer as setActiveConsumer$1, consumerDestroy as consumerDestroy$1, REACTIVE_NODE as REACTIVE_NODE$1, consumerBeforeComputation as consumerBeforeComputation$1, consumerAfterComputation as consumerAfterComputation$1, consumerPollProducersForChange as consumerPollProducersForChange$1, createSignal as createSignal$1, signalUpdateFn as signalUpdateFn$1, createComputed as createComputed$1, setThrowInvalidWriteToSignalError as setThrowInvalidWriteToSignalError$1, producerUpdateValueVersion as producerUpdateValueVersion$1, producerMarkClean as producerMarkClean$1, defaultEquals as defaultEquals$1, createWatch as createWatch$1, isInNotificationPhase as isInNotificationPhase$1 } from '@angular/core/primitives/signals';
+import { SIGNAL_NODE as SIGNAL_NODE$1, signalSetFn as signalSetFn$1, producerAccessed as producerAccessed$1, SIGNAL as SIGNAL$1, getActiveConsumer as getActiveConsumer$1, setActiveConsumer as setActiveConsumer$1, createSignal as createSignal$1, signalUpdateFn as signalUpdateFn$1, consumerDestroy as consumerDestroy$1, REACTIVE_NODE as REACTIVE_NODE$1, consumerBeforeComputation as consumerBeforeComputation$1, consumerAfterComputation as consumerAfterComputation$1, consumerPollProducersForChange as consumerPollProducersForChange$1, createComputed as createComputed$1, setThrowInvalidWriteToSignalError as setThrowInvalidWriteToSignalError$1, producerUpdateValueVersion as producerUpdateValueVersion$1, producerMarkClean as producerMarkClean$1, defaultEquals as defaultEquals$1, createWatch as createWatch$1, isInNotificationPhase as isInNotificationPhase$1 } from '@angular/core/primitives/signals';
 export { SIGNAL as ɵSIGNAL } from '@angular/core/primitives/signals';
 import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { Attribute as Attribute$1, EventContract, EventContractContainer, getAppScopedQueuedEventInfos, clearAppScopedEarlyEventContract, EventDispatcher, registerDispatcher, isEarlyEventType, isCaptureEventType, EventPhase } from '@angular/core/primitives/event-dispatch';
@@ -3482,6 +3482,40 @@ function getLViewParent(lView) {
     const parent = lView[PARENT];
     return isLContainer(parent) ? parent[PARENT] : parent;
 }
+function getOrCreateLViewCleanup(view) {
+    // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+    return (view[CLEANUP] ??= []);
+}
+function getOrCreateTViewCleanup(tView) {
+    return (tView.cleanup ??= []);
+}
+/**
+ * Saves context for this cleanup function in LView.cleanupInstances.
+ *
+ * On the first template pass, saves in TView:
+ * - Cleanup function
+ * - Index of context we just saved in LView.cleanupInstances
+ */
+function storeCleanupWithContext(tView, lView, context, cleanupFn) {
+    const lCleanup = getOrCreateLViewCleanup(lView);
+    // Historically the `storeCleanupWithContext` was used to register both framework-level and
+    // user-defined cleanup callbacks, but over time those two types of cleanups were separated.
+    // This dev mode checks assures that user-level cleanup callbacks are _not_ stored in data
+    // structures reserved for framework-specific hooks.
+    ngDevMode &&
+        assertDefined(context, 'Cleanup context is mandatory when registering framework-level destroy hooks');
+    lCleanup.push(context);
+    if (tView.firstCreatePass) {
+        getOrCreateTViewCleanup(tView).push(cleanupFn, lCleanup.length - 1);
+    }
+    else {
+        // Make sure that no new framework-level cleanup functions are registered after the first
+        // template pass is done (and TView data structures are meant to fully constructed).
+        if (ngDevMode) {
+            Object.freeze(getOrCreateTViewCleanup(tView));
+        }
+    }
+}
 
 const instructionState = {
     lFrame: createLFrame(null),
@@ -7074,6 +7108,76 @@ function unwrapElementRef(value) {
     return value instanceof ElementRef ? value.nativeElement : value;
 }
 
+const markedFeatures = new Set();
+// tslint:disable:ban
+/**
+ * A guarded `performance.mark` for feature marking.
+ *
+ * This method exists because while all supported browser and node.js version supported by Angular
+ * support performance.mark API. This is not the case for other environments such as JSDOM and
+ * Cloudflare workers.
+ */
+function performanceMarkFeature(feature) {
+    if (markedFeatures.has(feature)) {
+        return;
+    }
+    markedFeatures.add(feature);
+    performance?.mark?.('mark_feature_usage', { detail: { feature } });
+}
+
+/**
+ * Checks if the given `value` is a reactive `Signal`.
+ */
+function isSignal(value) {
+    return typeof value === 'function' && value[SIGNAL$1] !== undefined;
+}
+
+/** Symbol used distinguish `WritableSignal` from other non-writable signals and functions. */
+const ɵWRITABLE_SIGNAL = /* @__PURE__ */ Symbol('WRITABLE_SIGNAL');
+/**
+ * Utility function used during template type checking to extract the value from a `WritableSignal`.
+ * @codeGenApi
+ */
+function ɵunwrapWritableSignal(value) {
+    // Note: the function uses `WRITABLE_SIGNAL` as a brand instead of `WritableSignal<T>`,
+    // because the latter incorrectly unwraps non-signal getter functions.
+    return null;
+}
+/**
+ * Create a `Signal` that can be set or updated directly.
+ */
+function signal(initialValue, options) {
+    performanceMarkFeature('NgSignals');
+    const signalFn = createSignal$1(initialValue);
+    const node = signalFn[SIGNAL$1];
+    if (options?.equal) {
+        node.equal = options.equal;
+    }
+    signalFn.set = (newValue) => signalSetFn$1(node, newValue);
+    signalFn.update = (updateFn) => signalUpdateFn$1(node, updateFn);
+    signalFn.asReadonly = signalAsReadonlyFn.bind(signalFn);
+    if (ngDevMode) {
+        signalFn.toString = () => `[Signal: ${signalFn()}]`;
+        node.debugName = options?.debugName;
+    }
+    return signalFn;
+}
+function signalAsReadonlyFn() {
+    const node = this[SIGNAL$1];
+    if (node.readonlyFn === undefined) {
+        const readonlyFn = () => this();
+        readonlyFn[SIGNAL$1] = node;
+        node.readonlyFn = readonlyFn;
+    }
+    return node.readonlyFn;
+}
+/**
+ * Checks if the given `value` is a writeable signal.
+ */
+function isWritableSignal(value) {
+    return isSignal(value) && typeof value.set === 'function';
+}
+
 function symbolIterator() {
     // @ts-expect-error accessing a private member
     return this._results[Symbol.iterator]();
@@ -8535,23 +8639,6 @@ var TracingAction;
  */
 const TracingService = new InjectionToken(ngDevMode ? 'TracingService' : '');
 
-const markedFeatures = new Set();
-// tslint:disable:ban
-/**
- * A guarded `performance.mark` for feature marking.
- *
- * This method exists because while all supported browser and node.js version supported by Angular
- * support performance.mark API. This is not the case for other environments such as JSDOM and
- * Cloudflare workers.
- */
-function performanceMarkFeature(feature) {
-    if (markedFeatures.has(feature)) {
-        return;
-    }
-    markedFeatures.add(feature);
-    performance?.mark?.('mark_feature_usage', { detail: { feature } });
-}
-
 /**
  * Asserts that the current stack frame is not within a reactive context. Useful
  * to disallow certain code from running inside a reactive context (see {@link toSignal}).
@@ -10007,6 +10094,63 @@ function processBlockData(injector) {
     return blockDetails;
 }
 
+/** Refreshes all content queries declared by directives in a given view */
+function refreshContentQueries(tView, lView) {
+    const contentQueries = tView.contentQueries;
+    if (contentQueries !== null) {
+        const prevConsumer = setActiveConsumer$1(null);
+        try {
+            for (let i = 0; i < contentQueries.length; i += 2) {
+                const queryStartIdx = contentQueries[i];
+                const directiveDefIdx = contentQueries[i + 1];
+                if (directiveDefIdx !== -1) {
+                    const directiveDef = tView.data[directiveDefIdx];
+                    ngDevMode && assertDefined(directiveDef, 'DirectiveDef not found.');
+                    ngDevMode &&
+                        assertDefined(directiveDef.contentQueries, 'contentQueries function should be defined');
+                    setCurrentQueryIndex(queryStartIdx);
+                    directiveDef.contentQueries(2 /* RenderFlags.Update */, lView[directiveDefIdx], directiveDefIdx);
+                }
+            }
+        }
+        finally {
+            setActiveConsumer$1(prevConsumer);
+        }
+    }
+}
+function executeViewQueryFn(flags, viewQueryFn, component) {
+    ngDevMode && assertDefined(viewQueryFn, 'View queries function to execute must be defined.');
+    setCurrentQueryIndex(0);
+    const prevConsumer = setActiveConsumer$1(null);
+    try {
+        viewQueryFn(flags, component);
+    }
+    finally {
+        setActiveConsumer$1(prevConsumer);
+    }
+}
+function executeContentQueries(tView, tNode, lView) {
+    if (isContentQueryHost(tNode)) {
+        const prevConsumer = setActiveConsumer$1(null);
+        try {
+            const start = tNode.directiveStart;
+            const end = tNode.directiveEnd;
+            for (let directiveIndex = start; directiveIndex < end; directiveIndex++) {
+                const def = tView.data[directiveIndex];
+                if (def.contentQueries) {
+                    const directiveInstance = lView[directiveIndex];
+                    ngDevMode &&
+                        assertDefined(directiveIndex, 'Incorrect reference to a directive defining a content query');
+                    def.contentQueries(1 /* RenderFlags.Create */, directiveInstance, directiveIndex);
+                }
+            }
+        }
+        finally {
+            setActiveConsumer$1(prevConsumer);
+        }
+    }
+}
+
 /**
  * Defines the CSS styles encapsulation policies for the {@link Component} decorator's
  * `encapsulation` option.
@@ -13058,41 +13202,6 @@ function writeToDirectiveInput(def, instance, publicName, privateName, flags, va
     }
 }
 
-/**
- * Invoke `HostBindingsFunction`s for view.
- *
- * This methods executes `TView.hostBindingOpCodes`. It is used to execute the
- * `HostBindingsFunction`s associated with the current `LView`.
- *
- * @param tView Current `TView`.
- * @param lView Current `LView`.
- */
-function processHostBindingOpCodes(tView, lView) {
-    const hostBindingOpCodes = tView.hostBindingOpCodes;
-    if (hostBindingOpCodes === null)
-        return;
-    try {
-        for (let i = 0; i < hostBindingOpCodes.length; i++) {
-            const opCode = hostBindingOpCodes[i];
-            if (opCode < 0) {
-                // Negative numbers are element indexes.
-                setSelectedIndex(~opCode);
-            }
-            else {
-                // Positive numbers are NumberTuple which store bindingRootIndex and directiveIndex.
-                const directiveIdx = opCode;
-                const bindingRootIndx = hostBindingOpCodes[++i];
-                const hostBindingFn = hostBindingOpCodes[++i];
-                setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
-                const context = lView[directiveIdx];
-                hostBindingFn(2 /* RenderFlags.Update */, context);
-            }
-        }
-    }
-    finally {
-        setSelectedIndex(-1);
-    }
-}
 function createLView(parentLView, tView, context, flags, host, tHostNode, environment, renderer, injector, embeddedViewInjector, hydrationInfo) {
     const lView = tView.blueprint.slice();
     lView[HOST] = host;
@@ -13239,30 +13348,6 @@ function executeTemplate(tView, lView, templateFn, rf, context) {
         profiler(postHookType, context);
     }
 }
-//////////////////////////
-//// Element
-//////////////////////////
-function executeContentQueries(tView, tNode, lView) {
-    if (isContentQueryHost(tNode)) {
-        const prevConsumer = setActiveConsumer$1(null);
-        try {
-            const start = tNode.directiveStart;
-            const end = tNode.directiveEnd;
-            for (let directiveIndex = start; directiveIndex < end; directiveIndex++) {
-                const def = tView.data[directiveIndex];
-                if (def.contentQueries) {
-                    const directiveInstance = lView[directiveIndex];
-                    ngDevMode &&
-                        assertDefined(directiveIndex, 'Incorrect reference to a directive defining a content query');
-                    def.contentQueries(1 /* RenderFlags.Create */, directiveInstance, directiveIndex);
-                }
-            }
-        }
-        finally {
-            setActiveConsumer$1(prevConsumer);
-        }
-    }
-}
 /**
  * Creates directive instances.
  */
@@ -13444,33 +13529,6 @@ function applyRootElementTransformImpl(rootElement) {
 function enableApplyRootElementTransformImpl() {
     _applyRootElementTransformImpl = applyRootElementTransformImpl;
 }
-/**
- * Saves context for this cleanup function in LView.cleanupInstances.
- *
- * On the first template pass, saves in TView:
- * - Cleanup function
- * - Index of context we just saved in LView.cleanupInstances
- */
-function storeCleanupWithContext(tView, lView, context, cleanupFn) {
-    const lCleanup = getOrCreateLViewCleanup(lView);
-    // Historically the `storeCleanupWithContext` was used to register both framework-level and
-    // user-defined cleanup callbacks, but over time those two types of cleanups were separated.
-    // This dev mode checks assures that user-level cleanup callbacks are _not_ stored in data
-    // structures reserved for framework-specific hooks.
-    ngDevMode &&
-        assertDefined(context, 'Cleanup context is mandatory when registering framework-level destroy hooks');
-    lCleanup.push(context);
-    if (tView.firstCreatePass) {
-        getOrCreateTViewCleanup(tView).push(cleanupFn, lCleanup.length - 1);
-    }
-    else {
-        // Make sure that no new framework-level cleanup functions are registered after the first
-        // template pass is done (and TView data structures are meant to fully constructed).
-        if (ngDevMode) {
-            Object.freeze(getOrCreateTViewCleanup(tView));
-        }
-    }
-}
 function createTNode(tView, tParent, type, index, value, attrs) {
     ngDevMode &&
         index !== 0 && // 0 are bogus nodes and they are OK. See `createContainerRef` in
@@ -14214,30 +14272,6 @@ function createLContainer(hostNative, currentView, native, tNode) {
         assertEqual(lContainer.length, CONTAINER_HEADER_OFFSET, 'Should allocate correct number of slots for LContainer header.');
     return lContainer;
 }
-/** Refreshes all content queries declared by directives in a given view */
-function refreshContentQueries(tView, lView) {
-    const contentQueries = tView.contentQueries;
-    if (contentQueries !== null) {
-        const prevConsumer = setActiveConsumer$1(null);
-        try {
-            for (let i = 0; i < contentQueries.length; i += 2) {
-                const queryStartIdx = contentQueries[i];
-                const directiveDefIdx = contentQueries[i + 1];
-                if (directiveDefIdx !== -1) {
-                    const directiveDef = tView.data[directiveDefIdx];
-                    ngDevMode && assertDefined(directiveDef, 'DirectiveDef not found.');
-                    ngDevMode &&
-                        assertDefined(directiveDef.contentQueries, 'contentQueries function should be defined');
-                    setCurrentQueryIndex(queryStartIdx);
-                    directiveDef.contentQueries(2 /* RenderFlags.Update */, lView[directiveDefIdx], directiveDefIdx);
-                }
-            }
-        }
-        finally {
-            setActiveConsumer$1(prevConsumer);
-        }
-    }
-}
 /**
  * Adds LView or LContainer to the end of the current view tree.
  *
@@ -14264,20 +14298,6 @@ function addToEndOfViewTree(lView, lViewOrLContainer) {
     return lViewOrLContainer;
 }
 ///////////////////////////////
-//// Change detection
-///////////////////////////////
-function executeViewQueryFn(flags, viewQueryFn, component) {
-    ngDevMode && assertDefined(viewQueryFn, 'View queries function to execute must be defined.');
-    setCurrentQueryIndex(0);
-    const prevConsumer = setActiveConsumer$1(null);
-    try {
-        viewQueryFn(flags, component);
-    }
-    finally {
-        setActiveConsumer$1(prevConsumer);
-    }
-}
-///////////////////////////////
 //// Bindings & interpolations
 ///////////////////////////////
 /**
@@ -14318,13 +14338,6 @@ function storePropertyBindingMetadata(tData, tNode, propertyName, bindingIndex,
         }
     }
 }
-function getOrCreateLViewCleanup(view) {
-    // top level variables should not be exported for performance reasons (PERF_NOTES.md)
-    return (view[CLEANUP] ??= []);
-}
-function getOrCreateTViewCleanup(tView) {
-    return (tView.cleanup ??= []);
-}
 /**
  * There are cases where the sub component's renderer needs to be included
  * instead of the current renderer (see the componentSyntheticHost* instructions).
@@ -14367,17 +14380,6 @@ function setInputsForProperty(tView, lView, inputs, publicName, value) {
         writeToDirectiveInput(def, instance, publicName, privateName, flags, value);
     }
 }
-/**
- * Updates a text binding at a given index in a given LView.
- */
-function textBindingInternal(lView, index, value) {
-    ngDevMode && assertString(value, 'Value should be a string');
-    ngDevMode && assertNotSame(value, NO_CHANGE, 'value should not be NO_CHANGE');
-    ngDevMode && assertIndexInRange(lView, index);
-    const element = getNativeByIndex(index, lView);
-    ngDevMode && assertDefined(element, 'native element should exist');
-    updateTextNode(lView[RENDERER], element, value);
-}
 
 function renderComponent(hostLView, componentHostIdx) {
     ngDevMode && assertEqual(isCreationMode(hostLView), true, 'Should be run in creation mode');
@@ -15117,6 +15119,43 @@ function detectChangesInChildComponents(hostLView, components, mode) {
         detectChangesInComponent(hostLView, components[i], mode);
     }
 }
+/**
+ * Invoke `HostBindingsFunction`s for view.
+ *
+ * This methods executes `TView.hostBindingOpCodes`. It is used to execute the
+ * `HostBindingsFunction`s associated with the current `LView`.
+ *
+ * @param tView Current `TView`.
+ * @param lView Current `LView`.
+ */
+function processHostBindingOpCodes(tView, lView) {
+    const hostBindingOpCodes = tView.hostBindingOpCodes;
+    if (hostBindingOpCodes === null)
+        return;
+    try {
+        for (let i = 0; i < hostBindingOpCodes.length; i++) {
+            const opCode = hostBindingOpCodes[i];
+            if (opCode < 0) {
+                // Negative numbers are element indexes.
+                setSelectedIndex(~opCode);
+            }
+            else {
+                // Positive numbers are NumberTuple which store bindingRootIndex and directiveIndex.
+                const directiveIdx = opCode;
+                const bindingRootIndx = hostBindingOpCodes[++i];
+                const hostBindingFn = hostBindingOpCodes[++i];
+                setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
+                const context = lView[directiveIdx];
+                profiler(24 /* ProfilerEvent.HostBindingsUpdateStart */, context);
+                hostBindingFn(2 /* RenderFlags.Update */, context);
+                profiler(25 /* ProfilerEvent.HostBindingsUpdateEnd */, context);
+            }
+        }
+    }
+    finally {
+        setSelectedIndex(-1);
+    }
+}
 
 /**
  * Marks current view and all ancestors dirty.
@@ -18093,7 +18132,7 @@ function createRootComponent(componentView, rootComponentDef, rootDirectives, ho
 function setRootNodeAttributes(hostRenderer, componentDef, hostRNode, rootSelectorOrNode) {
     if (rootSelectorOrNode) {
         // The placeholder will be replaced with the actual version at build time.
-        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '19.1.0']);
+        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '19.1.1']);
     }
     else {
         // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
@@ -19005,59 +19044,6 @@ function getQueryResults(lView, queryIndex) {
         : materializeViewResults(tView, lView, tQuery, queryIndex);
 }
 
-/**
- * Checks if the given `value` is a reactive `Signal`.
- */
-function isSignal(value) {
-    return typeof value === 'function' && value[SIGNAL$1] !== undefined;
-}
-
-/** Symbol used distinguish `WritableSignal` from other non-writable signals and functions. */
-const ɵWRITABLE_SIGNAL = /* @__PURE__ */ Symbol('WRITABLE_SIGNAL');
-/**
- * Utility function used during template type checking to extract the value from a `WritableSignal`.
- * @codeGenApi
- */
-function ɵunwrapWritableSignal(value) {
-    // Note: the function uses `WRITABLE_SIGNAL` as a brand instead of `WritableSignal<T>`,
-    // because the latter incorrectly unwraps non-signal getter functions.
-    return null;
-}
-/**
- * Create a `Signal` that can be set or updated directly.
- */
-function signal(initialValue, options) {
-    performanceMarkFeature('NgSignals');
-    const signalFn = createSignal$1(initialValue);
-    const node = signalFn[SIGNAL$1];
-    if (options?.equal) {
-        node.equal = options.equal;
-    }
-    signalFn.set = (newValue) => signalSetFn$1(node, newValue);
-    signalFn.update = (updateFn) => signalUpdateFn$1(node, updateFn);
-    signalFn.asReadonly = signalAsReadonlyFn.bind(signalFn);
-    if (ngDevMode) {
-        signalFn.toString = () => `[Signal: ${signalFn()}]`;
-        node.debugName = options?.debugName;
-    }
-    return signalFn;
-}
-function signalAsReadonlyFn() {
-    const node = this[SIGNAL$1];
-    if (node.readonlyFn === undefined) {
-        const readonlyFn = () => this();
-        readonlyFn[SIGNAL$1] = node;
-        node.readonlyFn = readonlyFn;
-    }
-    return node.readonlyFn;
-}
-/**
- * Checks if the given `value` is a writeable signal.
- */
-function isWritableSignal(value) {
-    return isSignal(value) && typeof value.set === 'function';
-}
-
 /**
  * A signal factory function in charge of creating a new computed signal capturing query
  * results. This centralized creation function is used by all types of queries (child / children,
@@ -32278,6 +32264,17 @@ function ɵɵtextInterpolateV(values) {
     }
     return ɵɵtextInterpolateV;
 }
+/**
+ * Updates a text binding at a given index in a given LView.
+ */
+function textBindingInternal(lView, index, value) {
+    ngDevMode && assertString(value, 'Value should be a string');
+    ngDevMode && assertNotSame(value, NO_CHANGE, 'value should not be NO_CHANGE');
+    ngDevMode && assertIndexInRange(lView, index);
+    const element = getNativeByIndex(index, lView);
+    ngDevMode && assertDefined(element, 'native element should exist');
+    updateTextNode(lView[RENDERER], element, value);
+}
 
 /*!
  * @license
@@ -33517,30 +33514,40 @@ function recreateLView(newDef, oldDef, lView) {
     const tNode = lView[T_HOST];
     ngDevMode && assertTNodeType(tNode, 2 /* TNodeType.Element */);
     ngDevMode && assertNotEqual(newDef, oldDef, 'Expected different component definition');
-    // Recreate the TView since the template might've changed.
-    const newTView = getOrCreateComponentTView(newDef);
-    // Always force the creation of a new renderer to ensure state captured during construction
-    // stays consistent with the new component definition by clearing any old cached factories.
-    const rendererFactory = lView[ENVIRONMENT].rendererFactory;
-    clearRendererCache(rendererFactory, oldDef);
-    // Create a new LView from the new TView, but reusing the existing TNode and DOM node.
-    const newLView = createLView(parentLView, newTView, instance, getInitialLViewFlagsFromDef(newDef), host, tNode, null, rendererFactory.createRenderer(host, newDef), null, null, null);
-    // Detach the LView from its current place in the tree so we don't
-    // start traversing any siblings and modifying their structure.
-    replaceLViewInTree(parentLView, lView, newLView, tNode.index);
-    // Destroy the detached LView.
-    destroyLView(lView[TVIEW], lView);
-    // Remove the nodes associated with the destroyed LView. This removes the
-    // descendants, but not the host which we want to stay in place.
-    removeViewFromDOM(lView[TVIEW], lView);
-    // Reset the content projection state of the TNode before the first render.
-    // Note that this has to happen after the LView has been destroyed or we
-    // risk some projected nodes not being removed correctly.
-    resetProjectionState(tNode);
-    // Creation pass for the new view.
-    renderView(newTView, newLView, instance);
-    // Update pass for the new view.
-    refreshView(newTView, newLView, newTView.template, instance);
+    const zone = lView[INJECTOR].get(NgZone, null);
+    const recreate = () => {
+        // Recreate the TView since the template might've changed.
+        const newTView = getOrCreateComponentTView(newDef);
+        // Always force the creation of a new renderer to ensure state captured during construction
+        // stays consistent with the new component definition by clearing any old cached factories.
+        const rendererFactory = lView[ENVIRONMENT].rendererFactory;
+        clearRendererCache(rendererFactory, oldDef);
+        // Create a new LView from the new TView, but reusing the existing TNode and DOM node.
+        const newLView = createLView(parentLView, newTView, instance, getInitialLViewFlagsFromDef(newDef), host, tNode, null, rendererFactory.createRenderer(host, newDef), null, null, null);
+        // Detach the LView from its current place in the tree so we don't
+        // start traversing any siblings and modifying their structure.
+        replaceLViewInTree(parentLView, lView, newLView, tNode.index);
+        // Destroy the detached LView.
+        destroyLView(lView[TVIEW], lView);
+        // Remove the nodes associated with the destroyed LView. This removes the
+        // descendants, but not the host which we want to stay in place.
+        removeViewFromDOM(lView[TVIEW], lView);
+        // Reset the content projection state of the TNode before the first render.
+        // Note that this has to happen after the LView has been destroyed or we
+        // risk some projected nodes not being removed correctly.
+        resetProjectionState(tNode);
+        // Creation pass for the new view.
+        renderView(newTView, newLView, instance);
+        // Update pass for the new view.
+        refreshView(newTView, newLView, newTView.template, instance);
+    };
+    // The callback isn't guaranteed to be inside the Zone so we need to bring it in ourselves.
+    if (zone === null) {
+        recreate();
+    }
+    else {
+        zone.run(recreate);
+    }
 }
 /**
  * Replaces one LView in the tree with another one.
@@ -34967,7 +34974,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('19.1.0');
+const VERSION = new Version('19.1.1');
 
 /**
  * Combination of NgModuleFactory and ComponentFactories.