Storybook: कोणीय 2 समर्थन

हमने अपना कोर UI एक अलग ऐप में बनाया है। हम इसे सीधे एनजी 2 के लिए उपयोग करने की योजना बना रहे हैं। देखें: https://github.com/kadirahq/storybook-ui

ठंडा। इसके लिए आगे देख रहे हैं! :)

अरे, @arunoda , तो क्या इस के लिए दृष्टिकोण होना चाहिए?
क्या हम ng2 विशिष्ट स्टोरीबुक UI बनाना चाहते हैं? आप क्या प्राप्त करना चाहते हैं और क्या मैं मदद कर सकता हूं यह देखने के लिए उच्च स्तर का वर्णन पाने के लिए उत्सुक हूं

आरसी 5 की रिलीज के साथ कोणीय 2 एपीआई स्थिर हो गए हैं। अब कोई भी परिवर्तन नहीं होगा। तो इसका विकास शुरू करने का अच्छा समय है। cc: @arunoda @mnmtanish

@ वरुणदा : मुझे लगता है कि यह रोडमैप पर कम है, लेकिन मुझे लगता है कि कोणीय मामले में, इस विभाजन में यह विचार एक सैद्धांतिक ng2-storybook storybook-ui की प्रतिक्रिया के लिए प्रेरित होगा। इंटरफ़ेस तो कोणीय घटकों एम्बेड? क्या ऐसा किया गया है?

@ tycho01 आप सही हैं। यह हमारी प्राथमिकता पर कम है।
मुझे उम्मीद है कि हम आधार के रूप में स्टोरीबुक-यूआई से शुरू कर सकते हैं। इसलिए, ज्यादातर एडन इसका इस्तेमाल कर सकते हैं।
मैं उस पर काम शुरू करने के लिए किसी की मदद ले रहा हूं। यदि हां, तो मुझे हमारे स्लैक पर पिंग करें। और बात करते हैं।

@ tycho01 , @arunoda आप लोग मुझे बताएं कि क्या आप इस पर काम करना शुरू करते हैं।

@alterx : पॉइंटर्स I मिला: storybook-react storybook-ui से अलग है (एक iframe के अंदर चलता है); अगला कदम यह देखना है कि क्या इसे कोणीय संस्करण से बदला जा सकता है। मेरे आखिरी प्रयास के बाद से शुरू नहीं किया गया।

इसे चेकआउट करें - https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 , मैंने स्रोत की जांच की और उनके पास एक पूरी तरह से अलग प्रतिक्रिया घटक है जो मूल रूप से एक गौरवशाली iframe (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js) है। हम उस पूर्वावलोकन iframe में ng2 कहानियों को लोड करने में सक्षम होना चाहिए।

react-storybook मूल रूप से Provider storybook-ui प्रदान करता है, उपरोक्त Preview करता है और कहानी को संभालता है। फिर, इस प्रदाता का एक नया उदाहरण renderStorybookUI

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

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

इसके बाद, storybook-ui नियंत्रण में है, यह संदर्भ बनाता है (जिसमें प्रदाता भी शामिल है) और ऐप बनाता है (मंत्र-कोर के createApp का उपयोग करके)। प्रदाता (अन्य संदर्भ प्रॉप्स के साथ) को तब ui मॉड्यूल (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/youtes.js पर इंजेक्ट किया जाता है) ) जो renderPreview पद्धति का उपयोग करके पूर्वावलोकन बनाता है जब हमने इसे react-storybook

@ रुनोदा , कृपया मुझे बताएं कि क्या मुझे कुछ याद आ रहा है

@amcdnl , जो आशाजनक लग रहा है। क्या आप मुझे बताएंगे कि यह कैसे काम करता है? (कुछ भी नहीं फैंसी, सिर्फ बड़ी तस्वीर)

@amcdnl : लिंक करने के लिए धन्यवाद, इसकी जाँच करेगा।
संपादित करें: क्या आपके पास शायद इसका कोई डेमो होगा? मुझे दौड़ने के लिए कुछ भी तैयार करने में परेशानी हो रही है।

@ माईक्रेन 52 ^ ^

@alterx हां। आप 100% सही हैं।
कहानियों को बनाने के लिए हमें रिएक्ट स्टोरीबुक के समान एक एपीआई को भी उजागर करना होगा।

संभव angular-storybook या समान से आयात किया गया।

@arunoda क्या आपके पास उल्लिखित कोणीय-स्टोरीबुक के लिए एक url है, Google सूखा आ रहा है।

@bcowgill afaik यह अभी तक मौजूद नहीं है, एक तरफ @amcdnl के ऊपर उल्लिखित है

अब यह भी है - http://www.angularplayground.it/

अब यह रोडमैप पर है:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

तो जल्द ही So के लिए स्टोरीबुक जारी होने वाली है

यह एक बहुत अच्छा उदाहरण जोड़ता है कि NG2 के लिए एक संस्करण कैसे किया जा सकता है।
क्या कोई बहादुर आत्मा इस धागे को देख रही है जो एक साथ काम करने और ऐसा करने के लिए तैयार होगी?

मैं देख सकता था, क्या आपके पास रेपो url है, @ndelangen ?

आप इसे देख रहे हैं 😄

स्टोरीबुक एक मोनोरेपो है, हमारे पास यहां पैकेज हैं, अलग से एनपीएम के लिए प्रकाशित किए गए हैं।

वर्तमान में 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

रेंडर.जेएस वह जगह है जहाँ अधिकांश विशिष्ट कोड है और सर्वर भाग पर एक वेबपैक कॉन्फिग है जो अलग है।

पहली बार में बहुत सारे कोड डुप्लिकेट करना ठीक है! हम बाद में संबोधित करेंगे। हम पाते हैं कि वास्तव में क्या आम है और क्या नहीं है।

बस शुरू करने के लिए, मैं कहूंगा

1. एप्लिकेशन / कोणीय / (हम angular2 और सही के बारे में बात कर रहे हैं?
2. वेबपैक कॉन्फिगरेशन को ट्वीक करें, इसलिए यह कुछ कोणीय सामानों को लोड करता है और संकलित करता है।
3. जब तक कुछ दिखाई नहीं देता, तब तक रेंडर करें। तब तक, जब आप अपेक्षित घटक पसंद करते हैं
4. कुछ नशे की कोशिश करो
5. बग का समाधान करें
6. अब जो संभव है, कोशिश करो
7. प्रलेखन लिखें, सूची जोड़ें कि क्या काम करता है
8. ड्राफ्ट ब्लॉगपोस्ट (मैं इसे कर सकता हूं, या हमारे माध्यम प्रकाशन में अपना खाता जोड़ सकता हूं)
9. योजना जारी
10. अल्फ़ा रिलीज़ करो
11. बग का समाधान करें
12. वास्तविक रिलीज़, ब्लॉगपोस्ट प्रकाशित करें, ट्वीट की घोषणा
13. अधिक बग्स को ठीक करें
14. और अधिक addons के लिए समर्थन जोड़ने का प्रयास करें

@ शीलमैन हमारी रिलीज़ मास्टर शेफ है

आप थोडा तेज़ चैट अनुभव प्राप्त करने के लिए सुस्त पर हमसे जुड़ सकते हैं, फिर जीथब sl

https://storybooks-slackin.herokuapp.com

बिल्कुल सही, @ndelangen!
मैं कोड देखूंगा और स्लैक चैनल में शामिल होऊंगा: D

@alterx क्या अब आप इस पर काम कर रहे हैं? अब मैं vue.js संस्करण का क्लोनिंग कर रहा हूं

@ जॉर्डन-हॉल, पहले से ही एक पीआर में एक बुनियादी ऐप काम कर रहा है।
कृपया # 1474 देखें
मैं वर्तमान में ऐड-ऑन देख रहा हूं कि कौन से बॉक्स से बाहर काम करना है। क्या आप सुस्त चैनल से जुड़ने का मन करेंगे ताकि हम समन्वय कर सकें?

@alterx ज़रूर। चैनल https://storybooks-slackin.herokuapp.com नीचे क्या प्रतीत होता है?

वूप्स, कि यह माना जाता है to
शायद @ndelangen इसमें मदद कर सकता है।
कुछ समय के लिए, मेरा पीआर बुनियादी काम (एक घटक प्रदान करना, इनपुट भेजना) को कवर करता है। यह उन चीज़ों से थोड़ा अलग है जो दूसरों ने vue और react लेकिन angular सामान करने के तरीके ( NgModules ) को कुछ परिवर्तनों की आवश्यकता थी।

हम 3.3 रिलीज के भाग के रूप में कोणीय (2+) समर्थन को शामिल करने का लक्ष्य बना रहे हैं।

हाँ heroku एप्लिकेशन को बंद करने का फैसला किया है, तो मैं सिर्फ अब के लिए तैनात है।
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

मुझे नहीं लगता कि लोग इस तरह के प्रोजेक्ट्स के लिए सिर्फ जीडीआर का इस्तेमाल क्यों न करें

हे लोग सिर्फ यह देखना चाहते थे कि क्या कोई अभी भी सक्रिय रूप से इस पर काम कर रहा है?

हां, काम प्रगति पर है:
https://github.com/storybooks/storybook/pull/1474

हाँ, मुझे अपने कंप्यूटर में कुछ परिवर्तन प्रस्तुत करने के लिए आज कुछ समय खोजने की आवश्यकता है। शायद लंच lunch के दौरान करेंगे

मर्ज पर बधाई!
क्या मैं npm i -g @storybook/[email protected] सक्षम हूं और इसे आज़माऊंगा या एक और मैनुअल सेटअप की आवश्यकता है जो एक नाटक है?

इस परीक्षण में मदद करना और contribute योगदान देना पसंद करेंगे

@shilman @alterx मैं इस धारणा के तहत था कि कोणीय ऐप के साथ एक अल्फा रिलीज़ किया गया था?
ऐसा लगता है कि अभी तक मामला नहीं है?

हम कितनी जल्दी 1 कर सकते थे? @tomatosource यहां हमारे लिए कुछ परीक्षण करने के लिए तैयार है

@ शिलमैन ने उल्लेख किया कि वह इसे "अगले कुछ दिनों में" कोणीय सुस्त चैनल में रिलीज़ करना चाहते हैं, इसलिए मुझे लगता है कि इसे अभी जारी नहीं किया गया है :)

कोई सुधार? :-)

वास्तव में हां =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alph.3

@Hypnosphi आप वास्तव में

@ARonksaunders क्या आपके पास कोई ऐसा रेपो है जो आप हमारे साथ साझा कर सकते हैं ताकि सीएलआई को डिबग करने में हमारी मदद कर सकें? इसके अलावा अगर आप इसे हाथ से करना चाहते हैं, तो यहां एक उदाहरण ऐप है, जिसमें एक पूर्ण सेटअप है: 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 + समर्थन अल्फा में है ( 3.3.0-alpha.4 सटीक होना) इसे काम करने के लिए @alterx के एक

यहां बताया गया है कि बस एक मिनट में कैसे शुरू किया जाए:

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

यहाँ हमारे रेपो से examples/angular-cli स्टोरीबुक की तरह दिखता है, और आपको अपने संस्करण में एक पट्टी वाला संस्करण देखना चाहिए:

कृपया इसे स्पिन दें और यदि कोई समस्या हो तो हमें यहां बताएं। रियल टाइम मदद के लिए आप हमें

आपकी मदद के लिए बहुत धन्यवाद!

@ शिल्मैन 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 में स्थित सभी फाइलों को ट्रांसप्लांट करने की उपेक्षा करता है।

@ शीलमान को जो दूसरा मुद्दा मिला है, वह है

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 में ट्रांसपाइलऑनली को सही पर सेट करके हल किया गया

{
  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 के साथ मुद्दा यह है कि, हमारे वर्तमान कार्यान्वयन के साथ, हम अपने मॉड्यूल को प्रोग्रामेटिक रूप से बनाते हैं और उन्हें प्रदान करते हैं। पासिंग प्रोवाइडर और स्कीमा को अनुमति देने के लिए मेरे स्थानीय में कुछ बदलाव हैं लेकिन अभी हम कस्टम मॉड्यूल को पारित करने की अनुमति नहीं दे सकते क्योंकि एक मॉड्यूल संभावित रूप से कई घटकों को दे सकता है।

आपका सटीक उपयोग मामला क्या है? शायद हम कुछ समझ सकते हैं।

इसके अलावा, केवल ट्रांसपाइल का उपयोग करना आपको बिना जाँच के छोड़ देगा। हमें यह बदलाव करने से पहले इस पर गौर करने की जरूरत है।

@alterx आपका सटीक उपयोग मामला क्या है?

क्या होगा यदि मेरे घटक को सामग्री जैसे कुछ बाहरी मॉड्यूल या काम करने की आवश्यकता है, हम इसे वर्तमान दृष्टिकोण के साथ कैसे संभाल सकते हैं?

उस स्थिति में यह प्रदाताओं, आयातों और स्कीमाओं (यदि आपको जरूरत है, आईडी, कस्टम तत्व) के साथ पर्याप्त होना चाहिए। कस्टम मॉड्यूल को देने के साथ समस्या यह है कि हम उन घटकों की मात्रा को नियंत्रित नहीं कर सकते हैं जो एक उपयोगकर्ता सबमिट कर सकता है और यह संभावित रूप से टूट सकता है। स्टोरीबुक पृथक इकाइयों के रूप में विकासशील और परीक्षण घटक के बारे में है। यह रिएक्ट और वीयू में थोड़ा अलग काम करता है लेकिन कोणीय के लिए हमें कुछ धारणाएं बनाने और दायरे को सीमित करने की जरूरत है।

मैं कुछ ऐसे काम कर रहा हूं जो आपको आयात और घोषणाओं के साथ प्रदाताओं और स्कीमाओं को पारित करने की अनुमति देनी चाहिए, यह थोड़ा अधिक जटिल है। इस तरह की प्रतिक्रिया एकदम सही है, हम चाहते थे कि कुछ ऐसा निकाला जाए जिसे जांचा जा सके और देखें कि लोगों को क्या चाहिए।

@aitboudad मैंने आपके मुद्दे को नए सिरे से बनाई गई @angular/cli ऐप और getstorybook साथ दोहराने की कोशिश की लेकिन सब कुछ उम्मीद के मुताबिक काम करता है। क्या आप अपने सेटअप के बारे में कुछ और जानकारी दे सकते हैं? कोणीय संस्करण? टाइपस्क्रिप्ट संस्करण?
मैं इसे अभी, थोड़े परीक्षण नहीं कर पाऊंगा।

@alterx ने फिर से कोशिश की और यह नए अल्फा संस्करण के साथ ठीक काम कर रहा है, धन्यवाद!

ओह, बिल्कुल सही!
और बाकी का आश्वासन दिया है, हमारे पास मॉड्यूल बनाने के लिए आयात, प्रदाताओं और इतने पर प्रदान करने के लिए किसी तरह का समर्थन करने की योजना है। हमें सिर्फ इसका पता लगाने की जरूरत है :)

बस निम्नलिखित पैकेज संस्करणों के साथ स्टोरीबुक / उदाहरण / कोणीय-क्ली चलाने की कोशिश की गई है:

  "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 इसे बाहर परीक्षण के लिए बहुत बहुत धन्यवाद। आपने इसे अपनी मशीन पर कैसे सेट किया? क्या आप एक रेपो साझा कर सकते हैं? बहुत धन्यवाद!

अरे दोस्तों, सुपर पंप कितना आसान है यह जोड़ना था। कुछ मुद्दे।

मुझे "@storybook/addon-notes": "3.3.0-alpha.4", को पैकेज के रूप में जोड़ना था। साथ ही साथ।

क्या मेरे स्थानीय टाइपस्क्रिप्ट रास्तों का सम्मान करने का कोई तरीका है? वे tsconfig में परिभाषित हैं।
रेपो: https://github.com/scttcper/ngx-color
मुझे Cannot find module 'ngx-color/helpers'. क्योंकि इसके लिए उन्हें नहीं उठाना पड़ता है।

@ लक्ष्मण का उदाहरण आप यहां देख सकते हैं 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 , मैंने पुन: पेश करने की कोशिश की है, लेकिन मेरे लिए सब कुछ ठीक काम कर रहा है। क्या आप अधिक संदर्भ साझा कर सकते हैं? शायद आपके पास रेपो है?

@shilman , @alterx , कोणीय v4.3.5 ( @ToniaDemchuk ) के साथ समस्या के बारे में, मैंने इस मुद्दे पर शोध किया है (मैं कोणीय से बहुत परिचित नहीं हूं, इसलिए ...) नॉब्स एडऑन में, कोड है जो उस पर निर्भर करता है। तथ्य यह है कि एक घटक वस्तु का उस पर annotations सरणी है। इस सरणी को नए संस्करण में angular/core पैकेज द्वारा सेट किया गया है। लेकिन पिछले संस्करण (इस मामले v4.3.5 में) में वे एक प्रयोग किया जाता है reflect-metadata पैकेज (यहाँ है diff जहां इसे हटा दिया गया था)। मैं वास्तव में नहीं जानता कि इसके साथ क्या करना है।

हाँ, इस बदलाव का निश्चित रूप से प्रभाव पड़ता है कि हम मेटाडेटा कैसे प्राप्त करते हैं। मर्जी
एक बार मेरे पास खाली समय देखिए। शायद अगले कुछ समय में
सप्ताह

Sat पर, 9 दिसंबर, 2017, 11:41 AM इगोर नोटिफिकेशन @ithub.com ने लिखा:

@ शीलमैन https://github.com/shilman , @alterx
https://github.com/alterx , कोणीय v4.3.5 के साथ समस्या के बारे में (
@ToniaDemchuk https://github.com/toniademchuk ), मैंने शोध किया है
मुद्दा (मैं कोणीय से बहुत परिचित नहीं हूं, इसलिए ...) नॉब्स एडऑन में,
वहाँ कोड है जो इस तथ्य पर निर्भर करता है कि एक घटक वस्तु एक है
एनोटेशन इस पर सरणी। यह सरणी कोणीय / कोर पैकेज द्वारा सेट की गई है
नया संस्करण। लेकिन पिछले संस्करण में (इस मामले में v4.3.5) उन्होंने एक का उपयोग किया
प्रतिबिंबित-मेटाडेटा पैकेज (यहां अंतर है
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 , यहाँ कस्टम मॉड्यूल मेटाडेटा का समर्थन करने के लिए पीआर है।
अब तक मैंने पाइप्स और सर्विसेज के लिए उदाहरण जोड़े हैं। मुझे निर्देश, स्कीमा आदि का परीक्षण करने की आवश्यकता है, लेकिन उन्हें भी काम करना चाहिए ।

आप क्या सोचते हैं मुझे बताओ

@ToniaDemchuk , क्या आप नए परिवर्तनों के साथ फिर से जाँच करेंगे?

मैंने अभी-अभी 3.3.0-अल्फा .6 जारी किया है जिसमें @alterx @ igor-DV @ralzinov से कोणीय परिवर्तन का एक गुच्छा है

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

प्रासंगिक कोणीय परिवर्तनों में शामिल हैं:

• सहायकों के लिए जोड़ा गया एनोटेशन, एनजी के लिए ts घोषणा फ़ाइलों को जोड़ा ... # 2459
• मॉड्यूल / घटकों के लिए अतिरिक्त मेटाडेटा जोड़ना # 2526
• एनजी कंपोनेंट प्रोप आउटपुट को ओवरराइड करें # 2456
• [WIP] कोणीय संस्करण # २४६ular का समर्थन करते हैं
• कोणीय जोड़ें कस्टम पाइप # 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 }]
  },
}));

@ शीलमैन 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, प्रतिक्रिया के लिए धन्यवाद। अब यह ठीक काम कर रहा है।

@ शीलमैन , कुछ बदलावों ने कोणीय-क्ली उदाहरण को तोड़ दिया, अब 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 के समान कोणीय के लिए
मैंने निम्नलिखित वेबपैक कॉन्फ़िगर नियम के साथ समस्या हल की है:

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

ऐसा लगता है कि कोणीय style-loader साथ काम नहीं करता है और आपको इसके बजाय to-string-loader का उपयोग करने की आवश्यकता है।
प्रलेखन और (या) उदाहरण देने के लिए अच्छा होगा कि कैसे एससीएस स्टाइलशीट के साथ घटकों का उपयोग किया जाए।

@ToniaDemchuk हाँ आप moduleMetadata?: { [p: string]: NgModuleMetadata; } साथ सही मुद्दा है। वास्तव में मैंने तय किया है कि पहले से ही यहाँ moduleMetadata?: Partial<NgModuleMetadata>;

मैंने 3.3.0-rc.0 पर @ralzinov का परिवर्तन प्रकाशित किया, जो कि NPM टैग rc बजाय alpha ।

@ToniaDemchuk कृपया इसे आज़माएं और हमें बताएं कि क्या यह आपके लिए ठीक करता है।

आपके धैर्य और कड़ी मेहनत के लिए हर किसी का धन्यवाद जो हमें इसे बाहर निकालने में मदद करता है!

अभी भी @ भारक के परिवर्तन के साथ त्रुटि है:

नोड_मॉड्यूल्स / @ स्टोरीबुक /: grep -r "मॉड्यूलमैडेटाटा ?: आंशिक"
angular/index.d.ts: moduleMetadata?: Partial<NgModuleMetadata>;

npm रन स्टोरीबुक
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

धन्यवाद।

@ karlos1337 , इस मुद्दे पर एक नज़र डालें - # 2616

3.3 में जारी! 🎉

इस समस्या को बंद करना, और यदि आपको कोणीय के लिए स्टोरीबुक के साथ समस्या हो रही है, तो कृपया एक अलग समस्या दर्ज करें। धन्यवाद!