[ANGULAR][STORYBOOK] Storybook will not display the controls panel for a component story.

When running a storybook story for an angular component, the controls section of the story's canvas panel is not showing. The controls enables you to graphically interface with the angular components inputs and outputs.

Current Behavior

When browsing an angular component's story in nx nrwl storybook, the control panel does not display.

Expected Behavior

The controls section should to display in the component's storybook story canvas panel below the storybook ui pane.

Steps to Reproduce

Create a new angular nx workspace. Default all the other options. npx create-nx-workspace@latest

Create a shared folder in the workspace libs folder.

Run nx nrwl genrator to create a new angular library - storybook-test. npx nx generate @nrwl/angular:library storybook-test --no-interactive --dry-run

Run nx console to generate a new angular component ui-storybook-test in the shared-storybook-test. npx nx generate @nrwl/angular:component ui-storybook-test --no-interactive --dry-run

Run nx console to generate a storybook configuration for the storybook-test lib. npx nx generate @nrwl/angular:storybook-configuration storybook-test-lib --no-interactive --dry-run

Run nx console to generate stories for the storybook-test lib. This will create stories for every angular component in the storybook-test library, including the ui-storybook-test. npx nx generate @nrwl/angular:storybook-configuration storybook-test-lib --no-interactive --dry-run

Use nx console to run the storybook for the ui-storybook-test. npx nx run storybook-test-lib:storybook

In the canvas pane of the component story, the controls pane is not showing. Even if you toggle the add-on controls option in the storybook menu.

Here's the my package.json

"dependencies": {
    "@angular/animations": "~14.2.0",
    "@angular/common": "~14.2.0",
    "@angular/compiler": "~14.2.0",
    "@angular/core": "~14.2.0",
    "@angular/forms": "~14.2.0",
    "@angular/platform-browser": "~14.2.0",
    "@angular/platform-browser-dynamic": "~14.2.0",
    "@angular/router": "~14.2.0",
    "@compodoc/compodoc": "^1.1.19",
    "@nrwl/angular": "14.8.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }
"devDependencies": {
    "@angular-devkit/build-angular": "~14.2.0",
    "@angular-eslint/eslint-plugin": "14.0.4",
    "@angular-eslint/eslint-plugin-template": "14.0.4",
    "@angular-eslint/template-parser": "14.0.4",
    "@angular/cli": "~14.2.0",
    "@angular/compiler-cli": "~14.2.0",
    "@angular/language-service": "~14.2.0",
    "@nrwl/cli": "14.8.2",
    "@nrwl/cypress": "14.8.2",
    "@nrwl/eslint-plugin-nx": "14.8.2",
    "@nrwl/jest": "14.8.2",
    "@nrwl/linter": "14.8.2",
    "@nrwl/nx-cloud": "14.7.0",
    "@nrwl/storybook": "14.8.2",
    "@nrwl/workspace": "14.8.2",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/angular": "~6.5.9",
    "@storybook/builder-webpack5": "~6.5.9",
    "@storybook/core-server": "~6.5.9",
    "@storybook/manager-webpack5": "~6.5.9",
    "@types/jest": "28.1.1",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "5.39.0",
    "@typescript-eslint/parser": "5.39.0",
    "autoprefixer": "^10.4.0",
    "cypress": "^10.7.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "jest-preset-angular": "12.2.2",
    "ng-packagr": "~14.2.0",
    "nx": "14.8.2",
    "postcss": "^8.4.5",
    "postcss-import": "~14.1.0",
    "postcss-preset-env": "~7.5.0",
    "postcss-url": "~10.1.3",
    "prettier": "^2.6.2",
    "tailwindcss": "^3.0.2",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "tslint": "~6.1.0",
    "typescript": "4.8.4",
    "webpack": "^5.64.0"
  }

Failure Logs

No Failed logs

Screenshots

No controls panel

no-controls-panel

Expected behavior

storybook-taskbox-tutorial

Hi there! Thanks for filing an issue!

Actually, in the case of Angular + Storybook, Nx uses the native Storybook builders for serving and building Storybook. So, any issues you notice that are unexpected, maybe you should post an issue on the Storybook repository.

In any case, following the steps you posted, will result in creating a story for a component with no controls specified. If you add some @Inputs, and run the stories generator again, you will have controls.

This is the result of the story with no controls:

This is the component you described:

This is the resulting story:

Now if you add some inputs in the component, for example:

export class UiTestComponent implements OnInit {
  @Input() name = 'katerina';

and you change the template (libs/shared/storybook-test/src/lib/ui-test/ui-test.component.html):

<h1>{{ name }}</h1>

and you change the stories file (libs/shared/storybook-test/src/lib/ui-test/ui-test.component.stories.ts) to have the controls (args):

export const Primary = Template.bind({});
Primary.args = {
  name: 'katerina',
};

and you run Storybook again, you will see the controls:

Now, if the control panel still does not show, hit A or D on your keyboard, it may just be hidden. Or clear cookies and refresh.

Again, this is on the Storybook side, not the Nx side!

Thank you, hope I helped!

nrwl / nx