Angular 12 Support #14909
Comments
|
When I run |
|
Here's what I did:
And here are the errors I received: https://gist.github.com/bebraw/c36e1d0c6067e9409346928630e0e58c . Examples: I wonder if something has changed since @shilman's go at it. It's possible the builder was updated for example and how there are new problems to solve. |
|
Thanks @bebraw. I'm not sure what's different between your setup and mine. I followed your steps (with a npx sb@next repro angular-repro -t angular
cd angular-repro
npx sb@next init --builder webpack5 --force
# add missing dependencies
yarn add -D @angular/elements @webcomponents/custom-elementsThen I manually added this to module.exports = {
// stories, addons, etc...
webpackFinal: async (config) => {
if (!config.resolve.fallback) {
config.resolve.fallback = {};
}
config.resolve.fallback.crypto = false;
return config;
},
};And it's working! 🎉 What I think needs to happen:
I'm not sure this will handle all the cases, but at least it handles one. @ThibaudAV @bebraw @ndelangen WDYT? |
|
@shilman It makes sense to me that the webpack 5 builder owns the related configuration customization. Also it sounds reasonable the missing dependencies are added at CLI init so the users don't have to add them manually as it's confusing to fix otherwise. |
|
@bebraw Yeah I think those are optional dependencies but the behavior changed in yarn 2. Thanks for taking a look at this!! 🙏 |
|
arf
|
|
i juste read this So if we change this line with : it works perfectly again 😀 (tested with an edit in cjs quickly) |
|
The fix discussed above works in my minimal reproduction repo, but I am still getting an error with sass-loader when the manager is built/run in our real-world usage of storybook. edit: this was caused by us using this to load styles in the manager: Unfortunately, we are still having other issues |
|
That looks like a webpack 4/5 compatibility issue at the loader level. Can you verify the loader version and check webpack version as well? After doing this, compare esp. the loader version to the most recent one available.
… On 13. May 2021, at 19.54, Benjamin Kindle ***@***.***> wrote:
The fix discussed above works in my minimal reproduction repo, but I am still getting an error with sass-loader when the manager is built/run in our real-world usage of storybook.
I'm still trying to narrow down the exact cause
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
|
Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.27 containing PR #14928 that references this issue. Upgrade today to the Closing this issue. Please re-open if you think there's still more to do. |
|
Hi @shilman! Thank you for 6.3.0-alpha.27 release. Unfortunately, it did not help me to fix my error. It tried both upgrade and setup from the beginning. The same error: Any idea what can be wrong? I use the most recent angular 12 without custom webpack configs. |
|
Can you please create a reproduction with |
|
@shilman I have the exact same error after using
|
|
Did you read the MIGRATION instructions? https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-12-upgrade |
|
I did not read that. Still I get the same error :/ |
I've tried this and it works fine. I will try to find the difference between this newly generated project and our Angular v11 upgraded to Angular v12. At first glance the difference in the console output is this: -info => Using angular project "my-project" for configuring Storybook
-ERR! => Could not get angular cli webpack config
+info => Using angular-cli webpack config
+info => Using default Webpack5 setupFor some reason, this |
|
@ThibaudAV does this mean anything to you? ☝️ |
|
@eugene-stativka are you using |
no. Just official @angular/cli |
|
@bryanrideshark can you install Webpack 5.36.2 in your project? Then angular will use it and storybook should also use it? (Also FYI all your |
|
For me works in Angular 12 with following yarn Where And following Storybook version: |
|
I am getting the following error using Storybook 6.3.0-beta.15 and an Angular library project with Angular version 12.0.3 |
|
@shilman , I had tried that and it didn't seem to work. I am using All of my I see were are now at Storybook 6.3.0-beta.15 or higher - I will re-attempt later this week and report back if I still get problems. |
|
We're on Angular 12. I tried all of the above. Initially it was the mimetype error mentioned above. Now were getting the following: Removing Produces the mimetype error I tried the latest and beta versions of SB libs |
|
@mdeberryfadv It looks like storybook can't read the configuration in |
|
Yes. We are using Nx too btw. |
|
My default project was a library with a builder of @angular-devkit/build-angular:ng-packagr. I didn't have an application in the project, but adding one and making it the default seems to have resolved the issue. Has storybook always required an application? |
|
Along with adding the following to main.js: This fixed my issue: |
I think it can work without it. but storybook is not tested nor designed for projects with only one library. For the moment |
|
@ThibaudAV but wouldn't a Design System (we use it like that as well) be a perfect example for using SB without an app but only a library? |
|
If you point me in the right direction I am willing to fix the library problem. Until now (before 6.3) library approach has worked fine. |
|
@activenode you say that since 2.3 it does not work anymore? I plan to work on it and to do the necessary tests so that this use case is really integrated.
we can talk about it on discord ;) |
|
@ThibaudAV there seems to be some flakyness involved in the process. I followed the steps above and used Then, after serving storybook (not "build"ing it but only serving it) it would stop at 99% and show an empty page not being able to fetch the assets (js, css). So I also followed what @vdiaz1130 said and at that point it seemed to work again. Then after deleting the app again and trying another time it also worked. Pretty much flaky. So what seems to work "out of the box" is to simply remove node_modules and do fresh Could it be related to |
Exactly the same for me. It would be great if we didn't need a default (dummy) application to make this work. |
|
@dominicjameskelly I recently tested it and it seems to work on a configuration like : {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"pattern-lib": {
"projectType": "library",
...
},
"root": "projects/pattern-lib",
"sourceRoot": "projects/pattern-lib/src",
"prefix": "pl",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/pattern-lib/tsconfig.lib.json",
"project": "projects/pattern-lib/ng-package.json"
},
"configurations": {...}
},
"test": {...},
"lint": {...}
}
}
}
},
"defaultProject": "pattern-lib"
}
the important points are :
but it would be nice to have examples of simple projects where it doesn't work in order to progress on this feature with real use case :) |
|
@ThibaudAV, I don't have a project to share, but I have confirmed that the issue I was having was caused by the tsConfig property not being set in options. |
|
@mdeberryfadv Do you use one instance of storybook per library? |
|
@ThibaudAV The current setup is one per library |
|
@mdeberryfadv I recommend you to watch this https://gist.github.com/ThibaudAV/b5a9f993b01c3d3bbdf01c0fd8f3c73f it's brand new (some adjustments are in progress #15194) if I am not mistaken |
|
Hi All, It seems like Angular12 is working successfully for a lot of people, so I'm going to close this issue. If you're experiencing any problems with Angular12 compatibility, please:
Thanks and happy hacking! 🚀 |
|
Anyone having issues after upgrading an existing project to Angular 12 - you may have missed the storybook migration guide: |
This also fix my issue, I would like to add more information about it Source: https://www.npmjs.com/package/@storybook/builder-webpack5 |
|
I read all the docs and all of the posts here. |
|
@YonathanB what problems are you seeing? |
and others
Describe
Angular 12 was released a few hours ago, release post, and it looks like Storybook isn't working with it out of the box for now.
When running
yarn storybook, it throws the following error:To Reproduce
To bootstrap a fresh Angular 12 + Storybook 6.3 alpha just run
npx sb@next repro ./a_directory --framework angular --template angularSystem
Additional context
Maybe also related to #14044 (comment)?
The text was updated successfully, but these errors were encountered: