Angular 9 unable to run storybooks on ivy enabled module if library imports another ivy library

[JayChase]

Describe the bug
In an Angular 9 mono repo with multiple ivy enabled libraries storybook works until a library (lib1) containing components with separate templates is imported into an another library (lib2). Storybook errors trying to load the template(s) from the imported library when running stories for the second library (lib2).

zone.js:699 Unhandled Promise rejection: Failed to load comp1.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load comp1.component.html

To Reproduce
A repo to show this issue is available here

npm i
npm run build:all
npm run storybook

Expected behavior
The stories should load normally.

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

System:

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 12.14.0 - C:\Program Files\nodejs\node.EXE
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0

Additional context
Disabling Ivy gets round this problem but in terms of a local working environment the ideal is to have Ivy enabled for the libraries to have full debugging while coding and have the stories run at the same time to review the component layout.

[the0rem]

Can we make sure this issue isn't closed by the bot?

[shilman]

@the0rem the best way to ensure it doesn't get closed by the bot is to fix it. are you interested in giving it a shot?

cc @kroeder @gaetanmaisse

[kroeder]

AFAIK Ivy support for libs is coming in Angular 10 and is not recommended for Angular 9 libraries. Or was it just "publishing libs with Ivy is not recommended"?

That said, it's still an issue we have to deal with and I'm not yet sure how to fix this 🤔
I tried to implement https://www.npmjs.com/package/@ngtools/webpack a couple of times but always failed to integrate it in Storybook.

We can give it another try; Angular 9 changed a lot regarding modules and templates.

[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!

[DDeivid]

I'm having the same issue on Angular 11 and Storybook 6.1.11

@kroeder any updates about enabling Ivy in Storybook?

[DDeivid]

If I remove templateUrl styleUrls and use template styles attributes instead, Storybook will work with Ivy enabled. So it feels like that just the template and style importer is not working in Storybook with Ivy.

// NOT WORKING
import {Component, Input} from '@angular/core';

@Component({
    selector: 'hey',
    templateUrl: './hey.component.html',
    styleUrls: ['./hey.component.scss']
})
export class HeyComponent {
    @Input() name: string;
}

// IS WORKING
import {Component, Input} from '@angular/core';

@Component({
    selector: 'hey',
    template: '<span>Hey {{ name }}</span>',
    styles: ['span {color: red;}']
})
export class HeyComponent {
    @Input() name: string;
}

[mspoerer]

same problems... any updates in this topic?