사용자 정의 Angular 라이브러리 및 NPM 링크가있는 Storybook에서 구성 요소 templateUrl 및 stylesUrl을 찾을 수 없습니다.

Question

새로운 Angular 10 라이브러리와 별도의 Storybook을 문서화 및 개발 뷰로 만들려고합니다. * .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폴더로 이동하여 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 파일을 분리 할 수 ​​있는지 궁금합니다. 이것이 가능하다면, 스토리 북을 실행할 때 컴포넌트의 루트가 ./가 아닌지 어떻게 확인할 수 있습니까? 일종의 웹팩 구성을 추가해야합니까? 아니면 다른 솔루션이 있습니까?

불분명 한 것이 있으면 언제든지 물어 보시면 가능한 한 정보를 제공하도록 노력하겠습니다.

감사합니다.

웨슬리

Answer 1

제 생각에 Storybook은 아직 Ivy 기능을 지원하지 않습니다. 빌드, projects / lib / tsconfig.lib.json 및 projects / lib / tsconfig.lib.prod.json 에서 Ivy를 비활성화 하면 작동합니다.

tsconfig.lib.json

"angularCompilerOptions": {
    "enableIvy": false
  }

다음 은 참고 용으로 스토리 북 문제에 대한 링크 입니다.