Storybook: دعم الزاوي 2

لقد جعلنا واجهة المستخدم الأساسية الخاصة بنا في تطبيق منفصل. نحن نخطط لاستخدامه مع NG2 مباشرة. انظر: https://github.com/kadirahq/storybook-ui

رائع. نتطلع إلى ذلك! :)

مرحبًا ، arunoda ، فماذا سيكون أسلوب هذا؟
هل نريد إنشاء واجهة مستخدم لقصة محددة لـ ng2؟ مجرد فضول للحصول على وصف عالي المستوى لما تريدون تحقيقه يا رفاق ومعرفة ما إذا كان بإمكاني المساعدة

أصبحت Angular 2 APIs مستقرة مع إصدار RC5. لن يكون هناك أي تغييرات عاجلة الآن. لذلك حان الوقت لبدء تطويره. نسخة إلى:arunodamnmtanish

arunoda : أنا أميل إلى الاعتقاد بأن هذا منخفض في خارطة الطريق ، ولكن في حالة Angular ، في هذا الانقسام ، ستكون الفكرة نظريًا ng2-storybook للسماح بتفاعل storybook-ui اجهة تضمين المكونات الزاوي بعد ذلك؟ هل تم ذلك؟

@ tycho01 أنت على حق. إنه نوع من الانخفاض في أولويتنا.
آمل أن نبدأ مع Storybook-ui كأساس. لذلك ، يمكن لمعظم الوظائف الإضافية استخدام ذلك.
أبحث عن مساعدة لشخص ما لبدء العمل عليها. إذا كان الأمر كذلك ، فأرسل لي على Slack. لنتحدث أكثر.

@ tycho01 ، أخبروني يا رفاق إذا بدأت العمل على هذا.

alterx : المؤشرات التي حصلت عليها: storybook-react منفصلة عن storybook-ui (يتم تشغيلها داخل iframe) ؛ الخطوة التالية هي التجربة لمعرفة ما إذا كان يمكن استبدالها بنسخة Angular. لم تبدأ منذ محاولتي الأخيرة.

تحقق من هذا - https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 ، لقد راجعت المصدر ولديهم مكون تفاعل منفصل تمامًا وهو في الأساس إطار iframe مجيد (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). يجب أن نكون قادرين على تحميل قصص ng2 في معاينة iframe هذه.

يمتد 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 ، فهو يبني السياق (الذي يتضمن الموفر) وينشئ التطبيق (باستخدام mantra-core createApp ). ثم يتم حقن الموفر (جنبًا إلى جنب مع دعائم السياق الأخرى) في الوحدة النمطية ui (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js ) التي تنشئ المعاينة باستخدام طريقة renderPreview تحديدها عند إنشائها في react-storybook

arunoda ، يرجى إعلامي إذا

@ amcdnl ، هذا يبدو واعدًا. هل تمانع في إعطائي لمحة عامة سريعة عن كيفية عملها؟ (لا شيء رائع ، فقط الصورة الكبيرة)

@ amcdnl : شكرًا على الارتباط ، سوف نتحقق من ذلك.
تحرير: هل من المحتمل أن يكون لديك أي عرض توضيحي به؟ أواجه مشكلة في العثور على أي شيء جاهز للتشغيل.

@ MikeRyan52 ^ ^

تضمين التغريدة أنت على صواب 100٪.
نحتاج أيضًا إلى الكشف عن واجهة برمجة تطبيقات مشابهة لـ React Storybook لإنشاء قصص.

ممكن استيراده من angular-storybook أو ما شابه.

arunoda هل لديك عنوان url طور الجفاف.

bcowgill afaik هذا غير موجود بعد ، بصرف النظر عن @ amcdnl المذكور أعلاه

هناك أيضًا هذا الآن - http://www.angularplayground.it/

إنها على خريطة الطريق الآن:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

لذلك سيتم إصدار Storybook for Vue قريبًا 🎉

يضيف هذا مثالًا جيدًا على كيفية عمل إصدار لـ NG2.
هل هناك أي أرواح شجاعة تراقب هذا الموضوع وترغب في العمل معًا وتحقيق ذلك؟

يمكنني إلقاء نظرة ، هل لديك عنوان url مفيد ، ndelangen ؟

أنت تنظر إليه 😄

Storybook هو monorepo ، لدينا حزم هنا ، منشورة على 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. قم بتكرار مجمل التطبيق / vue إلى app / angular (نحن نتحدث عن angular2 وما فوق ، أليس كذلك؟)
2. قم بتعديل تهيئة حزمة الويب ، بحيث تقوم بتحميل كود بعض العناصر الزاوية وتجميعها.
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 ، هناك بالفعل علاقات عامة مع تطبيق أساسي يعمل.
الرجاء الرجوع إلى # 1474
أنا حاليًا أتحقق من الوظائف الإضافية لمعرفة أيها يعمل خارج الصندوق. هل تمانع في الانضمام إلى قناة Slack حتى نتمكن من التنسيق؟

تضمين التغريدة ما هي القناة https://storybooks-slackin.herokuapp.com يبدو أنها معطلة؟

عفوًا ، من المفترض أن يكون الأمر كذلك 🤔
ربما يمكن أن يساعد ndelangen في ذلك.
في الوقت الحالي ، تغطي العلاقات العامة الخاصة بي العمل الأساسي (تقديم مكون ، إرسال المدخلات). انها تختلف قليلا من ما فعله مع الآخرين vue و react ولكن angular الصورة طريقة لفعل الأشياء ( NgModules ) يتطلب بعض التغييرات.

نحن نهدف إلى تضمين دعم Angular (2+) كجزء من الإصدار 3.3.

قررت Yeah heroku إيقاف تشغيل التطبيق ، لذلك قمت بالتوزيع حتى الآن. sh:
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

لا أفهم لماذا لا يستخدم الناس gitter فقط لهذا النوع من المشاريع xD

مرحبًا يا رفاق ، أردت فقط معرفة ما إذا كان أي شخص لا يزال يعمل بنشاط على هذا؟

نعم ، العمل يتقدم:
https://github.com/storybooks/storybook/pull/1474

نعم ، أحتاج إلى تخصيص بعض الوقت اليوم لإرسال بعض التغييرات التي أجريها على جهاز الكمبيوتر. من المحتمل أن تفعل ذلك أثناء الغداء 😄

تهانينا على الدمج!
هل يمكنني الحصول على npm i -g @storybook/[email protected] وتجربة ذلك أم أن المزيد من الإعداد اليدوي مطلوب للعب؟

أحب المساعدة في اختبار ذلك والمساهمة 👍

shilmanalterx كان تحت انطباع قد أحرز I إطلاق ألفا مع التطبيق الزاوي؟
يبدو أن هذا ليس هو الحال بعد؟

متى يمكن أن نفعل 1؟ tomatosource هنا على استعداد لإجراء بعض الاختبارات لنا 🙇

ذكر shilman أنه يود إصداره "في الأيام القليلة المقبلة" في قناة Angular Slack ، لذا أعتقد أنه لم يتم إصداره :)

أي تحديثات؟ :-)

في الواقع نعم =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

Hypnosphi كيف تقوم بالفعل بتثبيت هذا؟ نوع المشروع غير المدعوم. (الكود: غير مكشوف)

aaronksaunders هل لديك ريبو يمكنك مشاركته معنا لمساعدتنا في تصحيح أخطاء CLI؟ أيضًا إذا كنت تريد القيام بذلك يدويًا ، فهناك مثال على التطبيق هنا مع إعداد كامل: https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

alterxtomatosource آسف للتأخير في الإصدار - لقد الآن وسأحب مساعدتك في الاختبار!

ما هو إصدار الزاوي الذي يدعمه؟

ToniaDemchuk ذات الصلة:
https://github.com/storybooks/storybook/pull/1474#issuecomment -329659825
https://github.com/storybooks/storybook/pull/1474#issuecomment -335527228

Insayt @ LTiger14MTariqAzizMathieuFouilletQuramyRemiAWEVadimDezaitboudadbermanborischeapsteak @ المسيحي bromanndiagramaticsdlcardozo @ العاد-morphisecjbuezajohannesjojshthornton @ justinlee0777mixn @ npatta01qrrockrealappieruedap MustafaHosny اللهم امين يارب

يتوفر دعم Angular2 + بألفا ( 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

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.

تم حلها عن طريق تعيين transpileOnly على true في /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 المخصصة في أنه من خلال التنفيذ الحالي لدينا ، فإننا نبني وحداتنا برمجيًا ونوفرها. لدي بعض التغييرات في بلدي المحلي للسماح بمرور مقدمي الخدمات والمخططات ولكن في الوقت الحالي لا يمكننا السماح فقط بتمرير الوحدات النمطية لأن الوحدة يمكن أن تحتوي على مكونات متعددة.

ما هي حالة استخدامك بالضبط؟ ربما يمكننا اكتشاف شيء ما.

أيضًا ، استخدام transpile فقط سيتركك دون فحص النوع. نحن بحاجة للنظر في هذا قبل إجراء هذا التغيير.

alterx ما هي حالة الاستخدام بالضبط؟

ماذا لو كان المكون الخاص بي يتطلب بعض الوحدات الخارجية مثل المواد أو أي شيء آخر للعمل ، كيف يمكننا التعامل معه مع النهج الحالي؟

في هذه الحالة ، يجب أن يكون ذلك كافياً مع المورّدين والواردات والمخططات (في حال احتجت ، لا أعرف ، عناصر مخصصة) تكمن مشكلة السماح بدخول وحدة مخصصة في أنه لا يمكننا التحكم في كمية المكونات التي يمكن للمستخدم إرسالها ومن المحتمل أن يكسرها. تدور القصة حول تطوير واختبار المكون كوحدات معزولة. يعمل هذا بشكل مختلف قليلاً في React و Vue ولكن بالنسبة للزاوية نحتاج إلى وضع بعض الافتراضات وتقييد النطاق.

أنا أعمل على شيء يجب أن يسمح لك بتمرير الموفرين والمخططات ، مع عمليات الاستيراد والإعلانات ، إنه أكثر تعقيدًا بعض الشيء. هذا النوع من التعليقات مثالي ، أردنا الحصول على شيء يمكن اختباره ومعرفة ما يحتاجه الناس.

aitboudad لقد حاولت تكرار مشكلتك مع تطبيق @angular/cli تم إنشاؤه حديثًا و getstorybook ولكن كل شيء يعمل كما هو متوقع. هل يمكنك تقديم المزيد من التفاصيل حول الإعداد الخاص بك؟ نسخة الزاوي؟ إصدار TypeScript؟
لن أكون قادرًا على اختباره على الفور ، مع ذلك.

حاول alterx مرة أخرى ويبدو أنه يعمل بشكل جيد مع إصدار ألفا الجديد ، شكرًا!

أوه ، رائع!
وكن مطمئنًا ، لدينا خطط لدعم طريقة ما لتوفير الواردات والموردين وما إلى ذلك للوحدة التي نقوم بإنشائها. نحتاج فقط إلى معرفة ذلك :)

حاولت للتو تشغيل Storybook /amples / 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"
  }

يتعطل في وحدة تحكم المتصفح بعد الانتقال إلى مكونات _Addon Knobs_ مع ظهور الخطأ أثناء محاولة الحصول على component.__annotations__[0] :

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", إلى package.json أيضًا.

هل هناك طريقة لاحترام مسارات الكتابة المحلية الخاصة بي؟ تم تعريفها في 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 ، حاولت التكاثر ، لكن بالنسبة لي كل شيء

shilman ، alterx ، فيما يتعلق بمشكلة الزاوية v4.3.5 ( ToniaDemchuk ) ، لقد بحثت في المشكلة (لست على دراية بالزاوية كثيرًا ، لذا ...) في الملحق المقابض ، هناك رمز يعتمد على حقيقة أن كائن مكون يحتوي على مصفوفة annotations عليه. تم تعيين هذه المصفوفة بواسطة حزمة angular/core في الإصدار الجديد. لكن في الإصدار السابق (في هذه الحالة v4.3.5) استخدموا حزمة reflect-metadata (هنا الفرق حيث تمت إزالتها) أنا لا أعرف حقًا ماذا أفعل به.

نعم ، هذا التغيير بالتأكيد له تأثير في كيفية حصولنا على البيانات الوصفية. إرادة
انظر إليها بمجرد أن يكون لدي بعض وقت الفراغ. ربما في وقت ما خلال اليوم التالي
أسبوع

في السبت ، 9 ديسمبر 2017 ، 11:41 صباحًا كتب Igor [email protected] :

شيلمان 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-alpha.6 التي تحتوي على مجموعة من التغييرات الزاويّة من alterx @ igor- dvralzinov

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

تشمل التغييرات الزاويّة ذات الصلة:

• تمت إضافة نوع التعليق التوضيحي للمساعدين ، وإضافة ملفات إعلان TS لـ angu… # 2459
• إضافة بيانات وصفية إضافية إلى الوحدة / المكونات رقم 2526
• إصلاح تجاوز إخراج الخاصية المكونة ng # 2456
• [WIP] تدعم الإصدارات الزاويّة # 2467
• الزاوي إضافة دعم أنابيب مخصصة # 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 مقابل 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 كل شيء يعمل كما هو متوقع.

لقد واجهت أيضًا بعض المشكلات مع لوادر scss للزاوية ، على غرار المشكلة neo الموضحة أعلاه.
لقد قمت بحل المشكلة باستخدام قاعدة تكوين حزمة الويب التالية:

    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 والذي يقع تحت علامة NPM rc بدلاً من alpha .

ToniaDemchuk ، يرجى تجربتها وإعلامنا إذا كان ذلك يصلح لك.

نشكرك جميعًا على سعة صدرك وعملك الجاد لمساعدتنا في إخراج هذا الأمر!

لا يزال لديك الخطأ مع محمل scss و angular storybook v3.3.3 مع تغييرات ralzinov :

node_modules / @ storybook /: grep -r "moduleMetadata ؟: جزئي"
angular/index.d.ts: moduleMetadata?: Partial<NgModuleMetadata>;

تشغيل npm Storybook
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

شكر.

@ karlos1337 ، ألق نظرة على هذه المسألة - # 2616.

صدر في 3.3! 🎉

إغلاق هذه المشكلة ، وإذا كنت تواجه مشاكل مع القصص القصيرة للزاوية ، يرجى تقديم مشكلة منفصلة. شكر!