使用自定义 Angular 库和 NPM Link 在 Storybook 中找不到组件 templateUrl 和 stylesUrl

Question

我正在尝试创建一个新的 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.

我还创建了另一个 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 文件分开，因为我更喜欢这样做以提高可读性。如果这是可能的，当运行ning storybook 不是 ./ 时，如何确保组件的根目录？我应该添加某种 webpack 配置还是有其他解决方案？

如果有什么不清楚的地方，尽管问，我会尽力提供信息。

谢谢你和亲切的问候，

卫斯理

Answer 1

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

tsconfig.lib.json

"angularCompilerOptions": {
    "enableIvy": false
  }

这里是 link 故事书的问题，供您参考。

使用自定义 Angular 库和 NPM Link 在 Storybook 中找不到组件 templateUrl 和 stylesUrl

Can't find component templateUrl & stylesUrl in Storybook with a custom Angular Library and NPM Link

angular

storybook

npm-link

angular-storybook