angular - 使用自定义 Angular 库和 NPM 链接在 Storybook 中找不到组件 templateUrl 和 stylesUrl

Question

我正在尝试创建一个新的 Angular 10 库和一个单独的 Storybook 作为文档和开发 View 。当 html 和样式内联在 *.component.ts 文件中时，一切都会按预期工作。但是每当我尝试使用单独的 html 和 scss 文件创建新组件时，Storybook 就会在控制台中给出错误，指出它找不到 .component.html/.component.scss。

重现步骤

创建一个新库

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib
ng generate component notification --project=my-lib

这会生成一个具有以下设置的组件:

  selector: 'lib-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class Notification

我做的下一步是构建库，cd 到 dist/my-lib文件夹并运行 npm link .

我还创建了另一个 Angular 项目，其中包含 Storybook 项目，我按照本教程开始它:https://www.learnstorybook.com/intro-to-storybook/angular/en/get-started/

完成教程后，我使用 npm link my-lib 将之前构建的库添加到故事书项目中。并在/src/stories中创建了一个新的故事文件为了它。之后，我将组件导入故事文件中，例如 import { NotificationComponent } from 'my-lib';一切似乎都很好，因为它可以在链接的 npm 包中找到正确的组件。

但是每当我运行 Storybook npm run storybook我收到以下错误，因为它找不到正确的 templateUrl 和 styleUrl:

GET http://localhost:6006/notification.component.html 404 (Not Found)

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

现在我想知道是否可以分离 html/scss/ts 文件，因为我更喜欢这样做以提高可读性。如果这是可能的，我如何确保运行故事书时组件的根目录不是./？我应该添加某种 webpack 配置还是还有其他解决方案？

如果有任何不清楚的地方，请随时询问，我会尽力提供信息。

谢谢您并致以亲切的问候，

韦斯利

Answer 1

我认为 Storybook 还不支持 Ivy 功能​​。 如果您在构建中禁用 Ivy，projects/lib/tsconfig.lib.json 和 projects/lib/tsconfig.lib.prod.json，它将起作用。 p>

tsconfig.lib.json

"angularCompilerOptions": {
    "enableIvy": false
  }

这是link故事书问题供您引用。