Docs: Angular bootstrapping conflicts with prepareForInline call in MDX stories

[kroeder]

Describe the bug

I noticed that as soon as you enter an MDX story in angular, you get errors in the console, even though everything seems to work just fine. The error below gets triggered multiple times before the story gets rendered correctly.

zone.js:1102 Unhandled Promise rejection: The selector "sb-addons-docs-mdx-with-template--normal-d3qcvpiv4-component" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "sb-addons-docs-mdx-with-template--normal-d3qcvpiv4-component" did not match any elements
    at DefaultDomRenderer2.selectRootElement (platform-browser.js:696:1)
    at locateHostElement (core.js:9812:1)
    at ComponentFactory$1.create (core.js:25089:1)
    at ApplicationRef.bootstrap (core.js:29532:1)
    at core.js:29245:1
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (core.js:29245:1)
    at core.js:29215:1
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:400:1)
    at Object.onInvoke (core.js:28591:1) Error: The selector "sb-addons-docs-mdx-with-template--normal-d3qcvpiv4-component" did not match any elements
    at DefaultDomRenderer2.selectRootElement (http://localhost:4400/vendors~main.iframe.bundle.js:80943:19)
    at locateHostElement (http://localhost:4400/vendors~main.iframe.bundle.js:49123:25)
    at ComponentFactory$1.create (http://localhost:4400/vendors~main.iframe.bundle.js:64400:13)
    at ApplicationRef.bootstrap (http://localhost:4400/vendors~main.iframe.bundle.js:68843:42)
    at http://localhost:4400/vendors~main.iframe.bundle.js:68556:64
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (http://localhost:4400/vendors~main.iframe.bundle.js:68556:44)
    at http://localhost:4400/vendors~main.iframe.bundle.js:68526:26
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4400/vendors~main.iframe.bundle.js:202870:30)
    at Object.onInvoke (http://localhost:4400/vendors~main.iframe.bundle.js:67902:33)

To Reproduce

• Start the monorepo angular-cli example
• Search for the "MDX" story and open it
• Open the console and see the error

System

Environment Info:

  System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 3.1.1 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Safari: 15.4
  npmPackages:
    @storybook/addon-storyshots: 6.5.0-beta.6 => 6.5.0-beta.6 
    @storybook/angular: 6.5.0-beta.6 => 6.5.0-beta.6 

Additional context

After debugging for a while I found out that it happens in app/angular/src/client/preview/angular-beta/AbstractRenderer.ts between

    // This adds a new DOM-Element that Angular is going to use to bootstrap itself into it
    // It works, if you add a breakpoint here, you can see that a new element gets created in the docs tab iframe
    this.initAngularRootElement(targetDOMNode, targetSelector);

    // As soon as bootstrapModule gets called, the element is gone already. It is removed from the DOM and the above error gets thrown
    await getPlatform().bootstrapModule(
      createStorybookModule(moduleMetadata),
      parameters.bootstrapModuleOptions ?? undefined
    );

I first thought Angular does something odd with the element but found out later that for some reason "prepareInline" gets called multiple times. Every time it gets called, it does

  return React.createElement('div', {
    ref: el,
  });

If you add a breakpoint in app/angular/src/client/docs/prepareForInline.ts before React.createElement you can see that it gets called multiple times and eventually asynchronously in-between the creation of the Angular host element and the Angular bootstrap process.

[kroeder]

This seems to be resolved if you use modernInlineRender: true and also related to #18176

[MoeRT09]

This seems to be resolved if you use modernInlineRender: true and also related to #18176

While using the modernInlineRenderer fixes the errors in the browser console, it re-introduces the issue fixed with #15501, which prevented rendering the same story multiple times in the docs as described in #15170.

The modernRenderer does not use the unique Ids introduced in #15501, so this is why the issue doesn't exist there.