Large Angular component initialization not complete when story_store applyLoaders promise resolves

[anwalkers]

Describe the bug

My best guess is that larger Angular component stories or components that rely on large external libraries, for example our common map control is a large component and depends on the google javascript mapping API, aren't completely constructed when the promise from the applyLoaders() method in the story_store resolves. I have seen strange typescript transpilation of async/await in my code before...

If one of the larger component stories is the first loaded, usually from a deep link to the story, all subsequent stories are broken and you can't get storybook back to a running state without reloading from the base URL or a small story URL.

There is a console error thrown from the StorybookWrapper stating provider.ngAfterViewInit is not a function when a larger component story is the first story loaded.

If I add a check in core.js for undefined on provider functions I can get everything loaded correctly.

If this same larger component story is the second story loaded, navigated to after a smaller component story loads without error, then the larger story will also load without error, and all subsequent stories without error.

To Reproduce

I tried to pull your repo and introduce a larger component user story but ran into issues with puppeteer on WSL2 and also out of time to try and setup a PR with an example. Was thinking about using the google map from the angular material components library.

System

Environment Info:

System:
OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.21.0/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
Browsers:
Chrome: 90.0.4430.212
npmPackages:
@storybook/addon-a11y: ^6.2.9 => 6.2.9
@storybook/addon-essentials: ^6.2.9 => 6.2.9
@storybook/addon-storysource: ^6.2.9 => 6.2.9
@storybook/angular: ^6.2.9 => 6.2.9

Additional context

Not sure if this is related to issue Storybook 6.2.0-beta new angular renderer ovverides properties

[shilman]

Can you please create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description? We prioritize issues with reproductions over those without. Thank you! 🙏

[anwalkers]

@shilman I have isolated it down to the syntax for defining the ngrx ROOT_REDUCERS token. The error in the alpha release is different but is still broken. All three ways for defining the ActionReducerMap work with the angular application, but using the new InjectionToken<ActionReducerMap<State, Action>> approach will result in the error above in 6.2.9, and the following error in 6.3.0-alpha.36.

This definition of the reducers works in the application and the storybook.

// CASE1: WORKS for both storybook and application
export const ROOT_REDUCERS: ActionReducerMap<State, Action> = {
  [fromProperty.propertyFeatureKey]: fromProperty.reducer,
};

This definition of the reducers works in the application, but not in storybook. There is a case 2 where I create the factory function and specify a provider that uses the factory function in the module.

// CASE 3: BROKEN for storybook, WORKS for application
export const ROOT_REDUCERS = new InjectionToken<ActionReducerMap<State, Action>>('Root reducers token', {
  factory: () => ({
    [fromProperty.propertyFeatureKey]: fromProperty.reducer,
  })
});

Here is the repo with example built using your project scaffolding

[anwalkers]

@shilman Here are the ROOT_REDUCER token definition cases I have tried...

1. Repro project with v6.2.9
   • All cases pass (Yeah I am now confused because I thought this failed, but it doesn't)
2. Repro project with v6.3.0-alpha.36
   • Case 1 pass
   • Case 2 & 3 fail
3. My company project with 6.2.9
   • All cases fail (So why did they pass up above? Still the undefined angular lifecycle errors)
4. My company project with 6.3.0-alpha.36
   • Case 1 pass
   • Case 2 & 3 fail

I am starting to question if the errors are related between 6.2.9 and 6.3.0-alpha.36. The only good news is with 6.3.0-alpha.36 I get consistent pass/fail behavior.

[anwalkers]

@shilman I have tested this issue against 6.3.0-beta.8 and case 2 and 3 from the repro sample still fail.

[anwalkers]

@shilman From our application using release candidate.

OUR APPLICATION Environment Info:

System:
OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.21.0/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
Browsers:
Chrome: 90.0.4430.212
npmPackages:
@storybook/addon-a11y: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/addon-essentials: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/addon-storysource: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/angular: 6.3.0-rc.0 => 6.3.0-rc.0

REPRO PROJECT Environment Info:

System:
OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
Yarn: 2.4.1 - ~/.nvm/versions/node/v12.21.0/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
Browsers:
Chrome: 90.0.4430.212
npmPackages:
@storybook/addon-actions: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/addon-docs: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/addon-essentials: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/addon-links: 6.3.0-rc.0 => 6.3.0-rc.0
@storybook/angular: 6.3.0-rc.0 => 6.3.0-rc.0