Does not have 'ɵmod' property for imported modules (Angular 12 library + Storybook 6.4)

[IvanSkadorva]

The bug

While importing any external module to an Angular library Storybook shows "Type XXXModule does not have 'ɵmod' property"

The same goes for any module that is declared inside the import statement in the root module ( tried Angular Material, NgSelect, highCharts). I ran into this issue after migrating Angular to versions 10,11,12, but as I noticed it behaves the same even in new libraries with the latest Storybook and Angular versions.

To Reproduce Reproduction: https://60e2aab9b11773003b143a38-jpwjdkbhmh.chromatic.com/?path=/story/highcharts--default GitHub: https://github.com/IvanSkadorva/sb-angular-issue

System

    OS: Windows 10 10.0.19043
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.64)
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-essentials: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-links: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/angular: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/builder-webpack5: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/manager-webpack5: ^6.4.0-alpha.11 => 6.4.0-alpha.11    

Additional context lib.module.ts

import { NgModule } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import { LibComponent } from './lib.component';

@NgModule({
  declarations: [
    LibComponent,
  ],
  imports: [
    HighchartsChartModule
  ],
  exports: [
    LibComponent,
  ],
})
export class LibModule { }

lib.component.ts

import {Component, Input} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'lib',
  template: `
    <highcharts-chart
      [Highcharts]="Highcharts"
      [options]="chartOptions"

      style="width: 100%; height: 400px; display: block;"
    ></highcharts-chart>
    <h1>{{message}}</h1>
  `,
  styles: [
  ]
})
export class LibComponent {
  @Input() message: string = '';
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    series: [{
      data: [1, 2, 3],
      type: 'line'
    }]
  };
}

lib.stories.ts

import {moduleMetadata, Meta, Story} from '@storybook/angular';

import { CommonModule } from '@angular/common';
import { LibComponent } from './lib.component';
import {HighchartsChartModule} from "highcharts-angular";

export default {
  component: LibComponent,
  decorators: [
    moduleMetadata({
      declarations: [LibComponent],
      imports: [CommonModule,HighchartsChartModule],
    }),
  ],
  title: 'HighCharts',
} as Meta;

const Template: Story<LibComponent> = args => ({
  props: {
    ...args,
  },
});

export const Default = Template.bind({});
Default.args = {
  message: 'Hello world'
};

[ronysason]

Any progress? Happens for me as well

[IvanSkadorva]

@ronysason , no. I've spent almost two weeks but didn't find any solution

[ninadvadujkar]

@IvanSkadorva If that module is built via Ivy, then it works with Storybook 6.3 But since you're facing issue with a 3rd party module, I don't think you could do anything. I faced this issue with my own Angular library and I just moved to Ivy to make it work with Storybook 6.3

[IvanSkadorva]

@ninadvadujkar, in my original project I use the following list of modules:

imports: [
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    CdkTableModule,
    CdkStepperModule,
    TextFieldModule,
    NgSelectModule,
    HttpClientModule,
    OverlayModule,
    HighchartsChartModule,
    TooltipModule
  ],

And if your suggestion is right, everything related to Angular Material (I'm sure that Angular Material is Ivy compatible🙂) should work without errors, but it doesn't. I'm still getting errors with Material modules

[ninadvadujkar]

@IvanSkadorva I think currently all NPM packages are being built with the legacy view engine compiler. Angular deprecated the legacy compiler with v12 and they'll remove it in v13. So as far as my knowledge goes, most of the stuff that's on NPM repository is still built with legacy view engine compiler. Also because Angular (when they released Ivy in v9) suggested to keep on building libraries with legacy compiler. Here's why

Since Storybook v6.3 is having issues with packages built with legacy view engine compiler, all those packages that belong to this category might face this issue.

To verify this, you can quickly create a dummy/sample Angular library in your project, make sure to enable Ivy by setting "enableIvy": true in projects/<your-library>/tsconfig.lib.prod.json

[IvanSkadorva]

@ninadvadujkar , thanks for your explanation! If that's the case, there is nothing we can do about it, and the only way is to simply stop using Storybook. Sounds awful! After over 70 stories in my project, I don't want to just forget about Storybook)

@shilman, what can the Storybook team do about it?

[shilman]

@IvanSkadorva do you have a reproduction repo you can share? or you can create one with npx sb repro and link it here.

[IvanSkadorva]

@shilman , in the description of the issue ☝️

[shilman]

@IvanSkadorva sorry I missed that!

@ThibaudAV @kroeder any chance you can take a look at this one?

[IvanSkadorva]

@shilman, @ThibaudAV, @kroeder do you have any progress?

[IvanSkadorva]

@shilman, @ThibaudAV, @kroeder I'm still getting this error. Any ideas?

[danielHin]

Hey everyone,

We've got a internal angular library project which we are importing in our stories. Since we've updated from angular 11 to 12 and storybook to 6.3, we are facing the same issue.

Not using the --configuration production flag (which disables ivy) when building the library fixes the issue for us

For our setup its fine for now, but not quite sure about the impact for other projects.

Thanks @ninadvadujkar for the explanation. I've spent loads of time debugging webpack as I was suspect the upgrade to webpack5 being the issue here. This helped me a lot!

Edit Just made a couple of tests and also tried the 'How can I opt out Ivy' from the FAQ https://storybook.js.org/docs/angular/workflows/faq#how-can-i-opt-out-of-angular-ivy Disabling Ivy within the storybook setup is also working with libraries built 'using' view engine/legacy compiler.

[yuriy-sng]

In my case this issue started appearing after I moved my library third party dependencies (carbon-components and carbon-components-angular) to the library's package.json (previously they were in the workspace one). After I duplicated them into the workspace package.json, the issue was gone.

@angular/core@12.2.8 @storybook/angular@6.3.9

[thatguycodes]

Hi guys has anyone found a solution to this?

[sainture]

okay, so based on the above answers, there seem to be two options assuming that you are using Angular 11 library and storybook 6.4.*

1. Enable Ivy for the Angular 11 library in tsconfig.lib.prod.json file. "angularCompilerOptions": { "enableIvy": true } (this was not suitable for us as other internal applications that are using this library, are also using Angular 11 with Ivy disabled)

2. Disable Ivy in Storybook settings as pointed out in this link https://storybook.js.org/docs/angular/faq#how-can-i-opt-out-of-angular-ivy (this seem to be a better fit for my situation)

Thanks @danielHin @ninadvadujkar

[IvanPacanov]

You have propably problem in moduleMetadata inside lib.stories.ts instead declaration LibComponent use import LibModule, also remove the HighchartsChartModule, you imported it inside LibModule. I had the same problem and was related to imports and declarations in stories.ts

[kevsturge]

The resolution to this was to import the Module and not just the component

component: ProgressStepperComponent, decorators: [ moduleMetadata({ imports: [ProgressStepperModule], }), withStyleWrapper(), ],

[sdspl-vanmalideshani]

Someone help me to fix the issue ScrollingModule does not have a module def (ɵmod property). i did not use any where how can i fix it?. I got when i am trying to upgrade angular 15 to 16 .Project compiled successfully, but i got the error on browse

[sdspl-vanmalideshani]

@All any progress to solve the issue,please