Storybook Not working for Nx Angular Library

I'm trying to migrate an angular project with Storybook into Nx. The stage I'm stuck at is migrating the UI components into a shared Nx Library. As a first step, I have successfully moved a single small component in. And the app still builds fine, serves fine and storybook works fine for the components in the app.

I then add storybook to the Nx UI library. But here is where it gets stuck. I've followed the online guidance as much as possible.

But honestly, I don't understand how this is supposed to work... My app consumes the UI components, but as I understand it, Storybook should be able to test the components without knowledge of the greater app? Is that right?

I'm creating an ionic app where it's standard to use src/styles.scss and src/theme/variables.scss to define a number of global styles. In my code, a few more global styles are then imported into the styles.scss like this:

@import '../../../libs/monkey-styles/src/lib/monkey-global/breakpoints.scss';
@import '../../../libs/monkey-styles/src/lib/monkey-global/airsmart-colours.scss';
...


.storybook/main.ts just looks like this:

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
stories: [
'../src/lib/components/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
],
framework: {
name: '@storybook/angular',
options: {},
},
};

export default config;


I've put this code into the lib project.json, to mimic what I had to do in the build script in the app (and in an effort to bring in global styles) :

"storybook": {
"executor": "@storybook/angular:start-storybook",
"options": {
"port": 4400,
"configDir": "libs/monkey-ngx/.storybook",
"browserTarget": "monkey-ngx:build-storybook",
"compodoc": false
},
"configurations": {
"ci": {
"quiet": true
}
}
},
"build-storybook": {
"executor": "@storybook/angular:build-storybook",
"outputs": ["{options.outputDir}"],
"options": {
"outputDir": "dist/storybook/monkey-ngx",
"configDir": "libs/monkey-ngx/.storybook",
"browserTarget": "monkey-ngx:build-storybook",
"styles": [
"apps/my-app/src/styles.scss",
"apps/my-app/src/theme/variables.scss"
],
"compodoc": false
},
"configurations": {
"ci": {
"quiet": true
}
}
},


When I try to run storybook, I get an error which refers to one of my components that is still in the app - i.e. not the one I moved into the library. This completely breaks my understanding of this. I don't understand why it cares about other stuff in the app.

D:\MonkeySource\...\my-app\src\shared\components\loading-button.component.ts Unknown word
19 | ::ng-deep {
20 | @for $i from 1 through 8 {
> 21 | svg.hilite-#{$i} {
| ^
22 | path:nth-of-type(#{$i}) {
23 | fill: var(--brand-color);

Useful Observation


The component & story I'm using as lab-rat looks like this:

import type { Meta, StoryObj } from '@storybook/angular';
import { BackButtonComponent } from './back-button.component';

// import { within } from '@storybook/testing-library';
// import { expect } from '@storybook/jest';

const meta: Meta<BackButtonComponent> = {
component: BackButtonComponent,
title: 'BackButtonComponent',
};
export default meta;
type Story = StoryObj<BackButtonComponent>;

export const Primary: Story = {
args: {},
};

export const Heading: Story = {
args: {},
// play: async ({ canvasElement }) => {
// const canvas = within(canvasElement);
// expect(canvas.getByText(/back-button works!/gi)).toBeTruthy();
// },
};


import { CommonModule, Location } from '@angular/common';
import { Component, inject } from '@angular/core';
import { IonicModule, NavController } from '@ionic/angular';
import { UrlHistoryService } from '@services/url-history.service';
import { APP_ROUTE } from '@src/app/app-routing.module';

@Component({
selector: 'app-back-button',
standalone: true,
template: `
<ion-button (click)="goBack()">
<ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
</ion-button>
`,
imports: [
IonicModule,
CommonModule,
],
})
export class BackButtonComponent {
/** Location */
location = inject(Location);

/** Url history */
urlHistory = inject(UrlHistoryService);

/** Navigation controller */
navCtrl = inject(NavController);

/** Go back */
goBack() {
const { stack } = this.urlHistory;
const canGoBack = stack.length > 1;
canGoBack
? this.location.back()
: this.navCtrl.navigateBack(`/${APP_ROUTE.HOME}`);
}
}


In my defence, I did not write this, but it looks a bit funky that a UI component is pulling in code from the services. If I just comment all reference to UrlHistoryService and APP_ROUTE, the errors go away, but I see nothing inside of Storybook:



So I have a couple of questions here. What am I doing wrong in terms of getting storybook to work with my library component. And is the code I'm working with badly written, in the sense that it should have used an Input instead of the import to get the route?

Continue reading...