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

Question

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

IvanSkadorva opened this issue 3 years ago · comments

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'
};

Rony Sason · Answer 1 · Tue Jul 20 2021 17:39:57 GMT+0800 (China Standard Time)

Any progress? Happens for me as well

Ivan Skadorva · Answer 2 · Wed Jul 21 2021 12:48:58 GMT+0800 (China Standard Time)

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

Ninad Vadujkar · Answer 3 · Wed Jul 21 2021 16:05:07 GMT+0800 (China Standard Time)

@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

Ivan Skadorva · Answer 4 · Wed Jul 21 2021 16:56:52 GMT+0800 (China Standard Time)

@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

Ninad Vadujkar · Answer 5 · Wed Jul 21 2021 17:04:32 GMT+0800 (China Standard Time)

@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

Ivan Skadorva · Answer 6 · Wed Jul 21 2021 17:47:29 GMT+0800 (China Standard Time)

@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?

Michael Shilman · Answer 7 · Wed Jul 21 2021 17:57:39 GMT+0800 (China Standard Time)

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

Ivan Skadorva · Answer 8 · Wed Jul 21 2021 18:28:16 GMT+0800 (China Standard Time)

@shilman , in the description of the issue ☝️

Michael Shilman · Answer 9 · Wed Jul 21 2021 23:35:07 GMT+0800 (China Standard Time)

@IvanSkadorva sorry I missed that!

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

Ivan Skadorva · Answer 10 · Fri Jul 23 2021 18:52:24 GMT+0800 (China Standard Time)

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

Ivan Skadorva · Answer 11 · Mon Aug 09 2021 15:43:54 GMT+0800 (China Standard Time)

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

Daniel · Answer 12 · Mon Aug 23 2021 21:43:12 GMT+0800 (China Standard Time)

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 · Answer 13 · Fri Dec 31 2021 00:40:28 GMT+0800 (China Standard Time)

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

Theodore Obonye · Answer 14 · Tue Mar 08 2022 20:45:27 GMT+0800 (China Standard Time)

Hi guys has anyone found a solution to this?

sandeep aggarwal · Answer 15 · Mon Mar 28 2022 08:09:20 GMT+0800 (China Standard Time)

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.*

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)
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

Mateusz Pacan · Answer 16 · Mon Apr 03 2023 18:35:55 GMT+0800 (China Standard Time)

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

Kevin Sturge · Answer 17 · Fri Dec 08 2023 02:49:12 GMT+0800 (China Standard Time)

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

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

sdspl-vanmalideshani · Answer 18 · Thu Apr 18 2024 13:00:36 GMT+0800 (China Standard Time)

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 · Answer 19 · Tue Apr 23 2024 18:45:40 GMT+0800 (China Standard Time)

@ALL any progress to solve the issue,please