Storybook: Dukungan sudut 2

Kami telah membuat UI inti kami menjadi aplikasi terpisah. Kami berencana menggunakannya untuk NG2 secara langsung. Lihat: https://github.com/kadirahq/storybook-ui

Keren. Menantikannya! :)

Hei, @arunoda , jadi apa pendekatannya untuk yang satu ini?
Apakah kita ingin membuat UI buku cerita khusus ng2? Hanya ingin tahu untuk mendapatkan deskripsi tingkat tinggi tentang apa yang ingin Anda capai dan lihat apakah saya dapat membantu

Angular 2 API menjadi stabil dengan dirilisnya RC5. Tidak akan ada perubahan yang merusak sekarang. Jadi saat yang tepat untuk mulai mengembangkannya. cc: @arunoda @mnmtanish

@arunoda : Saya cenderung berpikir ini rendah pada peta jalan, tetapi jadi dalam kasus Angular, dalam pemisahan ini idenya adalah untuk teori ng2-storybook untuk membiarkan storybook-ui Bereaksi antarmuka menanamkan komponen Angular lalu? Apakah itu sudah dilakukan?

@ tycho01 Anda benar. Ini agak rendah pada prioritas kami.
Saya harap kita bisa mulai dengan buku cerita-ui sebagai dasarnya. Jadi, sebagian besar addons bisa menggunakan itu.
Saya mencari bantuan untuk seseorang untuk mulai mengerjakannya. Jika demikian, ping saya di Slack kami. Mari bicara lebih banyak.

@ tycho01 , @arunoda kalian beri tahu saya jika Anda mulai mengerjakan ini.

@alterx : Pointer yang saya dapat: storybook-react terpisah dari storybook-ui (berjalan di dalam iframe); langkah selanjutnya adalah bereksperimen untuk melihat apakah itu bisa diganti dengan versi Angular. Belum dimulai sejak usaha terakhir saya.

Lihat ini - https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 , saya memeriksa sumbernya dan mereka memiliki komponen react yang benar-benar terpisah yang pada dasarnya adalah iframe yang dimuliakan (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). Kita seharusnya dapat memuat cerita ng2 dalam iframe pratinjau tersebut.

react-storybook pada dasarnya memperpanjang Provider disediakan oleh storybook-ui , membuat Preview dan menangani story api. Kemudian, instance baru dari penyedia ini diteruskan ke renderStorybookUI

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

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

Setelah ini, storybook-ui memegang kendali, ia membangun konteks (yang mencakup penyedia) dan membuat aplikasi (menggunakan mantra-core createApp ). Penyedia (bersama dengan alat peraga konteks lainnya) kemudian dimasukkan ke modul ui (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js ) yang membangun pratinjau menggunakan metode renderPreview yang ditentukan saat kita membuatnya di react-storybook

@arunoda , beri tahu saya jika saya melewatkan sesuatu

@amcdnl , sepertinya menjanjikan. Maukah Anda memberi saya gambaran umum singkat tentang cara kerjanya? (tidak ada yang mewah, hanya gambaran besarnya)

@amcdnl : terima kasih telah menautkan, akan memeriksanya.
Sunting: apakah Anda mungkin memiliki demo dengannya? Saya kesulitan menemukan apa pun yang siap dijalankan.

@ MikeRyan52 ^^

@terx Ya. Anda 100% benar.
Kami juga perlu mengekspos API yang mirip dengan React Storybook untuk membuat cerita.

Kemungkinan diimpor dari angular-storybook atau serupa.

@arunoda Apakah Anda memiliki url untuk buku cerita bersudut yang Anda sebutkan, google akan segera kering.

@bcowgill afaik ini belum ada, selain dari @amcdnl yang disebutkan di atas

Ada juga ini sekarang - http://www.angularplayground.it/

Ini ada di peta jalan sekarang:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

Jadi Storybook for Vue akan segera dirilis 🎉

Ini menambahkan contoh yang cukup bagus tentang bagaimana versi untuk NG2 dapat dilakukan.
Apakah ada jiwa pemberani yang menonton utas ini yang bersedia bekerja sama dan mewujudkannya?

Saya bisa lihat, apakah Anda memiliki url repo, @ndelangen ?

Anda sedang melihatnya 😄

Buku cerita adalah monorepo, kami memiliki paket di sini, diterbitkan ke npm secara terpisah.

Saat ini aplikasi vue belum menjadi master, jadi berikut adalah 3 tautan untuk memulai:
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 adalah tempat sebagian besar kode spesifik Vue berada dan di bagian server ada konfigurasi webpack yang berbeda.

Tidak masalah untuk menduplikasi banyak kode pada awalnya! Kami akan membahasnya nanti. Setelah kita menemukan apa yang benar-benar umum dan apa yang tidak.

Hanya untuk memulai, menurutku

1. duplikat keseluruhan app / vue ke app / angular (kita berbicara tentang angular2 ke atas kan?)
2. ubah konfigurasi webpack, sehingga memuat kode beberapa hal bersudut dan mengkompilasi.
3. sesuaikan render.js hingga sesuatu muncul, sebaiknya komponen yang Anda harapkan
4. Coba beberapa tambahan
5. Perbaiki bug
6. Coba apa yang sekarang mungkin
7. Tulis dokumentasi, buat daftar addons apa yang berfungsi
8. Draf posting blog (Saya bisa melakukannya, atau menambahkan akun Anda ke publikasi media kami)
9. Rencanakan rilis
10. Lakukan rilis alfa
11. Perbaiki bug
12. Rilis aktual, publikasikan posting blog, pengumuman tweet
13. Perbaiki lebih banyak bug
14. Coba dan tambahkan dukungan untuk lebih banyak addons

@shilman Apakah master chef rilis kami 👨‍🍳

Anda dapat bergabung dengan kami saat kendur untuk mendapatkan pengalaman obrolan yang sedikit lebih cepat daripada github 💬

https://storybooks-slackin.herokuapp.com

Sempurna, @ndelangen!
Saya akan melihat kodenya dan bergabung dengan saluran Slack: D

@alterx Apakah Anda sedang mengerjakannya sekarang? Saya sedang mengkloning versi vue.js sekarang

@ Jordan-Hall, sudah ada PR dengan aplikasi dasar yang berfungsi.
Silakan merujuk ke # 1474
Saat ini saya memeriksa add-on untuk melihat mana yang berfungsi di luar kotak. Maukah Anda bergabung dengan saluran Slack agar kami dapat berkoordinasi?

@ Tentu. Apa saluran https://storybooks-slackin.herokuapp.com yang tampaknya down?

Whops, seharusnya begitu 🤔
Mungkin @ndelangen bisa membantu.
Untuk saat ini, PR saya mencakup pekerjaan dasar (merender komponen, mengirim input). Ini berbeda sedikit dari apa yang orang lain lakukan dengan vue dan react tapi angular 's cara melakukan hal-hal ( NgModules ) diperlukan beberapa perubahan.

Kami bertujuan untuk memasukkan dukungan Angular (2+) sebagai bagian dari rilis 3.3.

Ya, heroku memutuskan untuk menutup aplikasi, jadi saya baru saja menerapkannya sekarang.sh:
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

Saya tidak mengerti mengapa orang tidak hanya menggunakan gitter untuk proyek semacam ini xD

Hai Teman-teman hanya ingin melihat apakah ada yang masih aktif mengerjakan yang ini?

Ya, pekerjaan sedang berlangsung:
https://github.com/storybooks/storybook/pull/1474

Yup, saya perlu meluangkan waktu hari ini untuk mengirimkan beberapa perubahan yang saya miliki di komputer saya. Mungkin akan melakukannya saat makan siang 😄

Selamat atas penggabungan!
Apakah saya dapat npm i -g @storybook/[email protected] dan mencoba ini atau apakah pengaturan yang lebih manual diperlukan untuk bermain?

Akan sangat senang membantu menguji ini dan berkontribusi 👍

@shilman @alterx Saya mendapat kesan bahwa rilis alfa telah dibuat dengan aplikasi sudut?
Sepertinya itu belum terjadi?

Seberapa cepat kita bisa melakukan 1? @tomatosource di sini bersedia melakukan beberapa pengujian untuk kami 🙇

@shilman menyebutkan bahwa dia ingin merilisnya "dalam beberapa hari ke depan" di saluran slack Angular jadi saya kira itu belum dirilis :)

ada pembaruan? :-)

Sebenarnya ya =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

@ Hypnosphi bagaimana Anda benar-benar menginstal ini? Jenis Proyek Tidak Didukung. (kode: UNDETECTED)

@aaronksaunders Apakah Anda memiliki repo yang dapat Anda bagikan dengan kami untuk membantu kami men-debug CLI? Juga jika Anda ingin melakukannya dengan tangan, ada aplikasi contoh di sini dengan penyiapan lengkap: https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

@alterx @tomatosource Maaf atas keterlambatan dalam merilis - sekarang sudah keluar dan akan sangat senang bantuan pengujian Anda!

versi sudut apa yang didukungnya?

@ToniaDemchuk terkait:
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 @ christian-bromann @diagramatics @dlcardozo @ Elad-morphisec @jbueza @johannesjo @jshthornton @ justinlee0777 @mixn @ npatta01 @qrrock @realappie @ruedap @ kecil-penari @ tycho01 @ priley86

Dukungan Angular2 + dalam versi alfa (tepatnya 3.3.0-alpha.4 ) berkat upaya luar biasa dari @alterx untuk membuatnya berfungsi. Bantu kami mengujinya sehingga kami bisa menyiapkannya untuk rilis!

Berikut cara memulainya hanya dalam satu menit:

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

Beginilah tampilan buku cerita examples/angular-cli dari repo kami, dan Anda akan melihat versi yang dipreteli di browser Anda:

Silakan mencobanya dan beri tahu kami di sini jika Anda memiliki masalah. Anda juga dapat bergabung dengan kami di saluran slack #angular Storybook untuk bantuan waktu nyata.

Terima kasih banyak atas bantuanmu!

@shilman menjalankan yarn getstorybook menampilkan kesalahan berikut:

(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)

mengubah file node_modules/@storybook/cli/bin/index.js:1 akan menyelesaikan masalah:

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

Aneh, sebenarnya kami menggunakan babel-register di cli@alpha

@aitboudad versi node mana yang Anda gunakan?

versi node mana yang Anda gunakan?

v8.9.0, Ini tidak terkait dengan versi node tapi ini tentang babel yang mengabaikan transpiling semua file yang ada di node_modules

@shilman masalah kedua yang saya dapatkan adalah

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

diselesaikan dengan menyetel transpileOnly ke true di /node_modules/@storybook/angular/dist/server/config/webpack.config.js

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

Fitur yang hilang:

Meneruskan kustom NgModule :
Saat ini tidak ada cara untuk melewatkan NgModule kustom yang membuat implementasi saat ini sangat terbatas.

ini tentang babel yang mengabaikan transpiling semua file yang ada di node_modules

Oh begitu, akan memperbaikinya. Saya bertanya-tanya bagaimana dulu bekerja

@aitboudad Terima kasih banyak telah @Hypnosphi memperbaiki masalah CLI dan saya baru saja merilisnya. Akan mencoba untuk segera menyelesaikan perbaikan sudut!

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

@aitboudad , kami mengetahui fitur yang hilang itu dan kami mencoba untuk mengatasinya. Masalah dengan NgModules kustom adalah, dengan implementasi kami saat ini, kami membangun modul kami secara terprogram dan menyediakannya. Saya memiliki beberapa perubahan di lokal saya untuk mengizinkan penyedia dan skema yang lewat tetapi saat ini kami tidak dapat hanya mengizinkan untuk melewatkan modul khusus karena modul berpotensi berisi banyak komponen.

Apa kasus penggunaan Anda? Mungkin kita bisa memikirkan sesuatu.

Selain itu, hanya menggunakan transpile akan membuat Anda tidak perlu memeriksa tipe. Kita perlu melihat ini sebelum melakukan perubahan ini.

@alterx Apa kasus penggunaan sebenarnya Anda?

Bagaimana jika komponen saya memerlukan beberapa modul eksternal seperti material atau apa pun agar berfungsi, bagaimana kami dapat menanganinya dengan pendekatan saat ini?

Dalam hal ini harus cukup dengan penyedia, impor, dan skema (jika Anda membutuhkan, idk, elemen khusus). Masalah dengan mengizinkan modul kustom masuk adalah kami tidak dapat mengontrol jumlah komponen yang dapat dikirim pengguna dan berpotensi rusak. Buku cerita adalah tentang mengembangkan dan menguji komponen sebagai unit yang terisolasi. Ini bekerja sedikit berbeda di React dan Vue tetapi untuk sudut kita perlu membuat beberapa asumsi dan membatasi ruang lingkup.

Saya sedang mengerjakan sesuatu yang memungkinkan Anda melewati penyedia dan skema, dengan impor dan deklarasi, ini sedikit lebih kompleks. Jenis umpan balik ini sempurna, kami ingin mengeluarkan sesuatu yang dapat diuji dan melihat apa yang dibutuhkan orang.

@aitboudad Saya mencoba mereplikasi masalah Anda dengan aplikasi @angular/cli baru dibuat dan getstorybook tetapi semuanya bekerja seperti yang diharapkan. Bisakah Anda memberikan beberapa detail lebih lanjut tentang penyiapan Anda? Versi sudut? Versi TypeScript?
Saya tidak akan bisa langsung mengujinya, tho.

@alterx baru saja mencoba lagi dan tampaknya berfungsi dengan baik dengan versi alfa yang baru, terima kasih!

Oh, sempurna!
Dan yakinlah, kami memiliki rencana untuk mendukung beberapa cara untuk menyediakan impor, penyedia, dan seterusnya ke modul yang kami buat. Kami hanya perlu mencari tahu :)

Baru saja mencoba menjalankan buku cerita / contoh / sudut-cli dengan versi paket berikut:

  "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"
  }

Itu macet di konsol browser setelah menavigasi ke _Addon Knobs_ komponen dengan kesalahan saat mencoba mendapatkan 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 Terima kasih banyak telah mengujinya. Bagaimana Anda menyiapkannya di komputer Anda? Bisakah Anda membagikan repro? Terimakasih banyak!

Hai teman-teman, sangat bersemangat melihat betapa mudahnya menambahkan ini. Beberapa masalah.

Saya harus menambahkan "@storybook/addon-notes": "3.3.0-alpha.4", ke package.json juga.

Apakah ada cara untuk menghormati jalur ketikan lokal saya? Mereka didefinisikan di tsconfig.
repo: https://github.com/scttcper/ngx-color
Saya mendapatkan Cannot find module 'ngx-color/helpers'. karena tidak mengambilnya.

@shilman Contoh Anda dapat menemukan di sini https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
Perintah pengaturan:

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

Buka localhost:9009 di browser dan buka menu _Addon Knobs> Simple_ in

Ini berhasil:

Ini tidak:

Kesalahan di konsol:

@neo , saya sudah mencoba untuk mereproduksi, tetapi bagi saya semuanya berfungsi dengan baik. Bisakah Anda berbagi lebih banyak konteks? Mungkin Anda memiliki repo?

@shilman , @alterx , Mengenai masalah angular v4.3.5 ( @ToniaDemchuk ), saya sudah meneliti masalah tersebut (saya kurang paham dengan sudut, jadi ...) Di addon kenop, ada kode yang mengandalkan fakta bahwa objek komponen memiliki array annotations di atasnya. Array ini disetel oleh paket angular/core di versi baru. Tetapi di versi sebelumnya (dalam hal ini v4.3.5) mereka menggunakan paket reflect-metadata (di sini adalah perbedaan tempat ia dihapus). Saya tidak benar-benar tahu apa yang harus saya lakukan dengannya.

Ya, perubahan ini pasti berdampak pada cara kami mendapatkan metadata. Akan
memeriksanya setelah saya memiliki waktu luang. Mungkin suatu saat nanti
minggu

Pada Sabtu, 9 Des 2017, 11:41 Igor [email protected] menulis:

@shilman https://github.com/shilman , @alterx
https://github.com/alterx , Mengenai masalah dengan angular v4.3.5 (
@ToniaDemchuk https://github.com/toniademchuk ), saya telah meneliti
masalah (Saya tidak terbiasa dengan banyak sudut, jadi ...) Di addon kenop,
ada kode yang bergantung pada fakta bahwa objek komponen memiliki a
anotasi di atasnya. Larik ini diatur oleh paket sudut / inti di
versi baru. Namun di versi sebelumnya (dalam hal ini v4.3.5) mereka menggunakan file
reflect-metadata package (di sini adalah diff
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
di mana itu telah dihapus). Saya tidak benar-benar tahu apa yang harus saya lakukan dengannya.

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
.

@aitboudad , berikut PR untuk mendukung metadata modul khusus.
Sejauh ini saya telah menambahkan contoh untuk Pipa dan Layanan. Saya perlu menguji Directive, Schemas, dll tetapi mereka harus berfungsi juga.

Biarkan aku tahu apa yang Anda pikirkan

@ToniaDemchuk , maukah Anda memeriksa lagi dengan perubahan baru?

Saya baru saja merilis 3.3.0-alpha.6 yang berisi banyak perubahan Angular dari @alterx @ igor-dv @ralzinov

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

Perubahan Angular yang relevan meliputi:

• Menambahkan anotasi jenis ke pembantu, menambahkan file deklarasi ts untuk angu… # 2459
• Menambahkan metadata ekstra ke modul / komponen # 2526
• Memperbaiki penggantian output prop komponen # 2456
• [WIP] Versi sudut mendukung # 2467
• Dukungan pipa kustom Angular Add # 2518

Silakan coba tingkatkan ke versi ini dalam proyek Anda, dan beri tahu kami jika Anda mengalami masalah. Saya berharap ini akan menjadi rilis RC terakhir, dan kami dapat melakukan rilis 3.3 yang tepat besok!

@alterx itulah yang saya cari, terima kasih!

alangkah baiknya jika kita dapat menyediakan konten template sebagai pengganti komponen:

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

@shilman untuk 3.3.0-alpha.6 terlihat bagus bagi saya, satu-satunya masalah yang saya perhatikan adalah addons tidak disertakan dalam paket seperti @storybook/angular , diselesaikan dengan

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, Terima kasih atas tanggapannya. Sekarang bekerja dengan baik.

@shilman , Beberapa perubahan merusak contoh angular-cli, sekarang NameComponent dan ServiceComponent tidak dikompilasi karena pengetikan:

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'.

Saya berasumsi bahwa moduleMetadata?: { [p: string]: NgModuleMetadata; } dalam IGetStory harus moduleMetadata?: NgModuleMetadata . Setelah mentransmisikan metadata modul dalam contoh ke any semuanya bekerja seperti yang diharapkan.

Saya juga menghadapi beberapa masalah dengan pemuat scss untuk sudut, mirip dengan masalah @neo yang dijelaskan di atas.
Saya memecahkan masalah dengan aturan konfigurasi webpack berikut:

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

Sepertinya sudut tidak berfungsi dengan style-loader dan Anda perlu menggunakan to-string-loader sebagai gantinya.
Alangkah baiknya memberikan dokumentasi dan (atau) contoh bagaimana menggunakan komponen dengan lembar gaya scss.

@ToniaDemchuk Ya, Anda benar masalah dengan moduleMetadata?: { [p: string]: NgModuleMetadata; } . Sebenarnya saya tetap yang sudah di sini dengan moduleMetadata?: Partial<NgModuleMetadata>;

Saya menerbitkan perubahan @ralzinov pada 3.3.0-rc.0 yang berada di bawah tag NPM rc bukan alpha .

@ToniaDemchuk, silakan mencobanya dan beri tahu kami jika itu memperbaikinya untuk Anda.

Terima kasih semuanya atas kesabaran dan kerja keras Anda untuk membantu kami menyelesaikan masalah ini!

Masih memiliki kesalahan dengan scss loader dan angular storybook v3.3.3 dengan perubahan @ralzinov :

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

npm jalankan buku cerita
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

Terima kasih.

@ karlos1337 , lihat masalah ini - # 2616.

Dirilis di 3.3! 🎉

Menutup masalah ini, dan jika Anda mengalami masalah dengan buku cerita bersudut pandang, ajukan masalah terpisah. Terima kasih!