Storybook: Angular 2 지원

핵심 UI를 별도의 앱으로 만들었습니다. NG2에 직접 사용할 계획입니다. 참조 : https://github.com/kadirahq/storybook-ui

멋있는. 그것을 기대합니다! :)

이봐, @arunoda , 그래서 이것에 대한 접근 방식은 무엇입니까?
ng2 전용 스토리 북 UI를 만들고 싶습니까? 여러분이 달성하고자하는 것에 대한 높은 수준의 설명을 얻고 제가 도울 수 있는지 알아보고 싶습니다.

Angular 2 API는 RC5 출시와 함께 안정되었습니다. 지금은 주요 변경 사항이 없습니다. 그래서 개발을 시작하기에 좋은 시간입니다. cc : @arunoda @mnmtanish

@arunoda : 로드맵에서 이것이 낮다고 생각하는 경향이 있지만 Angular의 경우이 분할에서 아이디어는 storybook-ui 의 React를 허용하는 이론적 ng2-storybook 인터페이스는 Angular 구성 요소를 포함합니까? 그랬어?

@ tycho01 당신이 맞습니다. 우리의 우선 순위가 다소 낮습니다.
Storybook-ui를 기반으로 시작할 수 있기를 바랍니다. 그래서 대부분의 애드온은 그것을 사용할 수 있습니다.
나는 누군가가 작업을 시작할 수 있도록 도움을 찾고 있습니다. 그렇다면 Slack에서 저를 핑하세요. 더 이야기합시다.

@ tycho01 , @arunoda 여러분이이 작업을 시작하면 알려주세요.

@alterx : 내가 얻은 포인터 : storybook-react 는 storybook-ui 와 분리되어 있습니다 (iframe 내에서 실행 됨); 다음 단계는 Angular 버전으로 대체 될 수 있는지 실험하는 것입니다. 마지막 시도 이후로 시작하지 않았습니다.

이것을 확인하십시오 -https:

@ tycho01 , 나는 소스를 확인했고 기본적으로 미화 된 iframe (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js) 인 완전히 별개의 반응 구성 요소를 가지고 있습니다. 해당 미리보기 iframe에서 ng2 스토리를로드 할 수 있어야합니다.

react-storybook 기본적으로 Provider 제공하는 storybook-ui 하고 앞서 언급 한 Preview 렌더링하고 스토리 API를 처리합니다. 그런 다음이 공급자의 새 인스턴스가 renderStorybookUI 전달됩니다.

import renderStorybookUI from '@kadira/storybook-ui';
import Provider from './provider';

const rootEl = document.getElementById('root');
renderStorybookUI(rootEl, new Provider());

그 후 storybook-ui 가 제어되고 컨텍스트 (공급자 포함)를 빌드하고 앱을 생성합니다 (mantra-core의 createApp ). 공급자 (다른 컨텍스트 소품과 함께)는 ui 모듈 (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js)에 주입됩니다. )는 react-storybook 에서 만들 때 정의한 renderPreview 메서드를 사용하여 미리보기를 빌드합니다.

@arunoda , 내가 뭔가 빠진 것이 있으면 알려주세요

@amcdnl , 유망 해 보입니다. 어떻게 작동하는지 간략하게 설명해 주시겠습니까? (화려하지 않고 큰 그림 만)

@amcdnl : 연결 해주셔서 감사합니다.
편집 : 당신은 그것과 함께 어떤 데모가 있습니까? 실행할 준비가 된 것을 찾는 데 문제가 있습니다.

@ MikeRyan52 ^^

@alterx 네. 당신은 100 % 맞습니다.
또한 스토리를 생성하려면 React Storybook과 유사한 API를 노출해야합니다.

angular-storybook 또는 이와 유사한 곳에서 가져올 수 있습니다.

@arunoda 당신이 언급 한 앵귤러 스토리 북에 대한 URL이

@bcowgill afaik 이것은 위에서 언급 한 @amcdnl을 제외하고는 아직 존재하지 않습니다.

지금도 있습니다-http: //www.angularplayground.it/

현재 로드맵에 있습니다.
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

그래서 Vue 용 스토리 북이 곧 출시 될 예정입니다 🎉

이것은 NG2 용 버전이 어떻게 수행 될 수 있는지에 대한 꽤 좋은 예를 추가합니다.
이 스레드를보고 함께 일하고 실현할 용감한 영혼이 있습니까?

제가 살펴볼 수 있습니다. @ndelangen이라는 편리한 저장소 URL이 있습니까?

당신은 그것을보고 있습니다 😄

Storybook은 단일 저장소이며 여기에 패키지가 있으며 npm에 별도로 게시됩니다.

현재 vue 앱은 아직 마스터가 아니므로 다음과 같은 3 개의 링크가 있습니다.
https://github.com/storybooks/storybook/tree/release/3.2/app/vue
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/client/preview/render.js
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/server/config/webpack.config.js#L40

render.js는 대부분의 Vue 특정 코드가있는 곳이며 서버 부분에는 다른 웹팩 구성이 있습니다.

처음에는 많은 코드를 복제해도 괜찮습니다! 나중에 다룰 것입니다. 우리가 정말로 흔한 것과 그렇지 않은 것을 찾은 후에.

시작하기 위해

1. app / vue 전체를 app / angular에 복제합니다 (우리는 angular2 이상에 대해 이야기하고 있습니까?).
2. webpack 구성을 조정하여 각진 코드를로드하고 컴파일합니다.
3. 무언가가 나타날 때까지 render.js를 조정하십시오.
4. 애드온 사용해보기
5. 버그 수정
6. 지금 가능한 것을 시도하십시오
7. 문서 작성, 애드온 작동 목록
8. 블로그 게시물 초안 (내가 할 수 있거나 매체 간행물에 계정 추가)
9. 출시 계획
10. 알파 릴리스 수행
11. 버그 수정
12. 실제 출시, 블로그 게시물 게시, 트윗 알림
13. 더 많은 버그 수정
14. 더 많은 애드온에 대한 지원을 시도하고 추가하십시오.

@shilman 은 우리의 릴리스 마스터 셰프입니다 👨‍🍳

slack에서 우리와 함께 좀 더 빠른 채팅 경험을 얻으려면 github 💬

https://storybooks-slackin.herokuapp.com

완벽합니다, @ndelangen!
코드를 살펴보고 Slack 채널에 가입하겠습니다. : D

@alterx 지금 작업 중입니까? 지금 vue.js 버전을 복제하고 있습니다.

@ Jordan-Hall, 기본 앱이 작동하는 PR이 이미 있습니다.
# 1474를 참조하십시오
현재 어떤 기능이 상자에서 나오는지 확인하기 위해 부가 기능을 확인하고 있습니다. 우리가 협력 할 수 있도록 Slack 채널에 참여해 주시겠습니까?

@alterx 물론입니다. https://storybooks-slackin.herokuapp.com 채널이 다운 된 것 같습니다.

헉, 그거 맞아요 🤔
@ndelangen 이 도움이 될 수 있습니다.
당분간 내 PR은 기본 작업 (구성 요소 렌더링, 입력 전송)을 다룹니다. 다른 사람들이 vue 및 react 한 것과 약간 다르지만 angular 의 작업 방식 ( NgModules )에는 약간의 변경이 필요했습니다.

3.3 릴리스의 일부로 Angular (2+) 지원을 포함하는 것을 목표로합니다.

그래 heroku는 앱을 종료하기로 결정했기 때문에 now.sh에 배포했습니다.
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

사람들이 이런 종류의 프로젝트 xD에 gitter를 사용하지 않는 이유를 모르겠습니다.

Hey Guys는 아직이 작업에 적극적으로 참여중인 사람이 있는지 확인하고 싶었나요?

예, 작업이 진행 중입니다.
https://github.com/storybooks/storybook/pull/1474

네, 내 컴퓨터에서 변경 한 사항을 제출하려면 오늘 시간을 내야합니다. 아마도 점심 시간에 할 것입니다 😄

병합을 축하합니다!
npm i -g @storybook/[email protected] 을 (를) 시도해 볼 수 있습니까? 아니면 플레이하려면 더 많은 수동 설정이 필요합니까?

이것을 테스트하고 기여하고 싶습니다 👍

@shilman @alterx 앵귤러 앱으로 알파 릴리스가 만들어 졌다는 인상을 받았습니다.
아직 그렇지 않은 것 같습니까?

1을 얼마나 빨리 할 수 ​​있습니까? @tomatosource 여기에 우리를 위해 몇 가지 테스트를 기꺼이 🙇

@shilman 이 Angular slack 채널에서 "다음 며칠 안에"릴리스하고 싶다고했기 때문에 아직 릴리스되지 않은 것 같습니다. :)

업데이트가 있습니까? :-)

실제로 예 =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

@Hypnosphi 실제로 이것을 어떻게 설치합니까? 지원되지 않는 프로젝트 유형입니다. (코드 : UNDETECTED)

@aaronksaunders CLI를 디버그하는 데 도움이되도록 공유 할 수있는 저장소가 있습니까? 또한 수동으로 수행하려면 전체 설정이 포함 된 예제 앱이 있습니다. https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

@alterx @tomatosource 출시가 지연되어 죄송합니다. 지금 출시되었으며 테스트에 도움을 주시면 감사 하겠습니다 !

어떤 버전의 각도를 지원합니까?

@ToniaDemchuk 관련 :
https://github.com/storybooks/storybook/pull/1474#issuecomment -329659825
https://github.com/storybooks/storybook/pull/1474#issuecomment -335527228

@Insayt @ LTiger14 @MTariqAziz @MathieuFouillet @Quramy @RemiAWE @VadimDez @aitboudad @bermanboris @cheapsteak @ 기독교 - bromann @diagramatics @dlcardozo @ elad-morphisec @jbueza @johannesjo @jshthornton @ justinlee0777 @mixn @ npatta01 @qrrock @realappie @ruedap @ 작은 댄서 @ tycho01 @ priley86

Angular2 + 지원은 @alterx의 엄청난 노력 덕분에 알파 버전입니다 (정확히 3.3.0-alpha.4 ). 출시 준비가 될 수 있도록 테스트를 도와주세요!

단 몇 분 만에 시작하는 방법은 다음과 같습니다.

cd my-angular-project
yarn add @storybook/cli<strong i="33">@alpha</strong>
yarn getstorybook
yarn storybook
open http://localhost:6006

리포지토리의 examples/angular-cli 스토리 북은 다음과 같습니다. 브라우저에 제거 된 버전이 표시됩니다.

문제가 있으면 여기로 알려주세요. 또한 Storybook Slack #angular 채널 에서 실시간 도움을받을 수 있습니다.

도움을 주셔서 감사합니다!

@shilman이 yarn getstorybook 를 실행하면 다음 오류가 발생합니다.

(function (exports, require, module, __filename, __dirname) { import updateNotifier from 'update-notifier';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)

node_modules/@storybook/cli/bin/index.js:1 파일을 변경하면 문제가 해결됩니다.

require("babel-register")({
  ignore: /node_modules\/(?!@storybook)/
});

이상하게도 실제로 cli@alpha 에서 babel-register를 사용합니다.

@aitboudad 어떤 노드 버전을 사용합니까?

어떤 노드 버전을 사용하십니까?

v8.9.0, 노드 버전과 관련이 없지만 node_modules 에있는 모든 파일을 트랜스 파일하는 것을 무시하는 바벨에 관한 것입니다.

@shilman 내가 가진 두 번째 문제는

odule build failed: Error: Typescript emitted no output for node_modules/@storybook/angular/dist/client/preview/angular/app.token.ts.

/node_modules/@storybook/angular/dist/server/config/webpack.config.js 에서 transpileOnly 를 true로 설정하여

{
  test: /\.ts?$/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      }
    },
    { loader: 'angular2-template-loader' }
  ]
}

누락 된 기능 :

사용자 정의 NgModule :
현재로서는 현재 구현을 매우 제한적으로 만드는 사용자 정의 NgModule 을 전달할 방법이 없습니다.

node_modules 에있는 모든 파일의 트랜스 파일을 무시하는 바벨에 관한 것입니다.

오, 알겠습니다. 이전에 어떻게 작동했는지 궁금합니다.

@aitboudad 디버깅 @Hypnosphi 가 CLI 문제를 해결했고 방금 릴리스했습니다. 곧 각도 수정을 시도 할 것입니다!

https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.4

@aitboudad , 우리는 누락 된 기능을 알고 있으며이를 보완하려고 노력하고 있습니다. 사용자 지정 NgModules의 문제는 현재 구현에서 모듈을 프로그래밍 방식으로 구축하고 제공한다는 것입니다. 공급자와 스키마를 전달할 수 있도록 로컬에 몇 가지 변경 사항이 있지만 모듈이 잠재적으로 여러 구성 요소를 포함 할 수 있으므로 사용자 지정 모듈을 전달할 수는 없습니다.

정확한 사용 사례는 무엇입니까? 뭔가 알아낼 수 있을지도 몰라요.

또한 transpile 만 사용하면 유형 검사없이 남게됩니다. 이 변경을하기 전에 이것을 조사해야합니다.

@alterx 정확한 사용 사례는 무엇입니까?

내 구성 요소에 재료 또는 작동하는 것과 같은 외부 모듈이 필요한 경우 현재 접근 방식으로 어떻게 처리 할 수 ​​있습니까?

이 경우 공급자, 가져 오기 및 스키마 (필요한 경우 idk, 사용자 지정 요소)로 충분합니다. 사용자 지정 모듈을 허용하는 문제는 사용자가 제출할 수있는 구성 요소의 양을 제어 할 수없고 잠재적으로 손상 될 수 있다는 것입니다. Storybook은 분리 된 단위로 구성 요소를 개발하고 테스트하는 것에 관한 것입니다. 이것은 React와 Vue에서 약간 다르게 작동하지만 각도의 경우 몇 가지 가정을하고 범위를 제한해야합니다.

저는 가져 오기와 선언을 통해 공급자와 스키마를 전달할 수있는 작업을하고 있습니다. 좀 더 복잡합니다. 이런 종류의 피드백은 완벽합니다. 우리는 테스트 할 수있는 무언가를 얻고 사람들에게 필요한 것을보고 싶었습니다.

@aitboudad 새로 만든 @angular/cli 앱과 getstorybook 문제를 복제하려고했지만 모든 것이 예상대로 작동합니다. 설정에 대한 자세한 정보를 제공 할 수 있습니까? 각도 버전? TypeScript 버전?
당장 테스트 할 수는 없습니다.

@alterx 가 다시 시도했지만 새 알파 버전에서 잘 작동하는 것 같습니다. 감사합니다!

오, 완벽 해요!
그리고 안심 하셔도됩니다. 우리가 만든 모듈에 가져 오기, 공급자 등을 제공하는 방법을 지원할 계획이 있습니다. 우리는 그것을 알아 내면됩니다. :)

다음 패키지 버전으로 storybook / examples / angular-cli를 실행하려고했습니다.

  "dependencies": {
    "@angular/animations": "4.3.5",
    "@angular/common": "4.3.5",
    "@angular/compiler": "4.3.5",
    "@angular/core": "4.3.5",
    "@angular/forms": "4.3.5",
    "@angular/http": "4.3.5",
    "@angular/platform-browser": "4.3.5",
    "@angular/platform-browser-dynamic": "4.3.5",
    "@angular/router": "4.3.5",
    "core-js": "2.4.1",
    "rxjs": "5.4.3",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "4.3.5",
    "@angular/language-service": "4.3.5",
    "@storybook/addon-actions": "3.3.0-alpha.4",
    "@storybook/addon-links": "3.3.0-alpha.4",
    "@storybook/addon-notes": "3.3.0-alpha.4",
    "@storybook/addon-knobs": "3.3.0-alpha.4",
    "@storybook/addons": "3.3.0-alpha.4",
    "@storybook/angular": "3.3.0-alpha.4",
    "@types/jasmine": "2.5.53",
    "@types/node": "6.0.87",
    "codelyzer": "3.1.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.3",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-trx-reporter": "0.2.9",
    "protractor": "5.2.0",
    "ts-node": "3.2.0",
    "tslint": "5.6.0",
    "typescript": "2.4.0"
  }

component.__annotations__[0] 를) 가져 오는 동안 오류와 함께 _Addon Knobs_ 구성 요소로 이동 한 후 브라우저 콘솔에서 충돌이 발생합니다.

helpers.js:32 Uncaught TypeError: Cannot read property '0' of undefined
    at getComponentMetadata (helpers.js:32)
    at prepareComponent (helpers.js:140)
    at index.js:33
    at withKnobs (index.js:48)
    at client_api.js:109
    at initModule (helpers.ts:87)
    at helpers.ts:167
    at later (helpers.ts:27)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:191)

@ToniaDemchuk 테스트 해 주셔서 감사합니다. 컴퓨터에서 어떻게 설정 했습니까? 재현을 공유 할 수 있습니까? 감사합니다!

안녕하세요 여러분, 이것이 얼마나 쉽게 추가 할 수 있는지에 대해 펌핑했습니다. 몇 가지 문제.

package.json에도 "@storybook/addon-notes": "3.3.0-alpha.4", 을 추가해야했습니다.

내 로컬 타이프 스크립트 경로를 존중하는 방법이 있습니까? tsconfig에 정의되어 있습니다.
저장소 : https://github.com/scttcper/ngx-color
나는 그들을 선택하지 않기 때문에 Cannot find module 'ngx-color/helpers'. 얻습니다.

@shilman 여기에서 찾을 수있는 예제 https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
설정 명령 :

npm i
npm i -g @storybook/cli
npm run storybook

브라우저에서 localhost:9009 을 열고 메뉴에서 _Addon Knobs> Simple_로 이동합니다.

이것은 작동했습니다.

이것은하지 않았다 :

콘솔 오류 :

@neo , 재현하려고 시도했지만 모든 것이 잘 작동합니다. 더 많은 맥락을 공유 할 수 있습니까? 아마도 당신은 repo를 가지고 있습니까?

@shilman , @alterx , angular v4.3.5 ( @ToniaDemchuk )의 문제와 관련하여 문제를 조사했습니다 (각각에 익숙하지 않기 때문에 ...) 노브 애드온에 의존하는 코드 가 있습니다. 구성 요소 개체에는 annotations 배열이 있습니다. 이 배열은 새 버전의 angular/core 패키지에 의해 설정됩니다. 그러나 이전 버전 (이 경우 v4.3.5)에서는 reflect-metadata 패키지를 사용했습니다 (여기에 제거 된 차이점 이 있습니다). 나는 그것으로 무엇을 해야할지 정말로 모른다.

네,이 변화는 우리가 메타 데이터를 얻는 방법에 확실히 영향을 미칩니다. 의지
여유 시간이 생기면 살펴보세요. 아마 다음에 언젠가
주

2017 년 12 월 9 일 토요일 오전 11:41 Igor [email protected] 작성 :

@shilman https://github.com/shilman , @alterx
https://github.com/alterx , angular v4.3.5의 문제에 관하여 (
@ToniaDemchuk https://github.com/toniademchuk ), 나는
문제 (각각에 익숙하지 않아서 ...) 노브 애드온에서
구성 요소 개체에있는 사실에 의존하는 코드가 있습니다.
그것에 주석 배열. 이 배열은 angular / core 패키지에 의해 설정됩니다.
새로운 버전. 그러나 이전 버전 (이 경우 v4.3.5)에서는
reflect-metadata 패키지 (여기에 diff
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
제거 된 곳). 나는 그것으로 무엇을 해야할지 정말로 모른다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
.

@aitboudad , 사용자 지정 모듈 메타 데이터를 지원하는 PR이 있습니다.
지금까지 파이프 및 서비스에 대한 예제를 추가했습니다. Directives, Schemas 등을 테스트해야하는데 그것들도 작동 해야 합니다.

당신이 무슨 생각을하는지 제게 알려주세요

@ToniaDemchuk , 새로운 변경 사항으로 다시 확인해 주시겠습니까?

방금 @alterx @ igor-dv @ralzinov 의 Angular 변경 사항이 포함 된 3.3.0-alpha.6을 출시

https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.6

관련 Angular 변경 사항은 다음과 같습니다.

• 도우미에 유형 주석 추가, angu에 대한 ts 선언 파일 추가… # 2459
• 모듈 / 컴포넌트에 추가 메타 데이터 추가하기 # 2526
• 구성 요소 소품 출력 재정의 # 2456 수정
• [WIP] Angular 버전 지원 # 2467
• Angular Add custom pipes 지원 # 2518

프로젝트에서이 버전으로 업그레이드하고 문제가 발생하면 알려주십시오. 이번이 마지막 RC 릴리스가되기를 바라며 내일까지 적절한 3.3 릴리스를 할 수 있습니다!

@alterx 정확히 내가 찾고있는 것입니다, 감사합니다!

컴포넌트 대신 템플릿 콘텐츠를 제공 할 수 있다면 좋을 것입니다.

storiesOf('Welcome', module).add('to Storybook', () => ({
  moduleMetadata: { imports: [FormModule] },
  template: '<dynamic-forms [form]="form"></dynamic-forms>',
  props: {
    form: [{ key: name }]
  },
}));

@shilman for 3.3.0-alpha.6 나에게 잘 어울리는 유일한 문제는 애드온이 @storybook/angular 같은 패키지에 포함되어 있지 않다는 것입니다.

yarn add @storybook/addon-actions<strong i="14">@alpha</strong> @storybook/addon-links<strong i="15">@alpha</strong> @storybook/addon-notes<strong i="16">@alpha</strong>

@ igor-dv, 응답 해 주셔서 감사합니다. 이제 잘 작동합니다.

@shilman , 일부 변경 사항이 angular-cli 예제를 깨뜨 렸습니다. 이제 NameComponent 및 ServiceComponent가 입력으로 인해 컴파일되지 않습니다.

ERROR in ./src/stories/index.ts
(200,19): error TS2345: Argument of type '() => { component: typeof NameComponent; props: { field: string; }; moduleMetadata: { imports: an...' is not assignable to parameter of type 'IGetStory'.
  Type '{ component: typeof NameComponent; props: { field: string; }; moduleMetadata: { imports: any[]; s...' is not assignable to type '{ props?: { [p: string]: any; }; moduleMetadata?: { [p: string]: NgModuleMetadata; }; component: ...'.
    Types of property 'moduleMetadata' are incompatible.
      Type '{ imports: any[]; schemas: any[]; declarations: (typeof CustomPipePipe)[]; providers: any[]; }' is not assignable to type '{ [p: string]: NgModuleMetadata; }'.
        Property 'imports' is incompatible with index signature.
          Type 'any[]' is not assignable to type 'NgModuleMetadata'.

나는 가정 그 moduleMetadata?: { [p: string]: NgModuleMetadata; } 에서 IGetStory 로해야 moduleMetadata?: NgModuleMetadata . 예제의 모듈 메타 데이터를 any 캐스팅하면 모든 것이 예상대로 작동합니다.

또한 위에서 설명한 @neo 문제와 유사한 각 도용 scss 로더와 관련된 몇 가지 문제에 직면했습니다.
다음 웹팩 구성 규칙으로 문제를 해결했습니다.

    storybookBaseConfig.module.rules.push({
      test: /\.scss$/,
      loaders: ["to-string-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, '../')
    });

각도가 style-loader 작동하지 않는 것 같습니다. 대신 to-string-loader 를 사용해야합니다.
scss 스타일 시트와 함께 구성 요소를 사용하는 방법에 대한 문서 및 (또는) 예제를 제공하는 것이 좋습니다.

@ToniaDemchuk 예, moduleMetadata?: { [p: string]: NgModuleMetadata; } 문제가 맞습니다. 사실 나는 이미 여기 moduleMetadata?: Partial<NgModuleMetadata>;

내가에서의 변화를 @ralzinov 출판 3.3.0-rc.0 고궁 박물원 태그 아래 인 rc 대신 alpha .

@ToniaDemchuk 시도해보고 문제가 해결되면 알려주십시오.

이 문제를 해결할 수 있도록 인내심과 노력에 감사드립니다!

아직 SCS들 로더와 @ralzinov 변화와 각 이야기 책 v3.3.3에 오류가 있습니다

node_modules / @ storybook / : grep -r "moduleMetadata ?: 부분"
angular/index.d.ts: moduleMetadata?: Partial<NgModuleMetadata>;

npm 실행 스토리 북
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

감사.

@ karlos1337 ,이 문제를보세요-# 2616.

3.3에서 출시되었습니다! 🎉

이번 호를 마무리하고 앵귤러 용 동화책에 문제가 있으시면 별도의 호를 제출해주세요. 감사!