Chore: (Docs) Updates to the Angular documentation

[juri-sinitson]

Issue:

What I did

Importing styles in .storybook/preview.js didn't work for me.
Tried also with and without the webpack mofications proposed above.

This instruction worked: #16950 (comment)

How to test

1. Create an project using NX with Angular preset like this: https://nx.dev/angular-tutorial/01-create-application
2. Create a library demo like this npx nx g lib demo
3. Create a module test in the library demo like this npx nx g m --name test --project demo
4. Create a component test in the library demo like this: npx nx g c --name test --project demo
5. Generate storybook configuration in the library demo like this: npx nx g @nrwl/angular:storybook-configuration demo
6. Generate stories for the library demo like this: npx nx g @nrwl/angular:stories demo
7. Create a file styles.scss somewhere in the project
8. Apply the documentation changes made in this PR
9. Enjoy: npx nx run demo:storybook

[nx-cloud]

Nx Cloud Report

CI is running for commit f979a5c.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

---

Sent with 💌 from NxCloud.

[jonniebigodes]

@juri-sinitson thanks for the time and effort you've put into this pull request. We appreciate your willingness to help improve our documentation. I was looking at this, and there's already an open pull request to address this situation (#17387). There are just a couple of items that need follow-up in that pull request and it will be merged. One thing that we could do to help complement the documentation is the following, once the pr I mentioned is merged you could make a follow-up and add the NX instructions to provide a bit more clarity?

Let me know what you think. Would like to hear your thoughts on it.

Have a great weekend!

Stay safe

[juri-sinitson]

@jonniebigodes

... once the pr I mentioned is merged you could make a follow-up and add the NX instructions to provide a bit more clarity
...
Let me know what you think. Would like to hear your thoughts on it.

I think it's a good idea. Until that I'll wait until the PR you mentioned above is merged.

[ThibaudAV]

Just some information. I don't know if it is interesting. I don't even know if it's necessary to add it here. but FYI

If the user uses the browserTarget option without the styles option then it will use the styles of the target.
If both are given the style defined here will be used.

In some cases we will want to add a main scss file only for Storybook. For example if we have one Storybook for several projects and applications inside angular workspace
Ex :

        "styles": [".storybook/styles.scss"]

[juri-sinitson]

If the user uses the browserTarget option without the styles option then it will use the styles of the target.
If both are given the style defined here will be used.

This does not seem to work with Nx+Angular both version 13.x. Have just tired with a production project. It looks like you really need to tell storybook directly which styles to use in this case.

[ThibaudAV]

Thank you for this work. I know that I'm not very available and active lately, but don't hesitate to ask me questions if something seems unclear

[juri-sinitson]

@jonniebigodes

you could make a follow-up and add the NX instructions to provide a bit more clarity

I've just made an new PR #17520 with instructions for NX.

[jonniebigodes]

@juri-sinitson appreciate the follow-up and willingness to make the pull request to address the issue. I'll check it today (Wednesday) and let you know of any additional feedback. Thank you very much 🙏 !