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

[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 :blush:

[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?

[ankor-at-ccmath]

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

[danielbater]

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

@meriturva Yes that is what I mean, and I beleive others (1 and 2)

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

@ankor-at-ccmath I think the main (or third issue in your list) is that after updating to Angular 13 typescript compilation stops working

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.

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

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!

@markos-ag thanks for this, so this is where I am with this, updating angular on a working storybook/angular 12 project left me with this: (same as @literalpie first post)

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

I have updated angular.json to point to correct .storybook/tsconfig.json => "tsConfig": ".storybook/tsconfig.json" and have updated the file to include story files and not exclude them:

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

This then has the 2 issues @ankor-at-ccmath points out lack of watch/reload and JIT issues for components with templates not inline (so all of them for us atleast)

Interestingly npm run storybook continues to have the original issue of missing files, where ng run projectName:storybook does not... I have always used npm run storybook upto this point, in fact storybook config was absent from my angular.json

[nagashimam]

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"]
}

[nzacca]

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.

[Komalbandi]

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

[qortex]

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

[Darrenbydesign]

OMG, I got it to work! Here's what I did differently than the above approaches: I kept the .storybook tsconfig.json and changed the includes accordingly:

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

After that, I went into the tsconfig.app.json and removed the stories files from the exclude (not sure this is good practice but it's progress). I also included the approach of adding the stories to the include section of the tsconfig.app.json —which I think was @danielbater 's idea

See below:

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

I hope that helps someone ... been struggling with just building this for days

EDIT

I was able to get storybook to build with this but then the angular app was broken. I had to re-exclude the "**/*.stories.*" line in order to get that build working so... I am back to square one 😞

[SebastianStehle]

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.

[meriturva]

still issue:

• No live reloading when making changes

anyone has found a workaround? we have to move to angular 13 as soon as possible on our project and it is the only issue still open! Thanks to all.

[ankor-at-ccmath]

Hi @meriturva. I don't think it's the only issue. The JIT compilation error of the html templates is still there as well and it's quite important.

[meriturva]

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.

[ankor-at-ccmath]

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

[meriturva]

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

[ankor-at-ccmath]

@meriturva Thanks! This is quite helpful!

[iursevla]

@ankor-at-ccmath were you able to make it work?

@meriturva can you share your main.js configuration?

[meriturva]

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']
}

[iursevla]

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']
}

I have pretty much the same configuration except that I pass some specific options to addon-docs and addon-essentials

addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
    {
      name: '@storybook/addon-essentials',
      options: {
        actions: false,
      },
    },
  ],

What version of storybook do you have?

I have the following

@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
ng-packagr                      13.1.2
rxjs                            6.6.7
typescript                      4.5.4

@storybook/addon-docs 6.5.0-alpha.6,
@storybook/addon-essentials 6.5.0-alpha.6,
@storybook/angular 6.5.0-alpha.6
@storybook/builder-webpack5    6.5.0-alpha.6
    "@storybook/manager-webpack5": "6.5.0-alpha.6",

If I change all templateUrl to template it works just fine

[ThibaudAV]

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

[iursevla]

@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;
  },
};

[ThibaudAV]

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

[ThibaudAV]

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

[iursevla]

@ThibaudAV

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

can confirm it does work for me 👌

[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 👌