Не удается найти компонент templateUrl и stylesUrl в Storybook с настраиваемой библиотекой Angular и ссылкой NPM

Question

Я пытаюсь создать новую библиотеку Angular 10 и отдельный сборник рассказов в виде документации и представления для разработки. Все работает, как ожидалось, когда 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

Следующее, что я сделал, это собрал библиотеку, записал компакт-диск 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, поскольку я предпочитаю это для удобства чтения. Если это возможно, как я могу убедиться, что корень компонентов при запуске сборника рассказов не является./? Должен ли я добавить какую-то конфигурацию веб-пакета или есть другие решения?

Если что-то неясно, не стесняйтесь спрашивать, и я постараюсь предоставить информацию как можно лучше.

Спасибо и добрые пожелания,

Уэсли

Answer 1

На мой взгляд, Storybook еще не поддерживает функции Ivy. Если отключить Ivy в сборке, projects / lib / tsconfig.lib.json и projects / lib / tsconfig.lib.prod.json, он заработает.

tsconfig.lib.json

"angularCompilerOptions": {
    "enableIvy": false
  }

Вот ссылка на выпуск сборника рассказов для вашей справки.