angular 13.1 stories file missing from the TypeScript compilation

[literalpie]

Describe the bug
When using Angular 13.1, the latest storybook, and no "storybook:build" builder, I get the following error:

Error: /{redacted}/sb-ng-performance/src/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

To Reproduce
Create a new project with Angular 13.1 and the latest storybook alpha (stable does not support ng 13.1). Make sure you don't have a "storybook:build" configuration in your angular.json file. Try building.
see this reproduction

System

  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.21.0 - /usr/local/bin/node
    Yarn: 3.1.1 - /usr/local/bin/yarn
    npm: 7.18.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Safari: 15.1
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/addon-docs: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/addon-essentials: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/addon-links: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/angular: 6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/builder-webpack5: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/manager-webpack5: ^6.5.0-alpha.4 => 6.5.0-alpha.4 

Additional context

[flo-02-mu]

Changing the default includes in .storybook/tsconfig.json from:

"include": [
    "../src/**/*",
    "../projects/**/*"
  ],

to

"include": [
    "../stories/**/*",
    "../src/**/*",
    "../projects/**/*"
  ],

solved the above issue for me. Not sure though if this is only a workaround.

[literalpie]

I should clarify that this isn't a problem in angular 13.0. So even if it expected that the stories need to be included, it may be an unintentional breaking change since this wasn't required in the past.
You can test this by downgrading all angular packages in my repro to 13.0.x.

[meriturva]

Simple step to reproduce with angular 13.1:

• ng new projectName
• npx sb@next init
• npm run storybook

In my case change .storybook/tsconfig.json as described in #17039 (comment) doesn't solve the issue.

[literalpie]

I think the best workaround is probably to add a storybook builder to angular.json

[artaommahe]

@literalpie any other solutions? we have storybooks for a group of libs, dunno how it will work in angular.json to add builder for such case

[danielbater]

I got this to "build" by removing .storybook/tsconfig.json updating tsconfig.app.json

"exclude": [],
"include": ["**/*"]

However, then I am faced with JIT issues such as Errors during JIT compilation of template for DummyComponent: Opening tag "dummy-component\n" not terminated. Which is not the case. Another is Uncaught (in promise) TypeError: n is not a function Which looks to caused by the Zeplin addon

Also I get this when downgrading to Angular 13.0.3. not just 13.1.x.

[literalpie]

@artaommahe I think using a builder in the angular.json file should still work. You can see an example in a different branch of my reproduction project here. Notice that the storybook builder is not a part of any specific Angular project.

@danielbater I wouldn't recommend including all files using a wildcard like you did in the tsconfig. I think this will probably cause a lot of issues. Was your project working at a different point (for example, when you were on 12.x), or is this a new project? The issue you are seeing might be unrelated to mine.

[meriturva]

Thanks @literalpie , I have switched our project using builder on angular.json file but the watch feature and build during editing doesn't work anymore, have you tested on your side?

[danielbater]

@literalpie I agree including everything is not a good idea, but only way I could get this to work. Yes project works fine when using Angular 12. When remaining in Angular 13 and I go back to a normal setup which for me is no tsconfig in .storybook:

The error is the same as yours.

ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: filepath\filename.component.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

So I tried adding includes to my tsconfig.app.json to see if I can get it to build as I previously commented I did but only with a wildcard include eveything.

I added a fresh new tsconfig.json to .storybook folder. Somthing like this:

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": ["node"]
  },
  "include": ["../**/*.stories.ts"],
  "exclude": []
}

But then continue to get cannot find stories.

Error: filepath\filename.component.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 
'files' or 'include' property.

[danielbater]

I have just tried the above adding to angular.json build, this does build but also has JIT issues I see when adding wildcard to tsconfig.app.json

Errors during JIT compilation of template for DummyComponent: Opening tag "dummy-component\n" not terminated.

I have obviously checked this, and it's not an issue. Also the actual Angular app builds/runs fine no JIT issues, and I get lots of these for every single story/component.

and another JIT issue:

Uncaught (in promise) TypeError: n is not a function

The latter I think is linked to Zeplin addon

[nodro7]

I'm getting the same JIT errors as @danielbater since the update to Angular 13.1 and Storybook 6.5.0-alpha.4 (also 6.4.9)

Errors during JIT compilation of template for [COMPONENT_NAME]: Opening tag "[OPENING_TAG]" not terminated.

This is happening for all 35 components in a library

There were no errors with Angular 12 & Storybook 6.3

It happens when building either with start-storybook or when using a builder in angular.json

[literalpie]

It would be helpful if someone could link to a repo/branch that gets the JIT error, or instructions on how to change my repro to get the error.

[meriturva]

Thanks @literalpie ... just run:

• ng new projectName
• npx sb@next init
• npm run storybook

secondly, watch files doesn't work anymore with angular.json as described: #17039 (comment)

[danielbater]

Thanks @literalpie ... just run:

• ng new projectName
• npx sb@next init
• npm run storybook

secondly, watch files doesn't work anymore with angular.json as described: #17039 (comment)

@literalpie using @meriturva's steps you should see the error when running npm run storybook:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\projectName\src\stories\Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

If you update angular.json following here, and working through a few issues like staticDir and compodoc I end up with:

"storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "projectName:build",
      "port": 4400,
      "compodoc": false
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "browserTarget": "projectName:build"
    }
  }
}
...
"without-browser-target": {
      "root": "",
      "projectType": "library",
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        }
      }
    }

And run command ng run projectName:storybook, you should then have a build, but these steps do not produce any JIT errors in console. But do produce the lack of watch/rebuild as other's reported. But the components are not displayed how I would expect either:

Following on from this I wanted to create the simplist repo (here) with issue and seems once I added Angular Material is when it happened.

Errors during JIT compilation of template for DummyComponent: Opening tag "mat-slider" not terminated. ("export default "<p>dummy works!</p>\n<span>Material Slider</span>\n[ERROR ->]<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\"></mat-slider>\n";"): ng:///DummyComponent/template.html@0:67, Unexpected closing tag "mat-slider". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("works!</p>\n<span>Material Slider</span>\n<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\">[ERROR ->]</mat-slider>\n";"): ng:///DummyComponent/template.html@0:125
    at parseJitTemplate (compiler.mjs:20644)
    at CompilerFacadeImpl.compileComponent (compiler.mjs:20410)
    at Function.get (core.mjs:24221)
    at getComponentDef (core.mjs:1119)
    at verifyDeclarationsHaveDefinitions (core.mjs:23859)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23831)
    at core.mjs:23828
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23826)

Hope this helps.

I did have a few more examples in repo hoping to find a simplier way to demo the issue, but these only show the issue above where they do not look how I would expect.

[joewIST]

Thanks @literalpie ... just run:

• ng new projectName
• npx sb@next init
• npm run storybook

secondly, watch files doesn't work anymore with angular.json as described: #17039 (comment)

@literalpie using @meriturva's steps you should see the error when running npm run storybook:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\projectName\src\stories\Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

If you update angular.json following here, and working through a few issues like staticDir and compodoc I end up with:

"storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "projectName:build",
      "port": 4400,
      "compodoc": false
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "browserTarget": "projectName:build"
    }
  }
}
...
"without-browser-target": {
      "root": "",
      "projectType": "library",
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        }
      }
    }

And run command ng run projectName:storybook, you should then have a build, but these steps do not produce any JIT errors in console. But do produce the lack of watch/rebuild as other's reported. But the components are not displayed how I would expect either:

Following on from this I wanted to create the simplist repo (here) with issue and seems once I added Angular Material is when it happened.

Errors during JIT compilation of template for DummyComponent: Opening tag "mat-slider" not terminated. ("export default "<p>dummy works!</p>\n<span>Material Slider</span>\n[ERROR ->]<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\"></mat-slider>\n";"): ng:///DummyComponent/template.html@0:67, Unexpected closing tag "mat-slider". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("works!</p>\n<span>Material Slider</span>\n<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\">[ERROR ->]</mat-slider>\n";"): ng:///DummyComponent/template.html@0:125
    at parseJitTemplate (compiler.mjs:20644)
    at CompilerFacadeImpl.compileComponent (compiler.mjs:20410)
    at Function.get (core.mjs:24221)
    at getComponentDef (core.mjs:1119)
    at verifyDeclarationsHaveDefinitions (core.mjs:23859)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23831)
    at core.mjs:23828
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23826)

Hope this helps.

I did have a few more examples in repo hoping to find a simplier way to demo the issue, but these only show the issue above where they do not look how I would expect.

I am having the same issue with missing styles. Has anyone found a workaround?

[markos-ag]

We actually have the same issue in our app and figured out that the problem comes from loading template files via templateUrl. If we have our template inline in the .ts file then storybook renders it properly but if we extract it to a different template (html) file and use it via templateUrl then rendering breaks with the JIT compilation error.

[nodro7]

As @markos-ag points out, inlining the template solves the JIT error for me too.

[ankor-at-ccmath]

I think this needs to be solved. It's not a robust solution to inline all the templates. Good work on finding the issue though!

[danielbater]

I think this needs to be solved. It's not a robust solution to inline all the templates. Good work on finding the issue though!

Agree with @ankor-at-ccmath this needs a fix. I have updated my repo with a new branch containing with a new component WilmaComponent, this has inline template which does work.

[arufonsekun]

I was facing the same issue here, and what I did was comment out this lines from tsconfig.app.json and add **/*.stories.* in my includes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "**/*.stories.*" // <- added
  ],
  // "exclude": [
  //   "**/*.stories.*"
  // ]
}

after that I get this error:

then I solved adding allowSyntheticDefaultImports: true to my angularCompilerOptions, after that npm run storybook worked pretty well.

I hope I can help someone with this solution, and please let me know if this solution is not the best 😊

[danielbater]

I was facing the same issue here, and what I did was comment out this lines from tsconfig.app.json and add **/*.stories.* in my includes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "**/*.stories.*" // <- added
  ],
  // "exclude": [
  //   "**/*.stories.*"
  // ]
}

after that I get this error:

then I solved adding allowSyntheticDefaultImports: true to my angularCompilerOptions, after that npm run storybook worked pretty well.

I hope I can help someone with this solution, and please let me know if this solution is not the best 😊

I have not tested this but is interesting, should the .storybook/tsconfig.json not overwrite tsconfig.app.json? I myself would not want to start including my dev/test files in my app config though... will give it a test to see if it gets us up and running as a temporary measure.

[markos-ag]

I was facing the same issue here, and what I did was comment out this lines from tsconfig.app.json and add **/*.stories.* in my includes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "**/*.stories.*" // <- added
  ],
  // "exclude": [
  //   "**/*.stories.*"
  // ]
}

after that I get this error:

then I solved adding allowSyntheticDefaultImports: true to my angularCompilerOptions, after that npm run storybook worked pretty well.
I hope I can help someone with this solution, and please let me know if this solution is not the best 😊

I have not tested this but is interesting, should the .storybook/tsconfig.json not overwrite tsconfig.app.json? I myself would not want to start including my dev/test files in my app config though... will give it a test to see if it gets us up and running as a temporary measure.

it does not by default but you can add an extra entry for storybook in your angular.json that specifies the tsconfig file you want it to use as such :

I hope it helps!

[meriturva]

@danielbater Thanks for the repo: https://github.com/danielbater/storybook-a13-issue/tree/inline-template , i'm testing right now and I have found the same issue regarding also our project, what about the files watch feature? I mean, no recompile is run when file changes. is it the same on your side?

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.10 containing PR #17131 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[KirillMetrik]

@shilman is it possible to push this fix to 6.4? According to Storybook roadmap, 6.5 is expected only in March, such a long wait... I think everyone would appreciate if we could enjoy this fix without upgrading to unstable alpha version.

[shilman]

@KirillMetrik absolutely. If somebody can verify the fix with the alpha, I'll patch it back to the stable release

[iursevla]

@shilman I'll test it now.

---

Tested JIT error and live-reload and everything seems to work 👌

[rosostolato]

@shilman I have just updated to version 6.5.0-alpha.10 but I'm still getting "is missing from the TypeScript compilation" errors. I've already tried to clean node_modules folder and reinstall packages, but nothing changes.

[shilman]

@rosostolato do you have a reproduction or any information you can share to help narrow it down?

[rosostolato]

@rosostolato do you have a reproduction or any information you can share to help narrow it down?

@shilman I'm trying to create a new repo to reproduce it. In the meatime, I can share the logs:

99% done plugins webpack-hot-middlewarewebpack built preview 34463d728a71ab4689d4 in 42641ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/Projects/apps/sabersimui/src/app/core/components/accordion/accordion.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/Projects/apps/sabersimui/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/Projects/apps/sabersimui/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
...

storybook main.js:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    'storybook-dark-mode',
    '@storybook/addon-knobs',
    '@storybook/addon-links',
    '@storybook/addon-backgrounds',
    '@storybook/addon-storysource',
    {
      name: '@storybook/addon-essentials',
      options: {
        controls: false,
      },
    },
  ],
  core: {
    builder: 'webpack5',
  },
};

tsconfig.json:

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": [
      "node",
      "@types/resize-observer-browser"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../src/**/*.worker.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

I'm running on node v12.21.0 (npm v6.14.11)

[rosostolato]

Simple step to reproduce with angular 13.1:

• ng new projectName
• npx sb@next init
• npm run storybook

@shilman I reproduced it on a brand new project and I got the same error. Just need to run these steps above. Tested on node v12.21.0 (npm v6.14.11)... I'm updating the node version and will try again.

---

No luck. Here is the new app log running on node v17.3.0 (npm v8.3.0)

info @storybook/angular v6.5.0-alpha.10
info
info => Loading presets
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:/home/rosostolato/testapp/.storybook/tsconfig.json"
WARN Your Storybook startup uses a solution that will not be supported in version 7.0.
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
info => Using angular project "testapp:build" for configuring Storybook
info => Using prebuilt manager
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
18% building 3/19 entries 1202/1264 dependencies 148/357 modules[BABEL] Note: The code generator has deoptimised the styling of /home/rosostolato/testapp/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
99% done plugins webpack-hot-middlewarewebpack built preview 57491abad7d79be2f9f8 in 19978ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/testapp/src/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/testapp/src/stories/Header.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/testapp/src/stories/Page.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.10 containing PR #17131 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[flo-02-mu]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.10 containing PR #17131 that references this issue. Upgrade today to the @latest NPM tag to try it out!

It looks like only #17131 is included but #17032 is missing so that build step already fails. Would it be possible to release that fix in 6.4.x as well?

[artaommahe]

@shilman @ThibaudAV

• just inited new angular app 13.1.2, storybook (6.4.12, via sb init). Got Error: /Users/drow/projects/tests/storybook-issues/src/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

• tried 6.5.0-alpha.16, got Error: node_modules/@storybook/api/dist/ts3.9/lib/stories.d.ts:1:8 - error TS1259: Module '"/Users/drow/projects/tests/storybook-issues/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag.

• added allowSyntheticDefaultImports to root tsconfig.json, worked fine.

• renamed preview.js to preview.ts (like in our reall apps) - got Error: /Users/drow/projects/tests/storybook-issues/.storybook/preview.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

• added ./*.ts to includes field of .storybook/tsconfig.json, got Error: .storybook/preview.ts:2:21 - error TS2732: Cannot find module '../documentation.json'. Consider using '--resolveJsonModule' to import module with '.json' extension..

• added resolveJsonModule to root tsconfig.json, got Error: .storybook/preview.ts:3:17 - error TS2345: Argument of type '{ pipes: never[]; interfaces: { name: string; id: string; file: string; deprecated: boolean; deprecationMessage: string; type: string; sourceCode: string; properties: never[]; indexSignatures: never[]; methods: never[]; }[]; ... 9 more ...; coverage: { ...; }; }' is not assignable to parameter of type 'CompodocJson'.

• mocked it with setCompodocJson(docJson as any);, worked fine

looks like too much broken stuff 😕

[gamov]

I don't really understand why this issue is closed.. It is still broken for us on Angular 13.1 and storybook version 6.4.12.

[jasonhodges]

I can confirm there are some of these issues still happening.
Angular 13.1
Storybook 6.4.13

Reproduction Repo

• run the storybook:ng script to utilize angular.json config
  • notice Errors during JIT compilation of template for AvatarListComponent: Opening tag "mat-list-item" not terminated when navigating to the Avatar List Default story.
  • notice Errors during JIT compilation of template for AvatarComponent: Opening tag "img" not terminated when navigating to the Avatar Default story.

Running the app via ng serve compiles and loads successfully.

[martijn19811]

Quick confirmation that these issues are still happening when using Angular 13.2.24 and Storybook 6.4.19. Both are the latest releases as of now. There's no storybook:build configuration present within angular.json. I was hoping this would be configured automatically, but alas,

[fasidOnGit]

try the following in .storybook/tsconfig.json. it helped me.

"include": ["../src/**/*.stories.ts"]

[martijn19811]

I did, but including the stories in the TSConfig caused other problems for me. At least, I assume they have to do with that step.

I'm currently implementing a lot of Angular custom form controls. The moment I change or touch an element in the preview iframe of Storybook, these errors keep popping up. So it's hard to see if the component actually works as intended.

[fasidOnGit]

well, now that's out of the way. you can work on fixing this... did they work OK before?. it would be great if you could share your strories source code here

[martijn19811]

Thanks Fasid! But I'm not sure if including the /stories/ directory inside tsconfig.json is the solution. I think it'll only generate more unnecessary type errors. But I'm just guessing at this point :). Here's the code of one of my stories

import { moduleMetadata } from '@storybook/angular';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Meta, Story } from '@storybook/angular/types-6-0';
import { CheckboxComponent } from '../projects/<redacted>/src/lib/form-controls/components/checkbox/checkbox.component';

export default {
  title: 'Form Controls/Checkbox',
  component: CheckboxComponent,
  decorators: [
    moduleMetadata({
      declarations: [CheckboxComponent],
      imports: [CommonModule, ReactiveFormsModule],
    }),
  ],
} as Meta<CheckboxComponent>;

const FormControlTemplate: Story<CheckboxComponent> = (
  args: CheckboxComponent
) => {
  const formGroup = new FormGroup({
    isAPatient: new FormControl(true),
  });

  return {
    template: `
      <form [formGroup]="formGroup">
        <pp-checkbox [formControlName]="formControlName" [label]="label"></pp-checkbox>
      </form>
    `,
    props: {
      ...args,
      formGroup,
      formControlName: 'isAPatient',
    },
  };
};

export const Default = FormControlTemplate.bind({});
Default.args = {};

export const WithLabel = FormControlTemplate.bind({});
WithLabel.args = {
  label: 'Is a patient'
};

Oh and Im not sure if they ever worked before :). I got these errors right from the start.

[fasidOnGit]

I'm not sure if including the /stories/ directory inside tsconfig.json is the solution.

Not just tsconfig.json. I mean to .storybook/tsconfig.json. there is a seperate one for just storybook.,

[martijn19811]

I know :). And that's the one I included the directory in. Not the root tsconfig.

[fasidOnGit]

here is my config. (i'm using Nx though).

"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "port": 4400,
            "config": {
              "configFolder": "apps/myapp/.storybook"
            },
            "projectBuildConfig": "myapp"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },
        "build-storybook": {
          "builder": "@nrwl/storybook:build",
          "options": {
            "uiFramework": "@storybook/angular",
            "outputPath": "target/storybook/myapp",
            "config": {
              "configFolder": "apps/myapp/.storybook"
            },
            "projectBuildConfig": "myapp",
            "stylePreprocessorOptions": {
              "includePaths": ["apps/myapp/src/app/styles", "libs/assets/src/lib"]
            }
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          },
          "outputs": ["{options.outputPath}"]
        },

// apps/myapp/.storybook/main.js
const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [...rootMain.stories, '../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [...rootMain.addons],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

// apps/myapp/.storybook/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts", "../**/*.test.ts"],
  "include": ["../src/**/*.stories.ts", "../src/polyfills.ts"]
}

// apps/myapp/.storybook/preview.js
import { addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';

addDecorator(withKnobs);

storybook versions

"@angular/animations": "13.2.4",
"@angular/cdk": "13.2.4",
"@angular/common": "13.2.4",
"@angular/compiler": "13.2.4",
"@angular/core": "13.2.4",
"@angular/flex-layout": "13.0.0-beta.38",
"@angular/forms": "13.2.4",
"@angular/material": "13.2.4",

...
...
..




"@nrwl/storybook": "13.8.3",
"@nrwl/workspace": "13.8.3",
"@storybook/addon-actions": "^6.5.0-alpha.42",
"@storybook/addon-essentials": "^6.5.0-alpha.42",
"@storybook/addon-knobs": "^6.4.0-next.0",
"@storybook/addon-links": "^6.5.0-alpha.42",
"@storybook/addon-notes": "^6.0.0-alpha.6",
"@storybook/addons": "^6.5.0-alpha.42",
"@storybook/angular": "^6.5.0-alpha.42",
"@storybook/builder-webpack5": "^6.5.0-alpha.42",
"@storybook/manager-webpack5": "^6.5.0-alpha.42",

[martijn19811]

Thanks! This is the contents of my angular.json. Please note that all my errors are Reactive Forms related though. But perhaps something can be improved here?

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "medicom": {
      "projectType": "library",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "changeDetection": "OnPush"
        }
      },
      "root": "projects/<lib>",
      "sourceRoot": "projects/<lib>/src",
      "prefix": "pp",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/<lib>/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/<lib>/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/<lib>/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "projects/<lib>/tsconfig.spec.json"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "projects/<lib>/**/*.ts",
              "projects/<lib>/**/*.html"
            ]
          }
        },
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "browserTarget": "<lib>:build",
            "port": 6006
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "browserTarget": "<lib>:build",
            "quiet": true
          }
        }
      }
    },
    "storybook": {
      "projectType": "application",
      "root": ".storybook",
      "sourceRoot": ".storybook",
      "prefix": "",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/storybook",
            "tsConfig": ".storybook/tsconfig.json",
            "assets": [],
            "styles": ["node_modules/bootstrap/scss/bootstrap.scss"],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "<lib>",
  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }
}

[fasidOnGit]

do a version bump of storybook-related packages to 6.5.0-alpha.42 and then try again. with my configuration in mind

[martijn19811]

Thanks. I'd need more info on the rest of your angular.json file though. And how much it differs from mine.

[martijn19811]

Also, I think my problem has more to do with the way including the Reactive Forms module causes more type errors in the Storybook preview iframe. I'm not sure how to tackle that.

[martijn19811]

@fasidOnGit Hi Fasid, thanks for thinking along! I found the cause and it is.. quite random. Please check this comment: #14627 (comment) .

Turns out the spread operator used to insert the agrs was the cause of all the issues. I had to rewrite code like this:

    props: {
      **colors: args.colors,**
      formGroup,
      formControlName: 'isAPatient',
    },

It is a very random solution and I'm quite surprised the spread operator can't be used this way.

[oskrabella]

Re: JIT compilation errors -- it appears as though new lines within a template tag are causing the template to be parsed incorrectly by the Angular compiler. When the file template is compiled into the metadata for the Component, it is escaping the newlines, for example:

The parser then interprets the tag as <my-component\n\t instead of stripping the whitespace which leads to the "Opening tag not terminated" JIT error.

Since this is only happening for Storybook (dev and production builds compile and execute just fine), I'm leaning toward something in the Storybook setup may not be configured properly. That said, I'm also not sure if this is a problem that Angular parser itself should handle.

@nzacca
Hello, I've been facing this exact issue for several days now with none of my stories rendering as a result of the compiler escaping new lines.

None of the solutions in this thread have worked for me. Is there any package update or solution available to resolve this?

Here are my package.json and storybook/main.js for reference:

package.json-
{
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "npm run ci-build && build-storybook -o ./app-engine/dist",
"build-stencil": "lerna run ci-build --scope @wm-wd-ui/web-components",
"ng": "ng",
"lerna": "lerna",
"build": "lerna run build",
"test": "lerna run test",
"lint": "lerna run lint",
"clean": "lerna clean --yes && lerna exec rm -- -rf dist",
"ci-install-root": "npm ci --ignore-scripts && lerna exec npm ci -- --ignore-scripts",
"ci-setup": "lerna bootstrap --ignore-scripts",
"ci-build": "lerna run ci-build --concurrency 1",
"ci-test": "lerna run ci-test --concurrency 1",
"ci-lint": "lerna run ci-lint",
"ci-delta-build": "lerna run ci-build --since origin/master",
"ci-delta-test": "lerna run ci-test --since origin/master --concurrency 1",
"ci-delta-lint": "lerna run ci-lint --since origin/master"
},
"private": true,
"dependencies": {
"@ag-grid-community/core": "^23.2.1",
"@angular/animations": "12.2.17",
"@angular/cdk": "^12.2.13",
"@angular/common": "12.2.17",
"@angular/compiler": "12.2.17",
"@angular/core": "12.2.17",
"@angular/forms": "12.2.17",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "12.2.17",
"@angular/platform-browser-dynamic": "12.2.17",
"@angular/router": "12.2.17",
"@storybook/builder-webpack5": "^6.2.0-beta.7",
"@storybook/preset-html-webpack": "^7.0.0-alpha.0",
"rxjs": "~6.5.5",
"sass": "^1.54.4",
"style-loader": "^3.2.1",
"tslib": "^2.0.0",
"zone.js": "~0.11.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.18",
"@angular/cli": "12.2.18",
"@angular/compiler-cli": "12.2.17",
"@angular/language-service": "12.2.17",
"@commitlint/cli": "^11.0.0",
"@storybook/addon-actions": "~6.4.22",
"@storybook/addon-backgrounds": "~6.4.22",
"@storybook/addon-controls": "~6.4.22",
"@storybook/addon-docs": "~6.4.22",
"@storybook/addon-links": "~6.4.22",
"@storybook/addon-notes": "~5.3.21",
"@storybook/addon-viewport": "~6.4.22",
"@storybook/angular": "6.4.22",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/preset-scss": "~1.0.3",
"@storybook/theming": "^6.1.21",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"@wm-cdk/tslint-rules": "^2.0.1",
"@wm-wd-cdk/ci-scripts": "^1.3.5",
"@wm-wd-cdk/commit-cli": "^1.0.5",
"@wm/cz-git-commit-tool": "^2.0.2",
"codelyzer": "^6.0.0",
"commitizen": "^4.2.3",
"css-loader": "^5.2.0",
"husky": "^5.2.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lerna": "^4.0.0",
"ng-packagr": "^12.2.7",
"sass-loader": "^11.0.1",
"stylelint": "^13.12.0",
"stylelint-config-sass-guidelines": "^8.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.19.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "4.2.4",
"webpack": "^5.75.0"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"config": {
"commitizen": {
"path": "@wm/cz-git-commit-tool"
}
},
"resolutions": {
"@storybook/angular/webpack": "^5"
}
}

Main.js
module.exports = {
framework: '@storybook/angular',
core: {
builder: 'webpack5'
},
stories: [
'../sandboxes/storybook/src/app/docs/intro.stories.mdx',
'../sandboxes/storybook/src/app/docs//*.stories.@(mdx)',
'../sandboxes/storybook/src/app/cdk//.stories.@(mdx)',
'../sandboxes/storybook/**/.stories.@(mdx)',
'../sandboxes/storybook/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-backgrounds',
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-viewport',
'@storybook/preset-scss',
'@storybook/preset-html-webpack'
],
staticDirs: ['./public']
};

Any help would be appreciated