@nrwl/angular:storybook-configuration schematic creates preview and main files as javascript

[asgerjensen]

Current Behavior

Running npx nx g storybook-configuration <project> creates the preview and main files as javascript files, instead of typescript.

This means, if you import from another local library some injection tokens, for instance, compilation of the storybook fails, if that same library isn't referenced from any story in the library.

This is an issue, if you have some global configuration you want to provide to all stories, using classes or tokens from other services.

Expected Behavior

I expected it to create typescript files, so any references to other local libs would be correctly identified by webpack.

Is this a regression? .i.e Did this used to be the behavior at one point?

No. But it is a timesink trap due to the mysterious error message gotten during compilation.

Steps to Reproduce

npx create-nx-workspace@latest 
(choose angular, scss, workspacename: test, app name : app1)
cd test
npx nx g library tokens --buildable --importPath @test/tokens 
nx g @nrwl/angular:storybook-configuration app1 

In libs/test/tokens/src/index.ts add

import { InjectionToken } from '@angular/core';

export * from './lib/tokens.module';

export const NEW_TOKEN = new InjectionToken<string>("foo");

in apps/app1/.storybook/preview.js add

import {
    moduleMetadata
} from '@storybook/angular';
import { NEW_TOKEN } from '@test/tokens';

export const decorators =
[
    moduleMetadata({
      providers: [
          {
            provide: NEW_TOKEN,
            useValue: 'foo'
          }
      ]
    })
]

Try to run storybook

nx run app1:storybook

See that you get the failure below

If, you then add to apps/app1/src/app/app.component.stories.ts so it reads:

export default {
  title: 'AppComponent',
  component: AppComponent,
  decorators: [
    moduleMetadata({
      providers: [
        { 
          provide: NEW_TOKEN,
          useValue: 'bar'
        }
      ],
      imports: [],
    })
  ],
} as Meta<AppComponent>;

and run storybook again
it now works, because the typescript compilation somehow pulled the NEW_TOKEN into the build-context (or something, i dont really get what is going on)

Workaround
Change preview.js to preview.ts, and main.js to main.ts, and change the .storybook/tsconfig.json, to be

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "strict": false
  },

  "exclude": ["../**/*.spec.ts"],
  "include": ["../src/**/*", "*.js", "preview.ts", "main.ts"]
}

and the initial, failing, example now works.

Minimal github repo:
https://github.com/asgerjensen/nx-storybook-preview-js-issue

Failure Logs

webpack built preview db054e71d8b7cd89f710 in 61014ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/asger.jensen/Documents/gitwork/nx-rep/test/libs/tokens/src/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/@ngtools/webpack/src/ivy/loader.js:64:26
    at processResult (/Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/asger.jensen/Documents/gitwork/nx-rep/test/node_modules/@ngtools/webpack/src/ivy/loader.js:64:17

Environment

asger.jensen@S-C02C31FRMD6T test % nx report

 >  NX   Report complete - copy this into the issue template

   Node : 12.22.7
   OS   : darwin x64
   npm  : 6.14.15
   
   nx : 14.1.7
   @nrwl/angular : 14.1.7
   @nrwl/cypress : 14.1.7
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.7
   @nrwl/eslint-plugin-nx : 14.1.7
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.7
   @nrwl/js : Not Found
   @nrwl/linter : 14.1.7
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.7
   @nrwl/web : Not Found
   @nrwl/workspace : 14.1.7
   typescript : 4.6.4
   rxjs : 7.4.0
   ---------------------------------------
   Community plugins:
   	 @storybook/angular: 6.4.22

[mandarini]

Thanks for the detailed bug report @asgerjensen . I will look into this at some point. I want to see if creating .ts config files could create any potential issues. In any case, we could add an option in the generator and let the user choose.

If you're familiar with the Nx codebase, would you care to give this a shot?

[asgerjensen]

I’m not particularily familiar with the codebase, but if you can give some pointers as to where I should look, I can give it a stab

…

Sent from my iPhone

On 20 May 2022, at 14.42, Katerina Skroumpelou ***@***.***> wrote:  Thanks for the detailed bug report @asgerjensen . I will look into this at some point. I want to see if creating .ts config files could create any potential issues. In any case, we could add an option in the generator and let the user choose. If you're familiar with the Nx codebase, would you care to give this a shot? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[mandarini]

@asgerjensen I took this up, no worries. I just added an extra flag to the generator, tsConfiguration and if set to true then the generated files will be main.ts and preview.ts (with the updated contents of course). You think that makes sense?

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.