Chore: (Docs) Updates to the Angular documentation #17387

jonniebigodes · 2022-02-01T22:31:46Z

With this pull request the documentation is updated to feature the Angular Storybook custom builder. Follows up on #17380 and #17305 .

What was done:

Updated the get-started/Install section of the documentation and subsequent snippets to include a custom builder.
Updated the Configure/Styling and CSS docs to mention the updated version of using CSS with Storybook's builder.
Updated the Sharing/Publish documentation to feature the angular builder also.

@shilman and @storybookjs/angular would appreciate some feedback on this when you're able. Thanks in advance.

nx-cloud · 2022-02-01T22:31:49Z

☁️ Nx Cloud Report

CI ran the following commands for commit e7d1401. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 1 target

nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

Sent with 💌 from NxCloud.

shilman

Looking good! Misc comments, nothing serious

shilman · 2022-02-02T06:29:46Z

docs/configure/styling-and-css.md

@@ -28,6 +28,37 @@ If your component files import their CSS, Storybook’s webpack config will work

 <!-- prettier-ignore-end -->

+- With Angular version 13 and above, you should use a builder configuration to import your CSS:


Do you want these to be bullets? Also do you want to make this content only visible on the angular version of the docs?

Indeed you're correct. I've updated this section and used a similar approach as it's being used in the Get Started section with my latest commit, this way the Angular documentation will only be visible once the reader makes the switch. Let me know of any additional feedback.

shilman · 2022-02-02T06:31:42Z

docs/get-started/installation-command-section/angular.mdx

+- Update your `angular.json` file to include Storybook's custom builder:
+
+```json
+{


This should be placed at the right point in the angular.json file, either underneath the default project OR in its own project. I'm waiting for @storybookjs/angular , esp @kroeder, to get back to me with best practices here

Thank you for letting me know. Once this is addressed, follow up with me and I'll adjust accordingly.

shilman · 2022-02-02T06:32:27Z

docs/get-started/installation-problems/angular.mdx

@@ -12,6 +12,28 @@

  Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.

+- If you're using the custom Storybook builder, Storybook will not automatically open a browser window or tab. It's is a known issue that we plan to fix in future releases.


Nice, I didn't know this 😅

Don't mention it. Caught it during testing :)!

shilman · 2022-02-02T07:09:17Z

docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx

+# Builds Storybook with Angular's custom builder
+# See https://storybook.js.org/docs/angular/get-started/install 
+# to learn how to create the custom builder
+ng run my-project:build-storybook


we might be able to just instruct users to add this to their "scripts" tag and then the rest of the instructions could stay the same. WDYT?

{ "scripts": { "build-storybook": "ng run my-project:build-storybook", } }

I've updated the Publish Storybook and factored it in with the latest commit.

shilman

Great stuff @jonniebigodes this is awesome 💯

theiliad · 2022-02-06T01:23:17Z

Hi @jonniebigodes @shilman

Can we actually add a sample project here?

I've made a setup in angular 13, building fine (and I'm able to use the bundle in another app),
however storybook is not liking it at all...

I've tried all kinds of configs for ~3hrs today. webpack 4, webpack 5, npx sb prerelease, looked at sample repos (e.g. angular cli, chroma, only they all seem to be using angular 11 or 12...)

In webpack 5 I either get: a bunch of babel-related errors (e.g. Module not found: Error: Can't resolve './construct'), or this error [error] Error: Invalid target: {"project":"angular-cli","target":"build"}

In webpack 4 I keep seeing (and I don't have a custom webpack config)

ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[8].rules[0].oneOf[1].type should be one of these:
ERR!    "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR!    -> Module type to use for the module

I have a feeling that the specific versions of angular CLI, devkit & other pieces are really key here. If you have a working repo, would love to see it...

shilman · 2022-02-07T15:02:16Z

@theiliad We'll follow up with example projects in the next couple months, but not as part of this PR.

theiliad · 2022-02-07T17:22:36Z

@theiliad We'll follow up with example projects in the next couple months, but not as part of this PR.

That's fair. Just so I can make some progress though, could we share the repo/setup that was used to test with angular13?

I can just figure it out from there. I might even be able to turn that into a sample repo for the docs

shilman · 2022-02-07T18:10:39Z

@theiliad Unfortunately we don't have a repo for that. I was playing around with @kroeder last week to try to better understand where we were at with Angular support and created a repo then. I don't remember where we got to, but I'm sharing that here in case it helps: https://github.com/shilman/storybook-angular13

Most of the inspiration was taken from the monorepo, which is running an older version of Angular but which uses the new config format https://github.com/storybookjs/storybook/tree/next/examples/angular-cli

You can also see some migration docs that came out of that session here: #17380

Sorry it's a bit all over the place, but that's where we're at right now.

theiliad · 2022-02-07T19:27:20Z

Sorry it's a bit all over the place, but that's where we're at right now.

Thanks! This is already helping me.

Haven't gotten it to fully work yet, but FYI, 1 of the errors that said nothing about compodoc was fixed by adding

    "@compodoc/compodoc": "^1.1.18"

to package.json

theiliad · 2022-02-07T20:31:57Z

Finally got things working!

I still have to add my style files, but stories are loading now.

Thanks @shilman, I'll look at PRing a new example in the repo soon...

…ular Chore: (Docs) Updates to the Angular documentation

Updates to the Angular documentation

b651613

jonniebigodes added documentation angular patch:yes Bugfix & documentation PR that need to be picked to main branch labels Feb 1, 2022

jonniebigodes requested a review from shilman February 1, 2022 22:31

jonniebigodes requested a review from ThibaudAV February 1, 2022 22:35

jonniebigodes removed the angular label Feb 1, 2022

shilman reviewed Feb 2, 2022

View reviewed changes

Updates per feedback

e7d1401

shilman approved these changes Feb 4, 2022

View reviewed changes

jonniebigodes mentioned this pull request Feb 4, 2022

Chore: (Docs) Updates to the Angular documentation #17419

Closed

theiliad mentioned this pull request Feb 6, 2022

[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular carbon-design-system/carbon-charts#1298

Closed

yannbf assigned shilman Feb 7, 2022

shilman merged commit 312e79d into next Feb 7, 2022

shilman deleted the chore_docs_updates_for_angular branch February 7, 2022 15:03

shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Feb 12, 2022

shilman added a commit that referenced this pull request Feb 12, 2022

Merge pull request #17387 from storybookjs/chore_docs_updates_for_ang…

82a84cc

…ular Chore: (Docs) Updates to the Angular documentation

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chore: (Docs) Updates to the Angular documentation #17387

Chore: (Docs) Updates to the Angular documentation #17387

jonniebigodes commented Feb 1, 2022

nx-cloud bot commented Feb 1, 2022 •

edited

Loading

shilman left a comment

shilman Feb 2, 2022

jonniebigodes Feb 2, 2022 •

edited

Loading

shilman Feb 2, 2022

jonniebigodes Feb 2, 2022

shilman Feb 2, 2022

jonniebigodes Feb 2, 2022

shilman Feb 2, 2022

jonniebigodes Feb 2, 2022

shilman left a comment

theiliad commented Feb 6, 2022 •

edited

Loading

shilman commented Feb 7, 2022

theiliad commented Feb 7, 2022 •

edited

Loading

shilman commented Feb 7, 2022

theiliad commented Feb 7, 2022 •

edited

Loading

theiliad commented Feb 7, 2022

		@@ -28,6 +28,37 @@ If your component files import their CSS, Storybook’s webpack config will work

		<!-- prettier-ignore-end -->

		- With Angular version 13 and above, you should use a builder configuration to import your CSS:

		@@ -12,6 +12,28 @@

		Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.

		- If you're using the custom Storybook builder, Storybook will not automatically open a browser window or tab. It's is a known issue that we plan to fix in future releases.

Chore: (Docs) Updates to the Angular documentation #17387

Chore: (Docs) Updates to the Angular documentation #17387

Conversation

jonniebigodes commented Feb 1, 2022

nx-cloud bot commented Feb 1, 2022 • edited Loading

☁️ Nx Cloud Report

shilman left a comment

Choose a reason for hiding this comment

shilman Feb 2, 2022

Choose a reason for hiding this comment

jonniebigodes Feb 2, 2022 • edited Loading

Choose a reason for hiding this comment

shilman Feb 2, 2022

Choose a reason for hiding this comment

jonniebigodes Feb 2, 2022

Choose a reason for hiding this comment

shilman Feb 2, 2022

Choose a reason for hiding this comment

jonniebigodes Feb 2, 2022

Choose a reason for hiding this comment

shilman Feb 2, 2022

Choose a reason for hiding this comment

jonniebigodes Feb 2, 2022

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

theiliad commented Feb 6, 2022 • edited Loading

shilman commented Feb 7, 2022

theiliad commented Feb 7, 2022 • edited Loading

shilman commented Feb 7, 2022

theiliad commented Feb 7, 2022 • edited Loading

theiliad commented Feb 7, 2022

nx-cloud bot commented Feb 1, 2022 •

edited

Loading

jonniebigodes Feb 2, 2022 •

edited

Loading

theiliad commented Feb 6, 2022 •

edited

Loading

theiliad commented Feb 7, 2022 •

edited

Loading

theiliad commented Feb 7, 2022 •

edited

Loading