Angular: Add multi-project setup for ng workspaces

[valentinpalkovic]

Resolves #20213
Resolves #14026
Resolves #19289

What I did

Remove NX dependency

Previously, we tried to read the NX configuration during initialization to figure out which tsconfig we have to adjust for Storybook to work with Angular. We remove this kind of check. Instead, as soon as we recognize nx being part of the project, we exit the initialization and point to the excellent @nrwl/storybook plugin instead.

Removed support for Angular < 14

We do not support Angular below v14 anymore (18b7618)

Remove the legacy way of using Storybook for Angular

In the past, it was possible to start Storybook independently of any Angular builder. Running yarn storybook did the job. Now Storybook is bound to an Angular project, which is set up in the angular.json file. During initialization, new entries are added to a particular project's architect section to set up Storybook. You have to run ng run <project>:storybook and ng run <project>:build-storybook now instead. (4b68d75)

Multi-project setup in Angular workspace

Before, one Storybook was set up for the entire Angular workspace. Since Storybook is now bound to a particular project, this is not the case anymore. If you have set up multiple applications/libraries within an Angular workspace, you will be asked for which particular project you would like to set up Storybook. (542c535)

Optional Compodoc generation

Previously, compodoc was set up automatically for you. You'll be asked if you'd like to set it up for a particular project.

Fixes some Typescript-related issues related to Template Stories

The stricter set of Typescript rules was causing issues with the Template Stories, which are copied/linked over to a sandbox (4f4b4e4)

Removed legacy renderer

The parameters.angularLegacyRendering option is removed. You cannot use the old legacy renderer anymore.

Flowchart

How to test

1. Create an angular sandbox (yarn task --task sandbox --template angular-cli/default-ts --no-link) (Script sometimes stops at Publishing packages. Rerun the command and start from Run the internal npm server (run-registry).
2. cd ./sandbox/angular-cli-default-ts
3. yarn storybook -> Check whether Storybook runs smoothly. Check whether compodoc documentation is available in the addon section. Button inputs for example has some descriptions.
4. npx ng generate application new-application -> Creates a new application in the angular workspace
5. <path-to-storybook>/code/lib/cli/bin/index.js init -> Initialize Storybook for new-application. Answer compodoc prompt with N.
6. Go to angular.json and check whether projects.angular-latest.architect.storybook is configured with compodoc args and projects.new-application.architect.storybook is configured without compodoc args.
7. Go to ./projects/new-application/.storybook/main.js and replace the content with:

const mainRoot = require('../../../.storybook/main.js');
module.exports = {
  ...mainRoot,
  previewAnnotations: [],
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"]
};

You must do this for testing because the sub-project does not have defined template stories. This adjustment, therefore, is only necessary due to how we set up sandboxes.

8. npx ng run new-application:storybook
9. yarn build-storybook -> Builds root project. Outputs Storybook dist to storybook-static
10. npx ng run new-application:build-storybook -> Builds new-application project. Outputs Storybook dist to dist/storybook/new-application

[mandarini]

That's great!!! :D Thank you very much @valentinpalkovic for pointing to the Nx plugin! I'm sure it will help with setting up Storybook for Nx. I also like the new Compodoc docs and the opt-in. I need to add this to the @nrwl/storybook generator, too. I went through the PR, mainly the parts that are either concerned with Nx or with generators. Looks good to me! :)

Also, how great is this flowchart.

[ThibaudAV]

I read quickly I don't know the context of each change 😁
But on the whole I think it's great.
And the choice for nx is good

Nice to see people working on this part 😊

[Marklb]

Now that the Builder is required, should we still leave a small check to for invalid configuration. In my PR to fix tests, I also removed the deprecated so I could drop the deprecated code's tests. I added a check for the angularBrowserTarget property and logged an error message that directs them to the docs for migrating to the builder. Maybe the code just throwing an error when it happens to fail is enough, but maybe this small check could make it more obvious to people that haven't migrated.
The change I am referring to in my PR is: https://github.com/Marklb/storybook/blob/marklb/update-angular-tests/code/frameworks/angular/src/server/framework-preset-angular-cli.ts#L36

[shilman]

Amazing work @valentinpalkovic ❤️

A few questions from my testing. In your test instructions:

const mainRoot = require('../../../.storybook/main.js');
module.exports = {
  ...mainRoot,
  previewAnnotations: [],
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"]
};

What's the purpose of previewAnnotations? Is that a typo?

Also, the sandbox generated the following in angular.json:

        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": ".storybook",
            "browserTarget": "angular-latest:build",
            "compodoc": false,
            "compodocArgs": [
              "-e",
              "json",
              "-d",
              "."
            ],
            "port": 6006
          }
        },

But it seems like compodoc is still running/working. Any idea what's going on there?