Repository: storybook
Issue: Docs: Angular bootstrapping conflicts with prepareForInline call in MDX stories
Labels: bug,angular,addon: docs

**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 

```typescript
    // 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.