storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.18k stars 9.26k forks source link

Angular undefined module in imports #12900

Closed matheusAle closed 3 years ago

matheusAle commented 3 years ago

Describe the bug When I run storybook in my angular project some of my stories can't be loaded. It is very strange because my component works fine in dev and prod environment.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior Render the story

Screenshots This error appears instead of show my components.

image

image

Code snippets

import {CommonModule} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import {action} from '@storybook/addon-actions';
import {Meta, moduleMetadata, storiesOf, Story} from '@storybook/angular';
import {NgModuleMetadata} from '@storybook/angular/dist/client/preview/types';
import {SelectModule} from './select.module';

const metadata: NgModuleMetadata = {
  imports: [
    CommonModule,
    SelectModule,
    FormGroupModule,
    ReactiveFormsModule,
    SearchItemProfileModule
  ]
};
export default {
  title: 'CDK/Select',
  parameters: {
    layout: 'centered',
  },
  decorators: [
    moduleMetadata(metadata),
  ],

} as Meta;

export const Simple: Story = (args, ctx) => ({
  template: /* language=HTML */ `
    <cdk-select
      [ngModel]="options[2]"
      (ngModelChange)="valueChange($event)"
      [options]="options"
      [disabled]="disabled"
      style="width: 300px"
    ></cdk-select>
  `,
  props: args
});

System


  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.20.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.26
    @storybook/addon-docs: ^6.0.21 => 6.0.26
    @storybook/addon-essentials: ^6.0.21 => 6.0.26
    @storybook/addon-knobs: ^6.0.21 => 6.0.26
    @storybook/addon-links: ^6.0.21 => 6.0.26
    @storybook/addon-storysource: ^6.0.21 => 6.0.26
    @storybook/addon-viewport: ^6.0.21 => 6.0.26
    @storybook/addons: ^6.0.21 => 6.0.26
    @storybook/angular: ^6.0.21 => 6.0.26
Angular CLI: 9.1.12
Node: 10.20.1
OS: darwin x64

Angular: 9.1.12
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@angular/cdk                      9.2.4
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

my .storybook/tsconfig.json

{
  "extends": "../src/tsconfig.app.json",
  "compilerOptions": {
    "types": [
      "googlemaps",
      "hammerjs",
      "dom-mediacapture-record",
      "node",
      "jquery",
      "facebook-pixel"
    ],
    "paths": {
      "@app/*": [
        "src/app/*"
      ]
    }
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../src/**/*.worker.ts",
    "../projects/**/*.spec.ts",
    "../src/setupJest.ts",
    "../src/jestGlobalMocks.ts"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

Additional context Add any other context about the problem here.

Marklb commented 3 years ago

I don't think this provides enough information. That error has happened to me a lot, but it normally comes down to a Typescript problem for me.

Do you know which module is missing?

If you are unable to share a project that reproduces the problem, can you provide the paths to the related files and the select.module.ts file.

My assumption is that SelectModule is the missing one, since it is the only import missing from the provided snippet.

With the very limited information provided, I can only guess. So, do you happen to have an exported type that only exists at compile time, such as a type or interface, because depending on your tsconfig, Typescript sometimes drops all the exports in the file, instead of only the ones not used at runtime. I don't remember which setting causes it, but I used to get that every time I did a large refactor and it took a while to start recognizing it, since the error is so generic.

matheusAle commented 3 years ago

Right, select.module.ts is the missing one in this case.

the paths: src/app/modules/@cdk/forms/select/select.module.ts src/app/modules/@cdk/forms/select/select.stories.ts

I have added ah debugger and I can see SelectModule created: image

about types

Yes I see many warnings about missing exports:

console warnings ``` WARNING in ./src/app/components/search-item-profile/search-item-profile.component.ts 24:54-62 "export 'IProfile' was not found in '../search-box/search.interface' @ ./src/app/components/search-item-profile/search-item-profile.module.ts @ ./.storybook/preview.js @ ./.storybook/preview.js-generated-config-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/search-item-profile/search-item-profile.component.ts 24:82-90 "export 'IProfile' was not found in '../search-box/search.interface' @ ./src/app/components/search-item-profile/search-item-profile.module.ts @ ./.storybook/preview.js @ ./.storybook/preview.js-generated-config-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.component.ts 26:54-62 "export 'IProfile' was not found in '@app/components/search-box/search.interface' @ ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.component.ts 26:82-90 "export 'IProfile' was not found in '@app/components/search-box/search.interface' @ ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/forms/input-text-editor/input-text-editor.component.ts 297:90-106 "export 'MentionsMetadata' was not found in '@app/modules/mention/mention.helper' @ ./src/app/components/forms/input-text-editor/input-text-editor.module.ts @ ./src/app/components/forms/input-text-editor/input-texteditor.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-view-text/mention-view-text.component.ts 58:54-70 "export 'MentionsMetadata' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-view-text/mention-view-text.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-view-text/mention-view-text.component.ts 58:90-106 "export 'MentionsMetadata' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-view-text/mention-view-text.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/forms/input-text-editor/input-text-editor.component.ts 297:54-70 "export 'MentionsMetadata' was not found in '@app/modules/mention/mention.helper' @ ./src/app/components/forms/input-text-editor/input-text-editor.module.ts @ ./src/app/components/forms/input-text-editor/input-texteditor.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-input.component.ts 211:90-106 "export 'MentionsMetadata' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-input/mention-input.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-input.component.ts 211:54-70 "export 'MentionsMetadata' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-input/mention-input.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/services/modal/index.ts 7:0-92 "export 'ModalOptions' was not found in './modal-options' @ ./src/app/components/alert-modal/Alert.service.ts @ ./src/app/services/rtc/rtc.service.ts @ ./src/app/services/authentication-service/authentication.service.ts @ ./src/app/services/profile/profile.service.ts @ ./.storybook/preview.js @ ./.storybook/preview.js-generated-config-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/tabs/tabs.component.ts 172:105-136 "export 'PerfectScrollbarConfigInterface' was not found in 'ngx-perfect-scrollbar' @ ./src/app/components/tabs/tabs.module.ts @ ./src/app/pages/settings/tours/tours.module.ts @ ./src/app/modules/@cdk/tabs/tabs.module.ts @ ./src/app/modules/@cdk/tabs/tabs.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/tabs/tabs.component.ts 172:54-85 "export 'PerfectScrollbarConfigInterface' was not found in 'ngx-perfect-scrollbar' @ ./src/app/components/tabs/tabs.module.ts @ ./src/app/pages/settings/tours/tours.module.ts @ ./src/app/modules/@cdk/tabs/tabs.module.ts @ ./src/app/modules/@cdk/tabs/tabs.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/@cdk/popover/popover.directive.ts 139:54-64 "export 'PopoverDir' was not found in '@app/modules/@cdk/popover/popover-options.directive' @ ./src/app/modules/@cdk/popover/popover.module.ts @ ./src/app/modules/@cdk/tags/list-tags/tags.module.ts @ ./src/app/modules/@cdk/tags/tags.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/@cdk/popover/popover.directive.ts 139:84-94 "export 'PopoverDir' was not found in '@app/modules/@cdk/popover/popover-options.directive' @ ./src/app/modules/@cdk/popover/popover.module.ts @ ./src/app/modules/@cdk/tags/list-tags/tags.module.ts @ ./src/app/modules/@cdk/tags/tags.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/@cdk/popover/popover.directive.ts 151:881-895 "export 'PopoverOptions' was not found in '@app/modules/@cdk/popover/popover-options.directive' @ ./src/app/modules/@cdk/popover/popover.module.ts @ ./src/app/modules/@cdk/tags/list-tags/tags.module.ts @ ./src/app/modules/@cdk/tags/tags.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/@cdk/popover/popover.directive.ts 151:847-861 "export 'PopoverOptions' was not found in '@app/modules/@cdk/popover/popover-options.directive' @ ./src/app/modules/@cdk/popover/popover.module.ts @ ./src/app/modules/@cdk/tags/list-tags/tags.module.ts @ ./src/app/modules/@cdk/tags/tags.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.component.ts 30:88-102 "export 'ProfileMention' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.component.ts 30:54-68 "export 'ProfileMention' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-input/mention-collections/mention-profile/mention-profile.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-collections/mention-task/mention-task.component.ts 30:85-96 "export 'TaskMention' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-input/mention-collections/mention-task/mention-task.module.ts @ ./src/app/modules/mention/mention-view-text/mention-view-text.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/modules/mention/mention-input/mention-collections/mention-task/mention-task.component.ts 30:54-65 "export 'TaskMention' was not found in '@app/modules/mention/mention.helper' @ ./src/app/modules/mention/mention-input/mention-collections/mention-task/mention-task.module.ts @ ./src/app/modules/mention/mention-view-text/mention-view-text.module.ts @ ./src/app/modules/mention/mention.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/loading/loading-modal/loading-modal.component.ts 19:149-167 "export 'TaskViewModalInput' was not found in '@app/pages/projects/task/task-form-modal/task-form-modal.component' @ ./src/app/components/loading/loading.module.ts @ ./src/app/pages/settings/tours/tours.module.ts @ ./src/app/modules/@cdk/tabs/tabs.module.ts @ ./src/app/modules/@cdk/tabs/tabs.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css WARNING in ./src/app/components/loading/loading-modal/loading-modal.component.ts 19:187-205 "export 'TaskViewModalInput' was not found in '@app/pages/projects/task/task-form-modal/task-form-modal.component' @ ./src/app/components/loading/loading.module.ts @ ./src/app/pages/settings/tours/tours.module.ts @ ./src/app/modules/@cdk/tabs/tabs.module.ts @ ./src/app/modules/@cdk/tabs/tabs.stories.ts @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|mdx|ts))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./src/styles/themes/bootstrap.scss ./src/styles.scss ./node_modules/grapesjs/dist/css/grapes.min.css ./node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css ```
Marklb commented 3 years ago

Update: I decided to take another look at this, now that I know it isn't an Angular problem and looks like it's just how Storybook is compiling the Typescript used by Angular.

You can try the importsNotUsedAsValues option, but I reproduced those warnings in my project and it didn't change anything for me. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export

From what I can tell, my best guess is that the way Storybook's webpack config passes transpileOnly: true to fork-ts-checker-webpack-plugin is the cause. I don't know enough about how that works to fix it right now. Hopefully it won't be a problem when we update how Storybook builds Angular, but unless someone knows how to fix the current build configuration, my only suggestion is to change the imports, like I described below.

*I did attempt updating Storybook's Angular build setup last week and I did finally get AngularCompilerPlugin to successfully build, but I had to strip out a lot of configuration. So, hopefully I can start re-enabling stuff and get everything necessary to work, but no guarantee, so I wouldn't count on that being ready very soon yet.


Most of those warnings can probably be fixed by changing them to type imports.

I haven't checked if a Typescript default or config option changed, because I had already started changing mine when I updated and started getting them on basically all my type imports. So, you can figure out if there is a setting to stop that or do the the following. If you are importing an interface, which is only needed at compile time, as import { IProfile } from '../search-box/search.interface' change it to import type { IProfile } from '../search-box/search.interface'

Fixing those warnings may fix your problem, but it's still hard to tell. Just seeing the compiled module doesn't really help spot potential build issues, but it is nice to know that the compiler doesn't necessarily have a problem with the class itself. One problem with just showing that in the debugger is that I can't tell if it is hitting that export from some other file's import.

If one of those not found exports is earlier in the import hierarchy, they may be causing a problem that is propagating to that import. After typing suggestion, I looked at what you provided and see PerfectScrollbarModule and PopoverModule being used by SelectModule and warnings in files that sound like they would be in those modules, so I would start with those warnings.

If fixing those warnings don't work, maybe providing more config, because your .storybook/tsconfig.json doesn't have any of the compiler options that would be in the tsconfig files that it extends. Also, your angular.json may have some settings that probably wouldn't be affecting Storybook, but may point out something you are doing that Storybook isn't.

Based on how many "seemingly" unrelated modules are in your warnings, I would assume that you may have some other problem stories that you haven't noticed, but I don't know enough about your project to confirm that. If I am right or you just want to avoid potential warnings/errors from other stories adding noise to your debugging of the "CDK/Select" stories. What I sometimes do temporarily is change my stories glob in main.js to only resolve the file I am debugging. So, in your case, you could do the following in .storybook/main.js:

module.exports = {
  stories: [ 'src/app/modules/@cdk/forms/select/select.stories.ts' ],
  ...
}

Even though Storybook is logging those as warnings, those should probably be considered errors. I haven't looked to see if it is Webpack or one of Storybook's configurations that is deciding to consider those as warnings, but in general I consider warnings logged to the terminal, that refer to something in an Angular file, as errors. They are probably warnings, because they don't necessarily prevent the app from running. Looks like it is Webpack logging them as warnings.

matheusAle commented 3 years ago

Yes, it's working now!

As you said, I corrected all warnings and another broken stories back to work. But select.stories.ts had an especial issue, one of declared directives of PopoverModule had an broken type imported import ContextMenuEvent = JQuery.ContextMenuEvent; for an unknown’s reason it was there 😑, it don't create the directive class be declared and an undefined is added in PopoverModule declarations and exports arrays and no errors was logged. I remove it and everything works!

The bad part about it is: no errors or warning was triggered, I had to put debuggers in every imported modules of SelectModule to get know where the problems are.

Thanks for you helping @Marklb , you are the best!