search

storybookjs / storybook

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

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

Closed larsklingenberg closed 5 years ago

larsklingenberg commented 5 years ago

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:

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:

igor-dv commented 5 years ago

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

kroeder commented 5 years ago

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

node_modules
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 🙂

larsklingenberg commented 5 years ago

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:

{
"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? :)

kroeder commented 5 years ago

Can you post your angular.json?

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

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.

larsklingenberg commented 5 years ago

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 commented 5 years ago

Any luck here?

igor-dv commented 5 years ago

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.

larsklingenberg commented 5 years ago

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

mdunhem commented 5 years ago

@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

stale[bot] commented 5 years ago

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] commented 5 years ago

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!