Storybook can't find x.component.html when npm package is built with Angular 10

[sardormajano]

I have 2 angular projects: app and lib (where app is a traditional angular application, lib is an angular library)
Angular library is built using Angular 10 cli (ng build lib), and later installed in app project using npm install lib
app.component.ts from app project uses <lib-lib></lib-lib> which comes from lib npm package
app.component.stories.ts renders app.component.ts
When I do npm run storybook the story of app.component.ts gives me Unhandled Promise rejection: Failed to load lib.component.html

I have created a public repo (https://github.com/sardormajano/sb-issue-repro.git) for you to recreate this issue

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/sardormajano/sb-issue-repro.git
2. cd sb-issue-repro
3. npm install
4. ng build lib
5. cd dist/lib/ && npm link
6. cd ../.. && npm link lib - this lets you use the published library from root angular app
7. npm run storybook
8. go to http://localhost:6006/ - component is not rendered, error in the console

You might think that it could be an Angular issue (not storybook), but if you do ng serve (instead of npm run storybook), you will see that angular application is able to consume components from lib as expected.

Expected behavior
Should render app.component.ts that is consuming lib.component.ts from lib library

Screenshots

Code snippets
https://github.com/sardormajano/sb-issue-repro.git

System:
System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Node: 12.18.3 - C:\Program Data\node\node.EXE
npm: 6.14.6 - C:\Program Data\node\npm.CMD
Browsers:
Chrome: 84.0.4147.89
Edge: Spartan (44.18362.449.0)

Additional context
Package versions might help

"@angular-devkit/build-angular": "~0.1000.4",
"@angular-devkit/build-ng-packagr": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.5",
"@babel/core": "^7.10.5",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/angular": "^5.3.19"

[Marklb]

I'm not positive, but fairly sure Storybook is still using ViewEngine or at least not fully supporting all Ivy features yet. Your non-prod library build is using Ivy, which is not recommended for published libraries, since they aren't backwards compatible. Your library isn't published, but your using it like a published library. Also npm link is not necessary, because you are already mapping the path in tsconfig.base.json.

If you use the prod build, ng build lib --prod, or disable Ivy in the non-prod build, projects/lib/tsconfig.lib.json, it will work.

There may be a few things that are different, but nothing major to prevent me from using any of my components yet. The biggest problem I have had would probably be a minor change detection difference, but I mainly use observables for anything in my templates anyway, so I don't have to worry about change detection.

[sardormajano]

@Marklb
Thanks for your response.

The thing is that I am migrating all our Angular projects to 10, and using Ivy in all of them, so backward compatibility is not an issue here. All consuming projects are using Ivy too.

What you are proposing is a workaround, but the only valid reason to do it is again the storybook that is using ViewEngine.

I don't think we should close an issue just because there is a workaround out there. Eventually, storybook must be able to work with Ivy built angular libraries.

[Marklb]

@sardormajano I agree, what I proposed is a work around and not a solution.

I started looking into to fixing it, since the code to render the component is available in the source, but haven't familiarized myself with Ivy's compilation enough to fix it yet.

[Marklb]

@kroeder I still haven't got a chance to find the exact problem. From my understanding, this seems to be a problem with how IVY uses AOT, but Storybook uses the JIT compiler, which doesn't seem to be accepting the AOT components. If I am right about that, then PR #11157 would be the solution, right?

[sardormajano]

Hi @Marklb,
As per the goal of the PR, The goal is to provide support for AOT compilation and the new Ivy renderer that came with Angular 9 as default, #11157 should be the solution to this issue here.

The 2 issues could be marked as related as far as I can see.

[stale]

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]

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!

[kossmoboleat]

This issue is still relevant, I spent a few hours looking at the same problem with another angular 10 dependency we're using. I assume many Angular components will not be compatible with Storybook. Seem that #11576 is the "real" solution.