@storybook/angular support

[kroeder]

What feature do you want to see?

Hey, I'm one of the maintainers of @storybook/angular and we just recently integrated Ivy in the latest 6.3.0-rc release.
I tested Angular Dev Tools with Storybook and noticed that a few things don't work correctly

I'm not yet sure why but wanted to collaborate with you to solve those issues.

Why is it important to you?

Storybook offers a great dev environment to start projects or even build design systems in it so it would be the perfect place to catch CD issues as soon as possible. Without this feature, library authors using storybook can only catch certain issues when starting with their actual app.

Describe functionality in details. Apply mocks if applicable:

Reproduction: https://github.com/kroeder/angular-dev-tools-storybook-reproduction

npm install
npm run storybook

1) Angular Dev Tools don't detects that the actual Angular App is inside an iframe

The preview window (the part where the actual rendering of a story happens) is the iframe. That's how the DOM looks like

Maybe it's possible to add an environment flag "isStorybook" to the dev tools and then it searches for a specific identifier (e.g. iframe#storybook-preview-iframe #root:first-child)

There is a workaround for it. You can popout the preview window and now the Angular Dev Tools detects the angular app

2) Dev Tools does not load the component hierarchy correctly

I accidentally used Angular 11 and this is solved in Angular 12. Ignore it

If you use the same button example and put in another Angular component it is expected that you can see the child component as well. Somehow, this does not work. I noticed it doesn't even show the correct component but rather the storybook wrapper component that contains the button + the subcomponent

Additionaly

If I can be of any help let me know it! It might be an issue on the Storybook/Angular side but I'm not aware of what needs to be done.

cc @sumitarora thanks for reaching out

[kroeder]

The first issue might be related to this https://github.com/rangle/angular-devtools/blob/main/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts#L58

The ng object only exists in the iframe and not in the root view

I'm not sure if is possible to expose the iframe ng to the root frame. Should this be fixed in Storybook or is it possible to add a if storybook then condition to the dev tools?

Update

Easier as I thought

Between "ng does not exists" and the actual object I just added

window.parent.ng = window.ng;

to the preview.

Though, the Angular dev tools still do not work:

Angular application not detected.

Also, we use Angular Elements for inline rendering multiple story components into one preview window. I don't know if all Angular instances share the same ng object. I doubt it