storybook: Storybook 6.4 build failing with Angular 13.1

All, thanks for your patience sorting this out. The plan is to get things working in 6.5 and then patch back the final solution to 6.4 once it’s all debugged. In the future we’ll try to get a CI setup that tests prerelease versions of Angular (and the other frameworks we support) so that we catch these earlier and not during the middle of Christmas vacation.

Same here. The problem is that in angular 13.1 the function getTypescriptWorkerPlugin changed names to getDevServerConfig

I was able to get it running by replacing all occurances of getTypescriptWorkerPlugin in the file

node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js

or in the original repo https://github.com/storybookjs/storybook/blob/585abdd45c492a69a4e61f11fa9019cd95b94599/app/angular/src/server/angular-cli-webpack-13.x.x.js#L8

Any chance to provide this as a hotfix instead of the next 6.5.x release cycle? When using 6.5.0-alpha.4 I also experience the same issue as @DonnyVerduijn

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.4 containing PR #17032 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.

This doesn’t seem to be the only issue. I’m also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/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/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn’t find anything related, so i assume this problem has not existed before?

Also experience the same issue.

Same here!

This doesn’t seem to be the only issue. I’m also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/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/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn’t find anything related, so i assume this problem has not existed before?

This doesn’t seem to be the only issue. I’m also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/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/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn’t find anything related, so i assume this problem has not existed before?

The same here

This doesn’t seem to be the only issue. I’m also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/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/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn’t find anything related, so i assume this problem has not existed before?

Also experience the same issue.

Same here!

Same here

This doesn’t seem to be the only issue. I’m also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/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/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn’t find anything related, so i assume this problem has not existed before?

Also experience the same issue.

But it did not work with alpha for me yet. Jit compiler complained that it could not have parsed component templates correctly.

Same here - after fixing getTypescriptWorkerPlugin problem (by upgrading to 6.5.0-alpha4) Storybook iframe.html now throws “Errors during JIT compilation of template for <component_name>: Unexpected character “EOF”” on all of my stories (worked fine on 6.3.0). @rfprod did you manage to fix this? Going back to 6.3.0 is not an option for me, since we’re using NX with Angular and are trying to upgrade the whole environment to Angular 13 using Nrwl tools.

@shilman Unfortunately still an issue please consider re-opening. More comments of mine can be found here.

Just simple reproduction with version 6.4.12:

• ng new testProject
• npx sb init
• npm run storybook

Errors:

ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: D:\Projects\daButtare\test6412\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 D:\Projects\daButtare\test6412\node_modules\@ngtools\webpack\src\ivy\loader.js:60:26
    at processResult (D:\Projects\daButtare\test6412\node_modules\webpack\lib\NormalModule.js:751:19)
    at D:\Projects\daButtare\test6412\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\Projects\daButtare\test6412\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\Projects\daButtare\test6412\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\Projects\daButtare\test6412\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\Projects\daButtare\test6412\node_modules\@ngtools\webpack\src\ivy\loader.js:60:17

@mleimer I’d be happy to patch back a fix once things have stabilized

@shilman unfortunately I’m still seeing the The 'compilation' argument must be an instance of Compilation issue running alpha.15 locally, are there any specific steps I can take to remedy that?

Now with version 6.5.0-alpha.12: A lot of errors log:

File was processed with these loaders:
 * ../../../node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
| // The list of file replacements can be found in `angular.json`.
|
> export const environment: {
|     production: boolean;
| } = {
    at handleParseError (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:969:19)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:793:11)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\PROJ\service-front\service-front\node_modules\babel-loader\lib\index.js:59:71
ModuleParseError: Module parse failed: Unexpected token (2:37)
File was processed with these loaders:
 * ../../../node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
|
> export const MULTILANGUAGE_README = (): any => {
|     try {
|         return require('@abanking/base-multi-language/common/README.md');
    at handleParseError (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:969:19)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:793:11)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\PROJ\service-front\service-front\node_modules\babel-loader\lib\index.js:59:71

I’m just updating here results after moving to version 6.5.0-alpha.10:

with version 6.5.0-alpha.7 and the new angular.json project approach described here https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#64-angular-changes :

• everithing compile correctly
• no live reload/watch enabled

Now with version 6.5.0-alpha.10:

• A lot of errors log:

ModuleParseError: Module parse failed: Unexpected character '@' (3:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
| import { NgModule } from '@angular/core';
| 
> @NgModule({})
| export class BinaryResourcesModule {}
| 
    at handleParseError (xxx\node_modules\webpack\lib\NormalModule.js:969:19)
    at xxx\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (xxx\node_modules\webpack\lib\NormalModule.js:793:11)
    at xxx\node_modules\webpack\lib\NormalModule.js:853:5
    at xxx\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (xxx\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (xxx\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at xxx\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (xxx\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at xxx\node_modules\babel-loader\lib\index.js:59:71

EDIT: same errors with version 6.5.0-alpha.12.

@shilman I updated to the 6.5.0-alpha.4 version and now I have another issue now that has already been reported a while ago (https://github.com/storybookjs/storybook/issues/14734)

Do you know what could cause that issue? I have a standard configuration with only one addon: @storybook/addon-essentials Also I am using @nrwl/storybook to serve/build. It was running well before upgrading to angular 13.1 (with angular 13.0.1).

Thanks for the help there!

Starting type checking service...
/Users/vincent/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141
                        throw new TypeError(
         ^
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/vincent/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/vincent/frontend/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /Users/vincent/frontend/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
    at Hook.eval (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:297:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1055:26)
    at /Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.13 containing PR #17206 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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

@shilman we are also getting the error TypeError: The 'compilation' argument must be an instance of Compilation just like @spaceribs

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.15 containing PR #17206 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.

Still see UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation error in storybook: 6.5.0-alpha.23. jest: 27.4.7. angular: 13.1.1.

after stepping away for a week, I can now say that this issue can be resolved by performing the following:

1. Run npm ls webpack
2. Find the version of webpack for @angular-devkit/build-angular
3. npm install that exact version to your dev dependencies
4. run npm dedupe

that should ensure that only one version of webpack@5 is installed and used across all dependencies, you can verify that by rerunning npm ls webpack For example:

├─┬ @angular-devkit/build-angular@13.1.2
│ └── webpack@5.65.0  deduped
├─┬ @nrwl/node@13.4.1
│ └── webpack@5.65.0  deduped
├─┬ @storybook/addon-controls@6.5.0-alpha.23
│ └─┬ @storybook/core-common@6.5.0-alpha.23
│   └── webpack@4.46.0 
├─┬ @storybook/addon-docs@6.5.0-alpha.23
│ ├─┬ @storybook/builder-webpack4@6.5.0-alpha.23
│ │ └── UNMET PEER DEPENDENCY webpack@4.46.0 
│ └─┬ @storybook/core@6.5.0-alpha.23
│   └─┬ @storybook/core-server@6.5.0-alpha.23
│     ├─┬ @storybook/manager-webpack4@6.5.0-alpha.23
│     │ └── webpack@4.46.0 
│     └── webpack@4.46.0 
├─┬ UNMET PEER DEPENDENCY @storybook/angular@6.5.0-alpha.23
│ └── webpack@4.46.0 
├─┬ @storybook/builder-webpack5@6.5.0-alpha.23
│ └── webpack@5.65.0  deduped
├─┬ @storybook/manager-webpack5@6.5.0-alpha.23
│ └── webpack@5.65.0  deduped
└── webpack@5.65.0

you’re looking to make sure every instance is deduped

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.12 containing PR #17032 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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

@shilman Updating to 6.5.0-alpha7 and using @SebastianPodgajny code did eventually do the trick. But for whatever reason I also had to fix my tsconfig, because it was complaining about not being able to find polyfill.ts and hotreload is broken. So I would still much rather have a fix in 6.4 😕

@rfprod You need to remove html raw-loader rule in webpack config

@SebastianPodgajny perfect, it works. Thank you very much for saving some time for me.

Same here - after fixing getTypescriptWorkerPlugin problem (by upgrading to 6.5.0-alpha4) Storybook iframe.html now throws “Errors during JIT compilation of template for <component_name>: Unexpected character “EOF”” on all of my stories (worked fine on 6.3.0). @rfprod did you manage to fix this? Going back to 6.3.0 is not an option for me, since we’re using NX with Angular and are trying to upgrade the whole environment to Angular 13 using Nrwl tools.

@KirillMetrik check this

• https://github.com/rfprod/nx-ng-starter/blob/main/.storybook/main.js#L42-L59 - webpack config tweak
• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1192-L1207 - build storybook
• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1232-L1247 - serve storybook
• https://nx-ng-starter-documentation.web.app/assets/storybook/index.html - deployed storybook

We got the same error ERR! why storybook is so hard to use.

is there a separate issue # for the problems with HMR experienced by a few folks?

hot reload problem still exist.

We got the same error ERR! TypeError: getTypescriptWorkerPlugin is not a function after updating Angular 13.1.1 and Storybook 6.4.9.

Also having problems when updating to alpha:

Please make sure it is in your tsconfig via the 'files' or 'include' property.

I managed to fix this by modifying some build config but then I had an whole load of other runtime template issues. I’d comment out stuff only to find more and more problems.

@unnhao @fasidOnGit @stefan-schweiger

Solution for the missing polyfill.ts file in Nx workspaces:

For buildable projects

That means: for apps, buildable libs, projects that have the build target in their architect or targets in angular.json or project.json Run you app like this:

nx storybook <YOUR-PROJECT-NAME> --projectBuildConfig=<YOUR-PROJECT-NAME>

For non-buildable projects

For non buildable projects, projects that do NOT have the build target in their architect or targets in angular.json or project.json

Run your app like this:

nx storybook <YOUR-PROJECT-NAME> --projectBuildConfig=<YOUR-PROJECT-NAME>:build-storybook

Notice how here we are explicitly passing the build-storybook target!

---

Let me know if this works for you. We’ll implement this logic inside the executor, but for now, it’s an easy workaround with absolutely NO extra code needed.

(Referencing this here too)

Also, there’s a PR under way for better logging and this PR to use the current project’s build configuration.

Okay, thanks a lot. This partial config is my angular.json. and it’s for a library. I don’t know where can i set watch mode.

the watch mode needs to be set in the maine angular app option rather than the library option

  "test-app": {
  	"projectType": "application",
  	...
  	"architect": {
  		"build": {
  			"builder": "@angular-devkit/build-angular:browser",
  			"configurations": {
  				...
  				"storybook": {
  					"watch": true
  				}
  			},
  		},
  	}
  }

and in the storybook option in the library config, the project build config needs to be added

  	"storybook": {
      "builder": "@nrwl/storybook:storybook",
      "options": {
  		...
        "projectBuildConfig": "test-app:build:storybook"
      },
    },

Haha, I try to change projectBuildConfig to "projectsBuildConfig": "client-ui:build-storybook" and it work. but I don’t know what I do ether it’s right or not. thanks.

for the polyfills.ts. I had to add it (the polyfills.ts file) to the files array in tsconfig under .storybook

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

files or includes both works 👍

@qortex my solution was to add "../../../../../apps/<default-app>/src/*.ts", to the includes of the storybook tsconfig file.

@rfprod You need to remove html raw-loader rule in webpack config

Stories should be added to the storybook tsconfig. For example:

• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1192-L1206
• https://github.com/rfprod/nx-ng-starter/blob/main/apps/documentation/.storybook/tsconfig.json

But it did not work with alpha for me yet. Jit compiler complained that it could not have parsed component templates correctly.

New docs for styles and stylePreprocessorOptions

@spaceribs there is an issue I opened and have a work around for: https://github.com/nrwl/nx/issues/8484#issuecomment-1012664860

@joewIST I would suggest not to use caret ^ and tilde ~ in your package.json at all.

Give it a try in conjunction with the webpack resolution solution.

Remove ^ and ~ from you package.json. Then add the webpack resolution to your package.json. Then execute from the project root

rm -rf node_modules/ yarn.lock && yarn install # if you use yarn
# or
rm -rf node_modules/ package-lock.json && npm i # if you use npm

Here’s what ^ and ~ do

In the simplest terms, the tilde matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0.

The caret, on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.xrelease including 1.3.0, but will hold off on 2.0.0.

Info source: https://indianceo.medium.com/caret-and-tilde-in-package-json-57f1cbbe347b

If you remove all ^ and ~ from your package.json, the workspace behavior will be more predictable, and it will be easier to debug it.

Also, doing something like this

"@angular-devkit/build-angular": "13.1.3",
"@angular-devkit/core": "^13.1.3",

seems incorrect to me. You tell npm to use fixed version of @angular-devkit/build-angular, but the most recent major version of @angular-devkit/core.

Check the semver parser for more details about referencing versions in package.json.

const semver = require('semver')

semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean('  =v1.2.3   ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
semver.minVersion('>=1.0.0') // '1.0.0'
semver.valid(semver.coerce('v2')) // '2.0.0'
semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

@mandarini yes i’ve already tried that, and besides i have the projectBuildConfig defined in my angular.json

@joewIST did you try this, too?

hot reload also does not work. So I’m still hestiant to update my project to Angular 13.1.

this fix is for nx, but it should have some similarities, watch mode needs to be enabled in the build configuration in angular.json

		"build": {
		  ...
          "configurations": {
            ...
            "storybook": {
              "watch": true
            }
          },
          ...
        },
		"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            ...
            "projectBuildConfig": "ppyarns-store:build:storybook"
          }
        },

on the contrary, as of alpha 12, I haven’t had any issue, if anything, the workaround for removing the html loader in the webpack config under angular + nx isn’t needed anymore

@rfprod well I already had that config 😉 but without the resolutions for webpack it will give me the error about “TypeError: The ‘compilation’ argument must be an instance of Compilation”.

Thanks anyway!

@stefan-schweiger Cool. that fixed it. But, the live reloading is gone.