storybook: angular 13.1 stories file missing from the TypeScript compilation

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.

1.JIT compilation error for any story that uses a component that doesn’t have an inline template but an html file

For this problem I think I have found. If someone else can test it and confirm 🙏 If I delete this config https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/framework-preset-angular.ts#L32-L36 inside of framework-preset-angular.js (you can do this by modifying your note_modules) it seems to work 🤞 I think that all (or part of) this file has nothing to do in the versions of angular >12 ngx-template-loader , sass , … should come from what we use of angular-cli. It was the old solution used at the beginning of storybook and angular <9 before ivy and angular-cli stuff

@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 😕

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.

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.

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.

In my environment, changing config for AngularWebpackPlugin solved “missing from the TypeScript compilation” problem. But as others say, 2 problems persist.

1.JIT compilation error for any story that uses a component that doesn’t have an inline template but an html file 2.No live reloading when making changes

.storybook/main.js

const ngTools = require("@ngtools/webpack");
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/angular",
  core: {
    builder: "webpack5",
  },
  webpackFinal: async (config, { _configType }) => {
    config.plugins.forEach((plugin, index) => {
      if (plugin instanceof ngTools.AngularWebpackPlugin) {
        config.plugins[index] = new ngTools.AngularWebpackPlugin({
          ...plugin.pluginOptions,
          tsconfig: path.resolve(__dirname, "tsconfig.json"),
        });
      }
    });
    return config;
  },
};

.storybook/tsconfig.json

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": ["node"],
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": ["../src/**/*", "../projects/**/*"],
  "files": ["./typings.d.ts"]
}

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.

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:

Given this template:

<my-component
  foo="bar"
>
  foo
</my-component>

Which is then turned into:

// Template metadata
{
  template: "export default \"<my-component\\n\\tfoo=\\\"bar\\\"\\n>\\n\\tfoo\\n</my-component>\";"
}

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.

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!

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

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 https://github.com/storybookjs/storybook/pull/17032 is missing so that build step already fails. Would it be possible to release that fix in 6.4.x as well?

@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.

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 https://github.com/storybookjs/storybook/issues/17039#issuecomment-997384830 doesn’t solve the issue.

In my project we have two issues mentioned here:

1. JIT compilation error for any story that uses a component that doesn’t have an inline template but an html file
2. No live reloading when making changes

So I can confirm that the issue you mention @meriturva also happens on my project

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.

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.

haha,

Because I begin to know well the depths of storybook with angular and its weaknesses :p. I had already spotted the inconsistency of this config file and its possible conflict of configuration, that now is a fact.

I will prepare a PR to fix this soon

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: https://github.com/storybookjs/storybook/issues/17039#issuecomment-998216969

@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.

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

aaaand for this :

2.No live reloading when making changes

we now need to add this option watch:true, here : https://github.com/storybookjs/storybook/blob/854e37482beb3db9ddff346d995a58017b57a502/app/angular/src/server/angular-cli-webpack-13.x.x.js#L32

same if some people can confirm that it works for them 🙏 🙇

but if it is well that, it should be add this option only in serve mode and not in build mode, I think

@ankor-at-ccmath just see here https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#64-angular-changes (on our projects we don’t use any inline template, just external HTML files).

Can we please have some more info on that so that we can solve the JIT issue as well?

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 😊

This solution worked for mw

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!

@fasidOnGit Hi Fasid, thanks for thinking along! I found the cause and it is… quite random. Please check this comment: https://github.com/storybookjs/storybook/issues/14627#issuecomment-821291541 .

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.

I know 😃. And that’s the one I included the directory in. Not the root tsconfig.

@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.

@ThibaudAV

same if some people can confirm that it works for them 🙏 🙇

can confirm it does work for me 👌

@ThibaudAV holly sh**. I can CONFIRM that it works flawlessly.

Two days trying to figure out the root cause. How did you find out?

---

So, for the time being I used @ThibaudAV 's solution by updating ./storybook/main.js, instead of updating .../server/framework-preset-angular.js.

See webpackFinal property:

module.exports = {
  stories: ['../projects/keb-fe-lib/src/**/*.stories.mdx'],
  addons: [
   ...
  ],
  core: { builder: 'webpack5', },
  staticDirs: ['../.sb-static', '../projects/keb-fe-lib/src'],
  // https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config
  webpackFinal: async (config, { configType }) => {
    // Remove the html raw-loader (SEE: https://github.com/storybookjs/storybook/issues/17039#issuecomment-1005054445)
    const idx = config.module.rules.findIndex((rule) => rule.test.source === '\\.html$');
    config.module.rules.splice(idx, 1);

    // Return the altered config
    return config;
  },
};

It is quite simple:

main.js :

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../projects/**/*.stories.mdx',
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-controls'
  ],
  core: {
    builder: 'webpack5'
  },
  staticDirs: ['./public']
}

On our side, we have moved all storybook compilations settings to a separate project on our angular.json and we have no more problem with templates. The only one present is live reloading no more working.

I think that the tsconfig.json file in .stories folder is not respected. It only works for me when I make the changes in the tsconfig.app.json.

Hitting the JIT error too on 6.5.0-alpha.5. Is there any known workaround at the time?

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 😊