Angular: Module not found: Error: Can't resolve '@abp/settings/setting.service'

Describe the bug When running ‘npm run storyboard’ few of my node_modules are not found. And all of them is starting with ‘@abp/’. So basically it cant find modules that starts with ‘@abp’. The path is added to tsconfig.json.

To Reproduce Steps to reproduce the behavior:

1. Followed storybook starting guide
2. npm run storyboard
3. See error

Screenshots node_modules/abp-ng2-module/dist/src:

Code snippets Error:

Module not found: Error: Can't resolve '@abp/auth/permission-checker.service' in 'C:\Users\lklingenberg\source\repos\Catalysts-frontend\src\shared\common'
 @ ./src/shared/common/app-component-base.ts 1:0-80 17:39-63
 @ ./src/app/main/timelineComponent/timelines/view-timeline-components/timeline/view-timeline.component.ts
 @ ./src/stories/index.ts
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./node_modules/tether/dist/css/tether.css ./src/assets/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css ./node_modules/prismjs/themes/prism.css ./node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css ./node_modules/bootstrap-daterangepicker/daterangepicker.css ./node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css ./node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css ./node_modules/bootstrap-select/dist/css/bootstrap-select.css ./node_modules/select2/dist/css/select2.css ./node_modules/rangeslider.js/dist/rangeslider.css ./node_modules/ion-rangeslider/css/ion.rangeSlider.css ./node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css ./node_modules/dropzone/dist/dropzone.css ./node_modules/summernote/dist/summernote.css ./node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css ./node_modules/animate.css/animate.min.css ./node_modules/toastr/build/toastr.css ./node_modules/jstree/dist/themes/default/style.css ./node_modules/morris.js/morris.css ./node_modules/chartist/dist/chartist.css ./node_modules/socicon/css/socicon.css ./node_modules/font-awesome/css/font-awesome.css ./node_modules/quill/dist/quill.core.css ./node_modules/quill/dist/quill.snow.css ./node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css ./node_modules/primeng/resources/primeng.min.css ./node_modules/primeng/resources/themes/bootstrap/theme.css ./node_modules/bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.min.css ./node_modules/primeicons/primeicons.css ./src/assets/metronic/src/vendors/line-awesome/css/line-awesome.css ./src/assets/metronic/src/vendors/flaticon/css/flaticon.css ./src/assets/metronic/src/vendors/metronic/css/styles.css ./src/assets/Jcrop/css/Jcrop.css ./src/assets/primeng/file-upload/css/primeng.file-upload.css ./src/assets/primeng/autocomplete/css/primeng.autocomplete.css ./src/app/shared/core.less ./src/app/shared/layout/layout.less ./src/assets/fonts/fonts-poppins.css ./src/assets/fonts/fonts-roboto.css ./src/styles.css

.storybook/tsconfig.json:

{
  "extends": "../src/tsconfig.json",
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": [
    "../src/**/*",
  ],
  "paths": {
    "@env/*" : ["src/environments/*"],
    "@abp/*" : ["../node_modules/abp-ng2-module/dist/src/**/*"]
  }
}

.storybook/config.js:

import { configure } from '@storybook/angular';
function loadStories() {
  require('../src/stories/index.ts');
}
configure(loadStories, module);

src/index.ts:

import { storiesOf } from '@storybook/angular';
import { ViewTimelineComponent } from '../app/main/timelineComponent/timelines/view-timeline-components/timeline/view-timeline.component';
storiesOf('My timeline components', module)
  .add('View Timeline Component', () => ({
    component: ViewTimelineComponent,
    props: {
      text: 'Timeline View Component',
    },
  }));

src/tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es6", "dom" ],
    "mapRoot": "./",
    "module": "esnext",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "baseUrl": ".",
    "paths": {
      "@abp/*": [ "../node_modules/abp-ng2-module/dist/src/*" ],
      "@app/*": [ "./app/*" ],
      "@shared/*": [ "./shared/*" ],
      "@node_modules/*": [ "../node_modules/*" ],
      "@angular/*": [ "../node_modules/@angular/*" ]
    }
  },
  "exclude": [ "node_modules" ]
}

Imports of AppComponentBase:

import { PermissionCheckerService } from '@abp/auth/permission-checker.service';
import { FeatureCheckerService } from '@abp/features/feature-checker.service';
import { LocalizationService } from '@abp/localization/localization.service';
import { MessageService } from '@abp/message/message.service';
import { AbpMultiTenancyService } from '@abp/multi-tenancy/abp-multi-tenancy.service';
import { NotifyService } from '@abp/notify/notify.service';
import { SettingService } from '@abp/settings/setting.service';
import { Injector } from '@angular/core';
import { AppConsts } from '@shared/AppConsts';
import { AppUrlService } from '@shared/common/nav/app-url.service';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { AppUiCustomizationService } from '@shared/common/ui/app-ui-customization.service';
import { PrimengTableHelper } from 'shared/helpers/PrimengTableHelper';

System:

• Framework: angular 6.1.0
• Version: 4.0.8

[mdunhem]

@larsklingenberg So I ran into this issue today and I found that the problem was easily fixed. The cli updated the build options which was causing storybook to throw an exception while trying to generate the angular webpack config. I just needed to add 2 properties to the angular.json build options.

optimization: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/schema.json#L57-L80

sourceMap: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/schema.json#L103-L137

These 2 properties used to be just boolean’s but have been updated to allow objects with more fine grained control of optimizations. In the webpack config function in the angular-builder, it tries to destructure the angular.json config but if those properties aren’t there (as was my case) it would throw, causing storybook to fail.

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L36-L41

[kroeder]

Can you post your angular.json?

Your project-structure is not as expected in a common angular project

• tsconfig.json should be in your root folder besides node_modules (this would eliminate "@angular/*": [ "../node_modules/@angular/*" ] - typescript automatically searches in node_modules when you do import { ... } from '@angular/...')
• src would’ve a tsconfig.app.json that includes the root tsconfig and does custom stuff for just this app

No worries, I don’t (not yet 😄 ) say you have to reconfigure your project I think there might be an issue loading all configurations for storybook correctly.