2

我正在尝试创建一个新的 Angular 10 库和一个单独的 Storybook，因为它是文档和开发视图。当 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.

我还创建了另一个包含 Storybook 项目的 Angular 项目，我按照本教程开始使用它：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 配置还是有其他解决方案？

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

谢谢你和亲切的问候，

卫斯理

4

1 回答 1

3

在我看来，Storybook 还不支持 Ivy 功能​​。如果你在构建中禁用 Ivy，projects/lib/tsconfig.lib.json和projects/lib/tsconfig.lib.prod.json，它会起作用。

tsconfig.lib.json

"angularCompilerOptions": {
    "enableIvy": false
  }

这是故事书问题的链接，供您参考。

于 2020-08-30T05:28:44.233 回答