Storybook: Winkel 2 Unterstützung

Wir haben unsere Kernbenutzeroberfläche in eine separate App umgewandelt. Wir planen, es direkt für NG2 zu verwenden. Siehe: https://github.com/kadirahq/storybook-ui

Cool. Sich auf etwas freuen! :) :)

Hey, @arunoda , was wird der Ansatz für diesen sein?
Möchten wir eine ng2-spezifische Storybook-Benutzeroberfläche erstellen? Ich bin nur neugierig, eine allgemeine Beschreibung dessen zu erhalten, was ihr erreichen wollt, und zu sehen, ob ich helfen kann

Angular 2-APIs sind mit der Veröffentlichung von RC5 stabil geworden. Es wird jetzt keine bahnbrechenden Änderungen geben. Es ist also ein guter Zeitpunkt, um mit der Entwicklung zu beginnen. cc: @arunoda @mnmtanish

@arunoda : Ich neige dazu zu glauben, dass dies auf der Roadmap niedrig ist, aber im Fall Angular wäre in dieser Aufteilung die Idee, dass ein theoretischer ng2-storybook storybook-ui reagieren lässt Schnittstelle einbetten Winkelkomponenten dann? Wurde das gemacht?

@ tycho01 Du hast recht. Es ist ein bisschen niedrig für unsere Priorität.
Ich hoffe, wir konnten mit Storybook-UI als Basis beginnen. Die meisten Addons könnten das also nutzen.
Ich suche Hilfe für jemanden, der anfängt, daran zu arbeiten. Wenn ja, ping mich auf unsere Slack. Lass uns mehr reden.

@ tycho01 , @arunoda ihr lasst es mich wissen, wenn ihr daran arbeitet.

@alterx : Zeiger, die ich bekommen habe: storybook-react ist getrennt von storybook-ui (läuft in einem Iframe); Der nächste Schritt besteht darin, zu experimentieren, ob es durch eine Angular-Version ersetzt werden kann. Ich habe seit meinem letzten Versuch nicht angefangen.

Kasse dies - https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 , ich habe die Quelle überprüft und sie haben eine völlig separate Reaktionskomponente, die im Grunde ein verherrlichter Iframe ist (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). Wir sollten in der Lage sein, die ng2-Storys in diesen Vorschau-Iframe zu laden.

react-storybook grundsätzlich das von Provider bereitgestellte storybook-ui , rendert das oben genannte Preview und verwaltet die Story-API. Dann wird eine neue Instanz dieses Anbieters an renderStorybookUI

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

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

Danach hat storybook-ui Kontrolle, erstellt den Kontext (einschließlich des Anbieters) und erstellt die App (unter Verwendung von createApp von mantra-core). Der Anbieter (zusammen mit den anderen Kontext-Requisiten) wird dann in das Modul ui (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js) eingefügt ), das die Vorschau mit der Methode renderPreview , die bei der Erstellung in react-storybook

@arunoda , bitte lass es mich wissen, wenn mir etwas fehlt

@amcdnl , das sieht vielversprechend aus. Würde es Ihnen etwas ausmachen, mir einen schnellen Überblick über die Funktionsweise zu geben? (nichts Besonderes, nur das große Ganze)

@amcdnl : Danke für die Verknüpfung, werde es überprüfen.
Edit: hättest du vielleicht eine demo damit? Ich habe Probleme, etwas zu finden, das zum Laufen bereit ist.

@ MikeRyan52 ^^

@alterx Ja . Sie sind 100% korrekt.
Wir müssen auch eine API verfügbar machen, die React Storybook ähnelt, um Geschichten zu erstellen.

Möglicherweise aus angular-storybook oder ähnlichem importiert.

@arunoda Hast du eine URL für das eckige Storybook, das du erwähnt

@bcowgill afaik das gibt es noch nicht, abgesehen von den oben erwähnten

Es gibt auch das jetzt - http://www.angularplayground.it/

Es ist jetzt auf der Roadmap:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

Storybook for Vue wird also bald veröffentlicht 🎉

Dies ist ein ziemlich gutes Beispiel dafür, wie eine Version für NG2 erstellt werden kann.
Gibt es mutige Seelen, die diesen Thread beobachten und bereit wären, zusammenzuarbeiten und ihn umzusetzen?

Ich könnte einen Blick darauf werfen, hast du eine Repo-URL zur Hand ,

Du siehst es dir an 😄

Storybook ist ein Monorepo, wir haben hier Pakete, die separat auf npm veröffentlicht werden.

Derzeit ist die Vue-App noch nicht im Master. Hier sind 3 Links, um loszulegen:
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

In der Datei render.js befindet sich der größte Teil des Vue-spezifischen Codes, und auf dem Serverteil gibt es eine andere Webpack-Konfiguration.

Es ist in Ordnung, zuerst viel Code zu duplizieren! Wir werden das später ansprechen. Nachdem wir herausgefunden haben, was wirklich üblich ist und was nicht.

Nur um loszulegen, würde ich sagen

1. Dupliziere die gesamte App / Vue in App / Angular (wir sprechen von Angular2 und höher, oder?)
2. Passen Sie die Webpack-Konfiguration an, damit der Code einige eckige Elemente lädt und kompiliert.
3. Optimieren Sie render.js, bis etwas angezeigt wird, vorzugsweise die erwartete Komponente
4. Probieren Sie einige Addons aus
5. Fehler beheben
6. Versuchen Sie, was jetzt möglich ist
7. Schreiben Sie eine Dokumentation und listen Sie auf, welche Addons funktionieren
8. Entwurf eines Blogposts (Ich kann es tun oder Ihr Konto zu unserer mittleren Veröffentlichung hinzufügen)
9. Planfreigabe
10. Alpha-Release durchführen
11. Fehler beheben
12. Aktuelle Veröffentlichung, Blogpost veröffentlichen, Tweet-Ankündigung
13. Beheben Sie weitere Fehler
14. Versuchen Sie, weitere Addons zu unterstützen

@shilman Ist unser Release-Meisterkoch 👨‍🍳

Sie können sich uns anschließen, um ein etwas schnelleres Chat-Erlebnis als bei Github zu erzielen

https://storybooks-slackin.herokuapp.com

Perfekt, @ndelangen!
Ich werde mir den Code ansehen und mich dem Slack-Kanal anschließen: D.

@alterx Arbeitest du gerade daran? Ich klone jetzt die vue.js-Version

@ Jordan-Hall, es gibt bereits eine PR mit einer grundlegenden App.
Bitte beziehen Sie sich auf # 1474
Ich überprüfe derzeit die Add-Ons, um festzustellen, welche sofort einsatzbereit sind. Würde es Ihnen etwas ausmachen, dem Slack-Kanal beizutreten, damit wir koordinieren können?

@alterx Sicher. Was ist der Kanal https://storybooks-slackin.herokuapp.com scheint

Whops, das soll es sein 🤔
Vielleicht kann @ndelangen dabei helfen.
Meine PR deckt vorerst die Grundarbeit ab (Rendern einer Komponente, Senden von Eingaben). Es ist ein bisschen anders als das, was andere mit vue und react aber angular 's Art, Dinge zu tun ( NgModules ), erforderte einige Änderungen.

Wir möchten Angular (2+) -Unterstützung als Teil der Version 3.3 einbeziehen.

Ja, Heroku hat beschlossen, die App herunterzufahren, also habe ich sie gerade auf now.sh bereitgestellt:
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

Ich verstehe nicht, warum Leute nicht nur Gitter für diese Art von Projekten verwenden xD

Hey Leute, wollte nur sehen, ob noch jemand aktiv an diesem arbeitet?

Ja, die Arbeit schreitet voran:
https://github.com/storybooks/storybook/pull/1474

Ja, ich muss heute etwas Zeit finden, um einige Änderungen an meinem Computer einzureichen. Wird es wahrscheinlich während des Mittagessens tun 😄

Herzlichen Glückwunsch zum Zusammenschluss!
Kann ich npm i -g @storybook/[email protected] ausprobieren? Oder ist ein manuelleres Setup erforderlich, um ein Spiel zu haben?

Würde gerne helfen, dies zu testen und einen Beitrag zu leisten 👍

@shilman @alterx Ich hatte den Eindruck, dass mit der eckigen App eine Alpha-Version erstellt wurde?
Scheint so, ist das noch nicht der Fall?

Wie schnell könnten wir 1 machen? @tomatosource hier ist bereit, einige Tests für uns durchzuführen 🙇

@shilman erwähnte, dass er es "in den nächsten Tagen" im Angular Slack Channel veröffentlichen möchte, also denke ich, dass es einfach nicht veröffentlicht wurde :)

irgendwelche Updates? :-)

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

@ Hypnosphi wie installiert man das eigentlich? Nicht unterstützter Projekttyp. (Code: NICHT ERKANNT)

@aaronksaunders Haben Sie ein Repo, das Sie mit uns teilen können, um uns beim Debuggen der CLI zu helfen? Auch wenn Sie es von Hand machen möchten, gibt es hier eine Beispiel-App mit einem vollständigen Setup: https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

@alterx @tomatosource Entschuldigen Sie die Verzögerung bei der Veröffentlichung - es ist jetzt erhältlich und würde sich über Ihre Hilfe beim Testen

Welche Version von Angular unterstützt es?

@ToniaDemchuk verwandte:
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 @ tiny-dancer @ tycho01 @ priley86

Die Unterstützung von Angular2 + erfolgt in Alpha ( 3.3.0-alpha.4 um genau zu sein), dank der herkulischen Bemühungen von @alterx , es zum

So fangen Sie in nur einer Minute an:

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

So sieht das examples/angular-cli Storybook aus unserem Repo aus, und Sie sollten eine abgespeckte Version in Ihrem Browser sehen:

Bitte probieren Sie es aus und lassen Sie uns hier wissen, wenn Sie Probleme haben. Sie können sich auch dem Storybook Slack #angular-Kanal anschließen, um Hilfe in Echtzeit zu erhalten.

Vielen Dank für deine Hilfe!

@shilman mit yarn getstorybook wirft den folgenden Fehler:

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

Das Ändern der Datei node_modules/@storybook/cli/bin/index.js:1 würde das Problem lösen:

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

Seltsam, wir verwenden tatsächlich das Babel-Register in cli@alpha

@aitboudad Welche Knotenversion verwenden Sie?

Welche Knotenversion verwenden Sie?

v8.9.0, Es hat nichts mit der Knotenversion zu tun, aber es geht um babel, das das Transpilieren aller Dateien im node_modules ignoriert

@shilman das zweite Problem, das ich habe, ist

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

gelöst durch Setzen von transpileOnly auf true in /node_modules/@storybook/angular/dist/server/config/webpack.config.js

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

Fehlende Funktion:

Übergeben eines benutzerdefinierten NgModule :
Derzeit gibt es keine Möglichkeit, ein benutzerdefiniertes

Es geht um Babel, das das Transpilieren aller Dateien im node_modules ignoriert

Oh ich verstehe, wird reparieren. Ich frage mich, wie es früher funktioniert hat

@aitboudad Vielen Dank für das Debuggen! @ Hypnosphi hat das CLI-Problem behoben und ich habe es gerade veröffentlicht. Ich werde versuchen, die Winkelkorrekturen bald herauszubekommen!

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

@aitboudad , wir sind uns dieser fehlenden Funktion bewusst und versuchen dies

Was ist Ihr genauer Anwendungsfall? Vielleicht können wir etwas herausfinden.

Wenn Sie nur transpile verwenden, bleiben Sie auch ohne Typprüfung. Wir müssen dies untersuchen, bevor wir diese Änderung vornehmen.

@alterx Was ist Ihr genauer Anwendungsfall?

Was ist, wenn meine Komponente einige externe Module wie Material oder was auch immer benötigt, um zu funktionieren, wie könnten wir mit dem aktuellen Ansatz damit umgehen?

In diesem Fall sollte es bei Anbietern, Importen und Schemas ausreichen (falls Sie IDK benötigen, benutzerdefinierte Elemente). Das Problem beim Einlassen eines benutzerdefinierten Moduls besteht darin, dass wir die Anzahl der Komponenten, die ein Benutzer einreichen kann, nicht steuern können und die möglicherweise beschädigt werden können. Im Storybook geht es darum, Komponenten als isolierte Einheiten zu entwickeln und zu testen. Dies funktioniert in React und Vue etwas anders, aber für Winkel müssen wir einige Annahmen treffen und den Umfang einschränken.

Ich arbeite an etwas, das es Ihnen ermöglichen soll, Anbieter und Schemas zu übergeben. Mit Importen und Deklarationen ist es etwas komplexer. Diese Art von Feedback ist perfekt. Wir wollten etwas herausbringen, das getestet werden kann, und sehen, was die Leute brauchen.

@aitboudad Ich habe versucht, Ihr Problem mit einer frisch erstellten @angular/cli App und getstorybook zu replizieren, aber alles funktioniert wie erwartet. Könnten Sie weitere Details zu Ihrem Setup angeben? Winkelversion? TypeScript-Version?
Ich werde es nicht sofort testen können.

@alterx hat es gerade noch einmal versucht und es scheint gut mit der neuen Alpha-Version zu funktionieren, danke!

Oh, perfekt!
Und seien Sie versichert, wir haben Pläne, eine Möglichkeit zu unterstützen, Importe, Anbieter usw. für das von uns erstellte Modul bereitzustellen. Wir müssen es nur herausfinden :)

Ich habe gerade versucht, das Storybook / examples / angle-cli mit den folgenden Paketversionen auszuführen:

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

Es stürzt in der Browserkonsole ab, nachdem Sie mit dem Fehler zu _Addon Knobs_-Komponenten navigiert haben, während Sie versuchen, 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 Vielen Dank für das Testen. Wie haben Sie es auf Ihrem Computer eingerichtet? Können Sie einen Repro teilen? Danke vielmals!

Hey Leute, super aufgepumpt, wie einfach das hinzuzufügen war. Einige Probleme.

Ich musste auch "@storybook/addon-notes": "3.3.0-alpha.4", zu package.json hinzufügen.

Gibt es eine Möglichkeit, meine lokalen Typoskriptpfade zu respektieren? Sie sind in tsconfig definiert.
Repo: https://github.com/scttcper/ngx-color
Ich bekomme Cannot find module 'ngx-color/helpers'. weil es sie nicht aufnimmt.

@shilman Das Beispiel finden Sie hier https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
Setup-Befehle:

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

Öffnen Sie localhost:9009 im Browser und navigieren Sie im Menü zu _Addon Knobs> Simple_

Das hat funktioniert:

Das hat nicht:

Fehler in der Konsole:

@neo , ich habe versucht zu reproduzieren, aber für mich funktioniert alles gut. Können Sie mehr Kontext teilen? Vielleicht hast du ein Repo?

@shilman , @alterx , In Bezug auf das Problem mit Angular v4.3.5 ( @ToniaDemchuk ) habe ich das Problem untersucht (ich kenne Code , auf den man sich stützt Tatsache, dass ein Komponentenobjekt ein annotations -Array enthält. Dieses Array wird in der neuen Version durch das Paket angular/core . In der vorherigen Version (in diesem Fall v4.3.5) wurde jedoch ein reflect-metadata -Paket verwendet (hier ist der Unterschied, in dem es entfernt wurde). Ich weiß nicht wirklich, was ich damit anfangen soll.

Ja, diese Änderung hat definitiv Auswirkungen darauf, wie wir die Metadaten erhalten. Wille
schau es dir an, wenn ich etwas Freizeit habe. Wahrscheinlich irgendwann im nächsten
Woche

Am Samstag, 9. Dezember 2017, 11:41 Uhr schrieb Igor [email protected] :

@shilman https://github.com/shilman , @alterx
https://github.com/alterx , Bezüglich des Problems mit Angular v4.3.5 (
@ToniaDemchuk https://github.com/toniademchuk ), ich habe die recherchiert
Problem (Ich bin nicht viel mit Winkel vertraut, also ...) In den Knöpfen Addon,
Es gibt Code, der darauf beruht, dass ein Komponentenobjekt eine hat
Annotations-Array darauf. Dieses Array wird durch das Winkel- / Kernpaket im festgelegt
neue Version. In der vorherigen Version (in diesem Fall v4.3.5) wurde jedoch a verwendet
Reflect-Metadata-Paket (hier ist der Diff
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
wo es entfernt wurde). Ich weiß nicht wirklich, was ich damit anfangen soll.

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
.

@aitboudad , hier ist die PR zur Unterstützung von benutzerdefinierten
Bisher habe ich Beispiele für Pipes and Services hinzugefügt. Ich muss Richtlinien, Schemata usw. testen, aber sie sollten auch funktionieren.

Lass mich wissen was du denkst

@ToniaDemchuk , würde es Ihnen etwas suchen ?

Ich habe gerade 3.3.0-alpha.6 veröffentlicht, das eine Reihe von Winkeländerungen von @ralzinov enthält

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

Die relevanten Winkeländerungen umfassen:

• Typ-Annotation zu Helfern hinzugefügt, ts-Deklarationsdateien für angu… # 2459 hinzugefügt
• Hinzufügen zusätzlicher Metadaten zu Modul / Komponenten # 2526
• Korrektur der Übersteuerung der Propellerausgabe Nr. 2456
• [WIP] Angular-Versionen unterstützen # 2467
• Angular Fügen Sie die Unterstützung für benutzerdefinierte Rohre # 2518 hinzu

Bitte versuchen Sie in Ihren Projekten ein Upgrade auf diese Version und teilen Sie uns mit, wenn Probleme auftreten. Ich hoffe, dass dies die letzte RC-Veröffentlichung sein wird und wir bis morgen eine richtige 3.3-Veröffentlichung machen können!

@alterx genau das suche ich, danke!

Es wäre schön, wenn wir den Vorlageninhalt anstelle der Komponente bereitstellen könnten:

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

@shilman für 3.3.0-alpha.6 sieht für mich gut aus. Das einzige Problem, das mir aufgefallen ist, ist, dass die Addons nicht im Paket enthalten sind, wie @storybook/angular , gelöst von

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, Danke für die Antwort. Jetzt funktioniert es gut.

@shilman , Einige Änderungen haben das

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

Ich nehme an, dass das moduleMetadata?: { [p: string]: NgModuleMetadata; } im IGetStory moduleMetadata?: NgModuleMetadata . Nach dem Umwandeln von Modulmetadaten in Beispielen in any funktioniert alles wie erwartet.

Ich habe auch einige Probleme mit SCSS-Ladern für Winkel gehabt, ähnlich dem oben beschriebenen Problem
Ich habe das Problem mit der folgenden Webpack-Konfigurationsregel gelöst:

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

Es sieht so aus, als ob der Winkel nicht mit style-loader funktioniert und Sie stattdessen to-string-loader verwenden müssen.
Es wäre schön, eine Dokumentation und (oder) ein Beispiel für die Verwendung von Komponenten mit scss-Stylesheets bereitzustellen.

@ToniaDemchuk Ja, Sie haben das richtige Problem mit moduleMetadata?: { [p: string]: NgModuleMetadata; } . Eigentlich habe ich das hier schon mit moduleMetadata?: Partial<NgModuleMetadata>; behoben

Ich habe @ralzinovs Änderung bei 3.3.0-rc.0 die unter dem NPM-Tag rc statt alpha .

@ToniaDemchuk bitte probieren Sie es aus und lassen Sie uns wissen, ob dies das

Vielen Dank an alle für Ihre Geduld und Ihre harte Arbeit, die uns dabei helfen, dies zu erreichen!

Habe immer noch den Fehler mit scss loader und Angular Storybook v3.3.3 mit @ralzinov Änderungen:

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

npm run storybook
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

Vielen Dank.

@ karlos1337 ,

Veröffentlicht in 3.3! 🎉

Schließen Sie dieses Problem, und wenn Sie Probleme mit dem Storybook für Angular haben, reichen Sie bitte ein separates Problem ein. Vielen Dank!