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

Created on 22 Nov 2018  路  11Comments  路  Source: storybookjs/storybook

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:
abp

Code snippets
Error:
```ERROR in ./src/shared/common/app-component-base.ts
Module not found: Error: Can't resolve '@abp/auth/permission-checker.service' in 'C:UserslklingenbergsourcereposCatalysts-frontendsrcsharedcommon'
@ ./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:
```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
angular has workaround inactive question / support
Source
picture larsklingenberg

Most helpful comment

@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

picture mdunhem on 20 Jan 2019
🎉1 👍1

All 11 comments

I've edited the issue because the code examples were not readable.

igor-dv picture igor-dv on 22 Nov 2018
👍1

@larsklingenberg why adding lots of paths that are not necessary? 

      "@node_modules/*": [ "../node_modules/*" ],
      "@angular/*": [ "../node_modules/@angular/*" ]

Is your project structure kinda like this?

projects
-- project-a/tsconfig.json
-- project-b/tsconfig.json

I need more information about your angular version, storybook version, (nvm) how your setup is in general. Are you using angular-cli projects, nrwl / nx or something self-made?

I'm wondering, because your paths to node_modules are ../node_modules but tsconfig should be in the same folder as ./node_modules

Also, I never had to do
"@abp/*": [ "../node_modules/abp-ng2-module/dist/src/*" ],
In my environment, except I wanted to add a path to a local dist folder

Before I assume more things, lets first talk about your project setup 馃檪

kroeder picture kroeder on 22 Nov 2018

I use something called Aspnet Zero which provided Angluar-frontend. So they had a setup before. I have no "project"-folder, but it does not seem that this is the problem.

Project files:
project_files

Part of package.json:
```json
{
"name": "abp-zero-template",
"version": "5.6.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"publish": "ng build --prod",
"start": "ng serve --host 0.0.0.0 --port 4200",
"hmr": "ng serve --host 0.0.0.0 --port 4200 --hmr",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor",
"storybook": "start-storybook -p 9001 -c .storybook"
},
...
````
Is there any more info I can give you about the setup? :)

larsklingenberg picture larsklingenberg on 22 Nov 2018

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.

kroeder picture kroeder on 23 Nov 2018
👍1

Here you go :) 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "abp-zero-template": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              {
                "glob": "abp.signalr-client.js",
                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
                "output": "/assets/abp"
              },
              {
                "glob": "**.*",
                "input": "node_modules/bootstrap-select/dist/js/i18n",
                "output": "/assets/localization/bootstrap-select"
              },
              {
                "glob": "**.*",
                "input": "node_modules/timeago/locales",
                "output": "/assets/localization/jquery-timeago"
              }
            ],
            "styles": [
              "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"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/jquery-validation/dist/jquery.validate.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/js-cookie/src/js.cookie.js",
              "node_modules/jquery.uniform/dist/js/jquery.uniform.standalone.js",
              "node_modules/jquery-form/src/jquery.form.js",
              "node_modules/timeago/jquery.timeago.js",
              "node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
              "node_modules/localforage/dist/localforage.js",
              "node_modules/morris.js/morris.js",
              "node_modules/chartist/dist/chartist.js",
              "node_modules/raphael/raphael.js",
              "node_modules/jquery-sparkline/jquery.sparkline.js",
              "node_modules/jstree/dist/jstree.js",
              "node_modules/bootstrap-switch/dist/js/bootstrap-switch.js",
              "node_modules/spin.js/spin.js",
              "node_modules/spin.js/jquery.spin.js",
              "node_modules/block-ui/jquery.blockUI.js",
              "src/assets/jquery.blockUI/defaults.js",
              "node_modules/sweetalert/dist/sweetalert.min.js",
              "node_modules/toastr/toastr.js",
              "node_modules/moment/min/moment-with-locales.js",
              "node_modules/moment-timezone/builds/moment-timezone-with-data.js",
              "node_modules/bootstrap-daterangepicker/daterangepicker.js",
              "node_modules/bootstrap-select/dist/js/bootstrap-select.js",
              "node_modules/underscore/underscore.js",
              "node_modules/mustache/mustache.js",
              "node_modules/tether/dist/js/tether.js",
              "node_modules/push.js/bin/push.js",
              "node_modules/js-url/url.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",
              "node_modules/select2/dist/js/select2.js",
              "node_modules/bootstrap-notify/bootstrap-notify.min.js",
              "node_modules/chart.js/dist/Chart.bundle.min.js",
              "node_modules/bootstrap-markdown/js/bootstrap-markdown.js",
              "node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
              "node_modules/jquery-mousewheel/jquery.mousewheel.js",
              "src/assets/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js",
              "node_modules/flot/jquery.flot.js",
              "node_modules/flot/jquery.flot.pie.js",
              "node_modules/flot/jquery.flot.categories.js",
              "node_modules/flot/jquery.flot.time.js",
              "node_modules/waypoints/lib/jquery.waypoints.min.js",
              "node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js",
              "node_modules/topojson/dist/topojson.min.js",
              "node_modules/easy-pie-chart/dist/easypiechart.js",
              "node_modules/jquery.inputmask/dist/jquery.inputmask.bundle.js",
              "node_modules/quill/dist/quill.js",
              "node_modules/bootstrap4-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
              "src/assets/bootstrap4-datepicker/defaults.js",
              "src/assets/Jcrop/js/jquery.color.js",
              "src/assets/Jcrop/js/Jcrop.js",
              "src/assets/metronic/src/js/framework/base/app.js",
              "src/assets/metronic/src/js/framework/base/util.js",
              "src/assets/metronic/src/js/framework/components/general/dropdown.js",
              "src/assets/metronic/src/js/framework/components/general/example.js",
              "src/assets/metronic/src/js/framework/components/general/header.js",
              "src/assets/metronic/src/js/framework/components/general/menu.js",
              "src/assets/metronic/src/js/framework/components/general/messenger.js",
              "src/assets/metronic/src/js/framework/components/general/offcanvas.js",
              "src/assets/metronic/src/js/framework/components/general/portlet.js",
              "src/assets/metronic/src/js/framework/components/general/quicksearch.js",
              "src/assets/metronic/src/js/framework/components/general/scroll-top.js",
              "src/assets/metronic/src/js/framework/components/general/toggle.js",
              "src/assets/metronic/src/js/framework/components/plugins/base/bootstrap-notify.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/base/toastr.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/charts/chart.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-markdown.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-switch.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-timepicker.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/jquery-validation.init.js",
              "src/assets/metronic/src/js/app/base/main.js",
              "src/assets/metronic/src/js/demo/default/base/layout.js"
            ]
          },
          "configurations": {
            "hmr": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.hmr.ts"
                }
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "abp-zero-template:build"
          },
          "configurations": {
            "hmr": {
              "browserTarget": "abp-zero-template:build:hmr"
            },
            "production": {
              "browserTarget": "abp-zero-template:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "abp-zero-template:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/jquery-validation/dist/jquery.validate.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/js-cookie/src/js.cookie.js",
              "node_modules/jquery.uniform/dist/js/jquery.uniform.standalone.js",
              "node_modules/jquery-form/src/jquery.form.js",
              "node_modules/timeago/jquery.timeago.js",
              "node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
              "node_modules/localforage/dist/localforage.js",
              "node_modules/morris.js/morris.js",
              "node_modules/chartist/dist/chartist.js",
              "node_modules/raphael/raphael.js",
              "node_modules/jquery-sparkline/jquery.sparkline.js",
              "node_modules/jstree/dist/jstree.js",
              "node_modules/bootstrap-switch/dist/js/bootstrap-switch.js",
              "node_modules/spin.js/spin.js",
              "node_modules/spin.js/jquery.spin.js",
              "node_modules/block-ui/jquery.blockUI.js",
              "src/assets/jquery.blockUI/defaults.js",
              "node_modules/sweetalert/dist/sweetalert.min.js",
              "node_modules/toastr/toastr.js",
              "node_modules/moment/min/moment-with-locales.js",
              "node_modules/moment-timezone/builds/moment-timezone-with-data.js",
              "node_modules/bootstrap-daterangepicker/daterangepicker.js",
              "node_modules/bootstrap-select/dist/js/bootstrap-select.js",
              "node_modules/underscore/underscore.js",
              "node_modules/mustache/mustache.js",
              "node_modules/tether/dist/js/tether.js",
              "node_modules/push.js/bin/push.js",
              "node_modules/js-url/url.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js",
              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",
              "node_modules/select2/dist/js/select2.js",
              "node_modules/bootstrap-notify/bootstrap-notify.min.js",
              "node_modules/chart.js/dist/Chart.bundle.min.js",
              "node_modules/bootstrap-markdown/js/bootstrap-markdown.js",
              "node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
              "node_modules/jquery-mousewheel/jquery.mousewheel.js",
              "src/assets/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js",
              "node_modules/flot/jquery.flot.js",
              "node_modules/flot/jquery.flot.pie.js",
              "node_modules/flot/jquery.flot.categories.js",
              "node_modules/flot/jquery.flot.time.js",
              "node_modules/waypoints/lib/jquery.waypoints.min.js",
              "node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js",
              "node_modules/topojson/dist/topojson.min.js",
              "node_modules/easy-pie-chart/dist/easypiechart.js",
              "node_modules/jquery.inputmask/dist/jquery.inputmask.bundle.js",
              "node_modules/quill/dist/quill.js",
              "node_modules/bootstrap4-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
              "src/assets/bootstrap4-datepicker/defaults.js",
              "src/assets/Jcrop/js/jquery.color.js",
              "src/assets/Jcrop/js/Jcrop.js",
              "src/assets/metronic/src/js/framework/base/app.js",
              "src/assets/metronic/src/js/framework/base/util.js",
              "src/assets/metronic/src/js/framework/components/general/dropdown.js",
              "src/assets/metronic/src/js/framework/components/general/example.js",
              "src/assets/metronic/src/js/framework/components/general/header.js",
              "src/assets/metronic/src/js/framework/components/general/menu.js",
              "src/assets/metronic/src/js/framework/components/general/messenger.js",
              "src/assets/metronic/src/js/framework/components/general/offcanvas.js",
              "src/assets/metronic/src/js/framework/components/general/portlet.js",
              "src/assets/metronic/src/js/framework/components/general/quicksearch.js",
              "src/assets/metronic/src/js/framework/components/general/scroll-top.js",
              "src/assets/metronic/src/js/framework/components/general/toggle.js",
              "src/assets/metronic/src/js/framework/components/plugins/base/bootstrap-notify.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/base/toastr.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/charts/chart.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-markdown.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-switch.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/bootstrap-timepicker.init.js",
              "src/assets/metronic/src/js/framework/components/plugins/forms/jquery-validation.init.js",
              "src/assets/metronic/src/js/app/base/main.js",
              "src/assets/metronic/src/js/demo/default/base/layout.js"
            ],
            "styles": [
              "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",
              "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"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              {
                "glob": "abp.signalr-client.js",
                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
                "output": "/assets/abp"
              },
              {
                "glob": "**.*",
                "input": "node_modules/bootstrap-select/dist/js/i18n",
                "output": "/assets/localization/bootstrap-select"
              },
              {
                "glob": "**.*",
                "input": "node_modules/timeago/locales",
                "output": "/assets/localization/jquery-timeago"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "abp-zero-template-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "abp-zero-template:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "abp-zero-template",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
larsklingenberg picture larsklingenberg on 23 Nov 2018

Any luck here?

larsklingenberg picture larsklingenberg on 26 Nov 2018

I wanted to take a look on this today, but unfortunately had no time for this. Will try to do this in the next upcoming days.

igor-dv picture igor-dv on 27 Nov 2018

Is there anything I can do to provide more information for you regarding my problem? :)

larsklingenberg picture larsklingenberg on 2 Jan 2019

@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

mdunhem picture mdunhem on 20 Jan 2019
🎉1 👍1

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 10 Feb 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] picture stale[bot] on 12 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

xogeny picture xogeny  路  3Comments
tlrobinson picture tlrobinson  路  3Comments
tirli picture tirli  路  3Comments
shilman picture shilman  路  3Comments
miljan-aleksic picture miljan-aleksic  路  3Comments