Function recreate

packages/core/src/render3/hmr.ts:244–312

()

  ngDevMode && assertNotEqual(newDef, oldDef, 'Expected different component definition');
  const zone = lView[INJECTOR].get(NgZone, null);
  const recreate = () => {
    // If we're recreating a component with shadow DOM encapsulation, it will have attached a
    // shadow root. The browser will throw if we attempt to attach another one and there's no way
    // to detach it. Our only option is to make a clone only of the root node, replace the node
    // with the clone and use it for the newly-created LView.
    if (
      oldDef.encapsulation === ViewEncapsulation.ShadowDom ||
      oldDef.encapsulation === ViewEncapsulation.ExperimentalIsolatedShadowDom
    ) {
      const newHost = host.cloneNode(false) as HTMLElement;
      host.replaceWith(newHost);
      host = newHost;
    }

    // Recreate the TView since the template might've changed.
    const newTView = getOrCreateComponentTView(newDef);

    // 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,
      null, // The renderer will be created a bit further down once the old one is destroyed.
      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);

    // Clean up any dehydrated views left over from SSR hydration.
    // Neither destroyLView nor removeViewFromDOM handle DOM nodes
    // stored in LContainer[DEHYDRATED_VIEWS], which causes duplicated
    // content when the view is re-rendered during HMR.
    cleanupDehydratedLView(lView);

    // 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 ached factories.
    const rendererFactory = lView[ENVIRONMENT].rendererFactory;
    clearRendererCache(rendererFactory, oldDef);

    // Patch a brand-new renderer onto the new view only after the old
    // view is destroyed so that the runtime doesn't try to reuse it.
    newLView[RENDERER] = rendererFactory.createRenderer(host, newDef);

    // 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);