カスタムAngularライブラリとNPMリンクを使用したストーリーブックでコンポーネントtemplateUrlとstylesUrlが見つかりません
ドキュメントと開発ビューとして、新しいAngular10ライブラリと別のストーリーブックを作成しようとしています。* .component.tsファイルでhtmlとスタイルがインラインになっていると、すべてが期待どおりに機能します。しかし、別々の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
次に私がしたことは、ライブラリをビルドし、dist/my-libフォルダにcdして実行すること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パッケージで正しいコンポーネントを見つけることができるため、すべてが良好であるように見えます。
しかしnpm run storybook、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構成を追加する必要がありますか、それとも他の解決策がありますか？
ご不明な点がございましたら、お気軽にお問い合わせください。できる限り情報提供を心がけております。
よろしくお願いします、
ウェズリー
回答
私の意見では、StorybookはまだIvy機能をサポートしていません。ビルド、projects / lib /tsconfig.lib.jsonおよびprojects / lib / tsconfig.lib.prod.jsonでIvyを無効にすると、機能します。
tsconfig.lib.json
"angularCompilerOptions": {
"enableIvy": false
}
参考までに、ストーリーブックの問題へのリンクを次に示します。