question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@storybook/angular WebPackConfigOptions is relying on hardcoded `build` target

See original GitHub issue

Describe the bug

Currently, the @storybook/angular plugin is relying hardcoded on the build target from the Angular Architect. This is a problem as it wants to collect the tsConfig information from the build target.

https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_config.ts#L100

// https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_config.ts#L100
 const { options: projectOptions } = project.architect.build;
  const normalizedAssets = normalizeAssetPatterns(
    projectOptions.assets,
    dirToSearch,
    project.sourceRoot
  );
  const projectRoot = path.resolve(dirToSearch, project.root);
  const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path;

You can not rely on the project options of the hardcoded build target to get the tsConfig as this will result in not finding a tsConfig if you have a build target that has not a tsConfig field.

As you can have a different builder for the architect build step for example:

      "architect": {
        "build": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "parallel": true,
            "commands": [
              {
                "command": "npx ng run my-app:build-frontend"
              },
              {
                "command": "npx ng run my-app:build-server"
              }
            ]
          },

I want to specify storybook which target it should take in this case myapp:build-frontend to get the tsConfig options out of it. Otherwise, it will result in the following Error:

[error] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:117:11)
    at Object.resolve (path.js:980:7)
    at Object.getAngularCliWebpackConfigOptions (/.../node_modules/@storybook/angular/dist/server/angular-cli_config.js:99:39)
    at Object.webpackFinal (/.../node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js:7:56)
    at /.../node_modules/@storybook/core/dist/server/presets.js:261:72

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

6reactions
lukasholzercommented, Jun 15, 2020

So If you want to implement this approach I could help you with that, as it is my daily job, creating angular builders and setup for https://github.com/Dynatrace/barista 😂

3reactions
shilmancommented, Jun 16, 2020

@kroeder @lukasholzer this sounds reasonable to me!

Read more comments on GitHub >

github_iconTop Results From Across the Web

@storybook/builder-webpack5 | Yarn - Package Manager
Builder implemented with webpack5 and webpack5 -compatible loaders/plugins/config, used by @storybook/core-server to build the preview iframe.
Read more >
Angular 5 Tutorial: Guide to Your First Angular 5 App - Toptal
Build a notes application from scratch for your first Angular 5 app. Learn Angular CLI, use RxJS, implement Firebase as the back-end, and...
Read more >
storybook-addon-turbo-build
A Storybook addon that improves your Storybook build time by tweaking webpack configuration. Improvements such as replacing Terser with ESBuild or disabling ...
Read more >
Core Performance Improvements, Webpack 5, React Native ...
All settings that were in workspace.json, but not related to a ... a dependency on the build target of projects that app1 depends...
Read more >
nrwl/storybook: Versions - Openbase
angular : local imports in webpack-dev-server custom config (#13156) (c0ee01f) ... storybook: remove hard-coded ci:true option (#9827) (c0de03b), ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found