[Bug]: Angular ɵɵinvalidFactoryDep after upgrading to storybook 7

[warri93]

Describe the bug

I upgraded from storybook 6 to storybook 7.

Locally everything works fine when starting storybook but as soon as I build storybook I'm getting a ɵɵinvalidFactoryDep error on my IconRegistry.

I'm using MatIconRegistry from angular material and extend it with my own IconRegistry to have some more functionality. This is done within a module which is imported in my standalone component.

When running my angular application in production mode, everything is fine and I'm not getting any errors. Building storybook gives errors on this (build-storybook). Resulting in the following: Error: NG0202 ɵɵinvalidFactoryDep.

My module looks like this:

@NgModule({ providers: [ { provide: MatIconRegistry, useClass: IconRegistry, }, { provide: MATERIAL_SANITY_CHECKS, useValue: false, }, ], }) export class IconModule { constructor(iconRegistry: MatIconRegistry) { iconRegistry.addSvgIconSetInNamespace(...); iconRegistry.addSvgIconSetInNamespace(...); } }

My IconRegistry:

@Injectable() export class IconRegistry extends MatIconRegistry { getNamedSvgIcon(name: string, namespace: string = ''): Observable<SVGElement> { return super.getNamedSvgIcon(name, namespace).pipe( map((svg: SVGElement) => { svg.setAttribute(...); return svg; }) ); } }

My versions:
"@angular/core": "15.2.0",
"@nrwl/storybook": "15.9.0",
"@storybook/addon-essentials": "7.0.27",
"@storybook/angular": "7.0.27",
"@storybook/core-server": "7.0.27",
"webpack": "5.88.1",

Not sure what's going wrong here. Can anybody give me some pointers?

Thanks!

To Reproduce

No response

System

No response

Additional context

No response

[giniedp]

I experience the same issue.
Works with version 7.0.26 and breaks with version 7.0.27, so it must be one of the following changes

• Angular: Enable prod mode when Storybook is built #23404
• Angular: Fix esm issue in combination with rxjs v6 #23405
  due to the changelog https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md#7027

[warri93]

Version 7.0.26 unfortunately breaks for me on Directory import 'xxx/node_modules/rxjs/operators' is not supported resolving ES modules

[vz-tl]

Unfortunately, same still happens for v7.2.0 / 7.2.1. Had to revert back to 7.0.26.

"@angular/core": "15.2.6"
"rxjs": "7.8.0"

[warri93]

For me version 7.2.0 works
I updated my project.json to include enableProdMode: false for build-storybook

Hope that helps for you as well!

[vz-tl]

@warri93 , thx for the hint! Appreciated! But do you believe it's a good idea running Angular in dev mode on a SB production environment? Not sure in which mode Angular runs inside SB, but I still believe it also should run in prod mode for a production env, right? Hence I'd assess disabling prod mode more as a hack workaround rather than a solution to the actual issue.

[vz-tl]

Just noticed this log into console when accessing our deployed production instance:

Angular is running in development mode. Call enableProdMode() to enable production mode. 

So, it means that even right now SB runs Angular in dev mode regardless of dev or prod build :/

At least this sheds another light on the above solution setting enableProdMode: false

[atropo]

I got the same error with my setup:

Storybook 7.3.2 
Angular CLI: 15.2.9
Node: 16.14.2
Package Manager: npm 8.5.0
OS: linux x64

I confirm that workaround in #23534 (comment) works and it works on Chromatic too.

I don't know the effects of setting enableProdMode: false while building storybook.

[hrmcdonald]

I can confirm this issue also is present with Storybook 7/7.2/7.4 and Angular 16/16.1/16.2 without explicitly setting "enableProdMode": false.

For us though it seems to only occur in stories with Angular components that extend @angular/cdk imports.

[meriturva]

Same here ...comment: #23534 (comment) fix the issue. But I would like to know if it is the correct workaround. Any advice from the core team?

[valentinpalkovic]

I guess the workaround is our only solution for this issue atm. If someone could provide a minimal reproduction, we might be able to investigate the issue further and provide a proper solution.

[meriturva]

On my side, preparing a minimal project to reproduce that issue is quite complex. I work in a commercial enterprise solution. I have tried preparing a simple project with @angular/cdk without success. @hrmcdonald do you have any advice/sample using just cdk?

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[ashley-hunter]

If anyone needs a workaround for this a simple one that we discovered was to include the constructor, e.g.

@Component({
  selector: 'my-dialog-container',
  templateUrl: './dialog-container.component.html',
})
export class MyDialogContainerComponent extends CdkDialogContainer {}

Would become:

@Component({
  selector: 'my-dialog-container',
  templateUrl: './dialog-container.component.html',
})
export class MyDialogContainerComponent extends CdkDialogContainer {

  constructor(
    elementRef: ElementRef,
    focusTrapFactory: FocusTrapFactory,
    interactivityChecker: InteractivityChecker,
    ngZone: NgZone,
    overlayRef: OverlayRef,
    focusMonitor: FocusMonitor
  ) {
    super(
      elementRef,
      focusTrapFactory,
      document,
      config,
      interactivityChecker,
      ngZone,
      overlayRef,
      focusMonitor
    );
  }
}

Ensuring the constructor is there to forward all the dependencies to the base class resolved these issues for us.

[rfreydi]

I can confirm that @ashley-hunter workaround is working.

To follow what @hrmcdonald supposed, it rely on any component that extends one of @angular/cdk component.

For me it was the CdkStepper:

// not working: NG0202
export class StepsComponent extends CdkStepper {}

// working as expected
export class StepsComponent extends CdkStepper {
  constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>) {
    super(_dir, _changeDetectorRef, _elementRef);
  }
}

So search any extends Cdk in your codebase if you want to fix it quickly !