Impossibile trovare il componente templateUrl e stylesUrl in Storybook con una libreria angolare e un collegamento NPM personalizzati

Aug 21 2020

Sto cercando di creare una nuova libreria Angular 10 e uno Storybook separato come documentazione e vista di sviluppo. Tutto funziona come previsto quando html e gli stili sono in linea nel file * .component.ts. Ma ogni volta che provo a creare un nuovo componente con file html e scss separati, Storybook restituisce un errore nella console che non riesce a trovare .component.html / .component.scss.

Passaggi per riprodurre

Crea una nuova libreria

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib
ng generate component notification --project=my-lib

Questo genera un componente con la seguente configurazione:

  selector: 'lib-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class Notification

La prossima cosa che ho fatto è stato creare la libreria, cd nella dist/my-libcartella ed eseguire npm link.

Ho anche creato un altro progetto Angular che conterrà il progetto Storybook, ho seguito questo tutorial per farlo partire: https://www.learnstorybook.com/intro-to-storybook/angular/en/get-started/

Dopo aver terminato il tutorial, ho aggiunto la libreria che ho creato in precedenza al progetto del libro di npm link my-libfiabe utilizzando e ho creato un nuovo file di storie nel relativo file /src/stories. Dopodiché importa il componente nel file stories come import { NotificationComponent } from 'my-lib';e tutto sembra andare bene, perché può trovare il componente corretto nel pacchetto npm collegato.

Ma ogni volta che eseguo Storybook npm run storybookottengo i seguenti errori perché non riesco a trovare il templateUrl e styleUrl corretti:

GET http://localhost:6006/notification.component.html 404 (Not Found)

zone.js:690 Unhandled Promise rejection: Failed to load notification.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load notification.component.html undefined

Ora mi chiedo se sia possibile separare i file html / scss / ts poiché preferisco questo per la leggibilità. Se questo è possibile, come posso assicurarmi che la radice dei componenti durante l'esecuzione di storybook non sia ./? Devo aggiungere una sorta di configurazione del webpack o ci sono altre soluzioni?

Se qualcosa non è chiaro, non esitate a chiedere e cercherò di fornire le informazioni nel miglior modo possibile.

Grazie e cordiali saluti,

Wesley

Risposte

3 JohnsonBhengra Aug 30 2020 at 12:28

Secondo me Storybook non supporta ancora le funzionalità di Ivy. Se disabiliti Ivy nella build, projects / lib / tsconfig.lib.json e projects / lib / tsconfig.lib.prod.json , funzionerà.

tsconfig.lib.json

"angularCompilerOptions": {
    "enableIvy": false
  }

Ecco il link al numero del libro di fiabe come riferimento.