[Bug]: Angular APP_INITIALIZER not firing

[SatarisGIT]

Describe the bug

Duplicate of: #21121

But on version: 7.0.12

To Reproduce

No response

System

No response

Additional context

No response

[valentinpalkovic]

Have you followed the migration guide as suggested in the discussion in #21218?

[rdebeasi]

I'm encountering a similar issue, even after following the migration guide.

// preview.ts
export const decorators = [
  applicationConfig({
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: () => {
          console.log('Hello from useFactory');
        },
        multi: true,
      },
    ],
  }),
];

I'd expect to see "Hello from useFactory" logged to console, but I don't see any message logged.

Am I misunderstanding the migration instructions? Do I need to do something extra to make Angular core available to Storybook?

[rdebeasi]

I've created a reproduction here: https://github.com/rdebeasi/repro-storybook-22674

If you need any other information, just let me know. Thanks!

[valentinpalkovic]

Hi @rdebeasi,

I have checked out your repro. Unfortunately, I was not able to install the dependencies, because in the yarn.lock file a custom registry was given. So I have cleared the yarn.lock file, and updated in parallel all dependencies in the package.json like this:

{
  "name": "angular-latest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "storybook": "ng run angular-latest:storybook",
    "build-storybook": "ng run angular-latest:build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.1",
    "@angular/common": "^16.1.1",
    "@angular/compiler": "^16.1.1",
    "@angular/core": "^16.1.1",
    "@angular/forms": "^16.1.1",
    "@angular/platform-browser": "^16.1.1",
    "@angular/platform-browser-dynamic": "^16.1.1",
    "@angular/router": "^16.1.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.0",
    "@angular/cli": "~16.1.0",
    "@angular/compiler-cli": "^16.1.1",
    "@compodoc/compodoc": "^1.1.21",
    "@storybook/addon-essentials": "^7.1.0-alpha.36",
    "@storybook/addon-interactions": "^7.1.0-alpha.36",
    "@storybook/addon-links": "^7.1.0-alpha.36",
    "@storybook/angular": "^7.1.0-alpha.36",
    "@storybook/blocks": "^7.1.0-alpha.36",
    "@storybook/testing-library": "^0.0.14-next.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.1.0-alpha.36",
    "typescript": "~5.0.2"
  }
}

After starting Storybook, I get the console.log in the browser. So I cannot reproduce the issue :/

[rdebeasi]

Thanks for taking a look! I tried updating package.json and installing from the public npm registry, and I do indeed get the log entry when viewing the "button" story. I don't see the log entry when viewing the "Introduction" story, however.

Do you see the same behavior? Is that expected?

[valentinpalkovic]

The Introduction.mdx doesn't have any Angular components, therefore no Angular components are mounted and APP_INITIALIZER is not applied.

[rdebeasi]

Ah, thank you for explaining that! I think this behavior might have changed in Storybook 7. I have a Storybook 6 project that used APP_INITIALIZER to do some dark mode setup. That code ran even when no Angular stories were rendered. The init code stopped running in non-Angular stories when I upgraded to Storybook 7. To resolve the problem, I refactored that code into framework-agnostic JS in preview.ts.

Is this indeed a breaking change when moving from Storybook 6 to Storybook 7? If so, would it be useful to add this information to the framework-specific changes listed in the migration guide?

[valentinpalkovic]

@rdebeasi I don't think it was intended, but rather a side-effect of switching to the new standalone API. Would you like to add an entry to the migration guide? :)

[valentinpalkovic]

@SatarisGIT Do you still have issues even by following the migration guide? I would like to close this ticket otherwise.

[valentinpalkovic]

I am closing the ticket. @SatarisGIT Please let me know if you still encounter any issues.

[gogumachu]

Hi @valentinpalkovic
I encounterd this issue at storybook version 8
You can check this issue in this stackblitz project

I changed preview.ts below

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    moduleMetadata({
      providers: [
        {
          provide: APP_INITIALIZER,
          useFactory: () => {
            console.log('app intializer!!!! ');
          },
          multi: true,
        },
      ],
    }),
  ],
};

export default preview;

But I can't see my log
Did I set something wrong??