asset path must start with the project source root

[admir86]

Describe the bug
Using storybook in a nx workspace but without the nx plugins do not work anymore.
Before I updated from ng/nx 12 to 13 and storybook from 6.3 to 6.4 it worked.

To Reproduce
Clone this repo: https://github.com/admir86/inova-test and run npm run storybook

System

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
  Binaries:
    Node: 16.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.24.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.906.0), Chromium (96.0.1054.43)
  npmPackages:
    @storybook/addon-essentials: ~6.4.9 => 6.4.9
    @storybook/angular: ~6.4.9 => 6.4.9
    @storybook/builder-webpack5: ~6.4.9 => 6.4.9
    @storybook/manager-webpack5: ~6.4.9 => 6.4.9

[shilman]

Could this be an nx issue @mandarini @juristr ?

[egorkel-da14]

I don't use nx and have the same issue. My main project is not in default directory. I started with empty workspace and added main project later. So I don't have src folder in root directory. Maybe this can be a reason.

[egorkel-da14]

If I remove this prefix in path SB starts normally, but main project doesn't work (npm start)

[Marklb]

This doesn't seem to be a Nx problem.

I don't have a quick fix. but I do know what is going on and I have a work around. Later I may have time to try and fix it, but if someone else wants to take care of it I will explain what seems to be the problem. Also, this should only be an issue with Angular >=12.2. I haven't tested with "@storybook/angular:start-storybook" or "@storybook/angular:build-storybook", but I don't think they are affected by this. It should only happen with the start-storybook and build-storybook scripts, because I think the builders have a valid BuilderContext.

Problem

Before Angular 12.2 Storybook called it's own normalizeAssetPatterns, which is basically identical to the one in Angular's source.
https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-devkit-build-webpack.ts#L124

For the newer Angular versions Storybook is relying on Angular to call it's own implementation, but the default BuilderContext Storybook provides does not contain a working getProjectMetadata that is needed to get sourceRoot.

I am not sure what the best solution is at the moment. Either find out how to correctly initialize a BuilderContext or just keep adding properties to the mostly empty default Storybook currently uses.

To make sure that getProjectMetadata is the problem, I changed https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/framework-preset-angular-cli.ts#L42 to the following:

const builderContext = getBuilderContext(_options);
builderContext.getProjectMetadata = () => {
  // I hard-coded this path from the repro, but Storybook should know the actual sourceRoot to use.
  return Promise.resolve({ sourceRoot: 'apps/user-app/src' });
};

That worked for an Angular 13 project, but it would be nice if a valid BuilderContext could be initialized to maybe prevent additional props missing in the future or props currently missing that just haven't been caught yet.

Work around

Angular does not check to see if the path starts with the sourceRoot if you use object syntax. So, I changed your assets to the following and was able to read an image I placed in apps/user-app/src/assets. Both npm run storybook and npm run start could read the asset. Unrelated to the problem, I had to remove your e2e project first, but if you fix the tsconfig then you could leave the e2e.

"assets": [
  {
    "glob": "**/favicon.ico",
    "input": "apps/user-app/src",
    "output": ""
  },
  {
    "glob": "**/*",
    "input": "apps/user-app/src/assets",
    "output": "assets"
  }
],

[admir86]

workaround works, thx

I thought the same error was already fixed once in a earlier version, but I can't find the github-issue

[ghost]

Just wanted to add a standard & simple project that reproduces this issue. It happens in projects that contain both library and an app which is a fairly standard setup.
my-workspace.zip

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).