Angular: Refactor angular server #14358

ThibaudAV · 2021-03-26T20:35:02Z

Issue: not yet. but if all goes well i would like to eventually allow storybook to be more "Angular friendly". And to use an angular builder like in NX to simplify the use of storybook in angular

What I did

Rework the code of angular-cli_config and angular-cli_utils to add future features
Improvement:

Add test for different workspace configuration
These new tests allow to make sure of the compatibility with angular-cli 🤞. And to avoid (like last time) to update the supported angular version without failing
Use angular core to read the workspace instead of doing it by hand
Use angular-cli to read the tsconfig
Redesigned the code to get out the main steps + added error handling
Express more clearly the webpack config from angular-cli
Clarification of the logs
Improvement of the types with those of angular-cli

I find that it was not easy to understand the code before. I hope to improve it. but if there are still unclear points, do not hesitate to ask questions or suggest improvements.

Test campagne

To avoid regressions I added tests before. And check that after refactoring the tests still work without major changes

Step :

Create a new project (npx @angular/cli@6 new angular-v6)
Add storybook (npx sb init)
cp app/angular dist in node_modules of the new project
Start storybook

Angular 6
Angular 9
Angular 10
Angular 11
angular with NX (only with angular) (I didn't succeed in making a new project with a wokspace.json 🤷‍♂️ )

(Skip 7 and 8 🙈 )

⚠️ The goal is to not make any regression !. If you have any ideas for tests, don't hesitate to do them or ask me 🙏

How to test

Is this testable with Jest or Chromatic screenshots? Yes
Does this need a new example in the kitchen sink apps? Yes
Does this need an update to the documentation? Yes

kroeder

I just took a brief look at the code

It looks pretty clean and understandable 🙂
Especially the "webpack config" merge part really needed a refactoring...

kroeder · 2021-04-12T14:05:26Z

app/angular/src/server/angular-devkit-build-webpack.ts

@@ -0,0 +1,189 @@
+/**
+ * This file is to be watched !
+ * The code must be compatible from @angular-devkit version 6.1.0 to the latest supported


Why v6, though?

https://angular.io/guide/releases#support-policy-and-schedule

Angular versions v4, v5, v6, v7, and v8 are no longer under support.

Angular does not support those versions, why should we?

year but storybook still support these old versions no ?
I referred here :

storybook/app/angular/package.json

Line 90 in ea7d051

"@angular-devkit/core": "^0.6.1 || >=7.0.0",

@shilman @ndelangen What do you think? In the past, I tried to be compatible with the last 4 versions of Angular (8 to 11 right now)

In the link above you can find a table with LTS date ranges. Should we just stick to what Angular does support and write it somewhere down in the docs so we don't need to ask this ourselves over and over again? 🙂

All major releases are typically supported for 18 months. 6 months of active support, during which regularly-scheduled updates and patches are released. 12 months of long-term support (LTS), during which only critical fixes and security patches are released.

I think we can do it with the next storybook major 7 but not before, no ? 🤔

Ideally we keep back compat until our 7.0 release, but I think we can compromise on semver if it helps clean things up a lot.

kroeder · 2021-04-12T14:32:26Z

app/angular/src/server/utils/filter-out-styling-rules.ts

+};
+
+export const filterOutStylingRules = (config: Configuration) => {
+  // @ts-ignore


What needs to be ignored here? 🤔

Hummm 🤔 I took it from the old code. I'll go check it out if it's still nessesary

ThibaudAV · 2021-04-12T17:29:40Z

app/angular/src/server/framework-preset-angular-cli.ts

+    logger.info(`=> Using angular project '${fondProject.projectName}' for configuring Storybook`);
+  } catch (error) {
+    logger.error(`=> Could not find angular project`);
+    throw error;


I think I have introduced a change in behavior here 🤔
I throw a lot more "error" than before

To avoid the change of behavior it's necessary to ignores the errors if the project is not found and if it does not contain architect.build. with warn

but I wonder if this is a good thing 🤷‍♂️

If certain setups do not make sense at all I think it's ok to introduce a breaking change. In my experience, misconfiguring storybook may not lead to startup errors but runtime errors instead so it's not even breaking, it is "exit what should not work anyway"

ThibaudAV · 2021-04-12T17:33:15Z

thank @kroeder :)
I open the PR to get more feedback

shilman · 2021-04-16T15:56:32Z

@ThibaudAV is this ready to merge?

ThibaudAV · 2021-04-16T16:10:58Z

@shilman not yet
I need to improve the error handling. And also add the info when this configuration does not apply.

I tell you when it feels right

…hsPlugin with tsConfig

Adds tests in order to rework the code in next commit without changing the angular preset behavior

Rework the code of angular-cli_config and angular-cli_utils to add future features Improvement: - Add test for NX - Use angular core to read the workspace instead of doing it by hand - Use angular-cli to read the tsconfig - Redesigned the code to get out the main steps + added error handling - Express more clearly the webpack config from angular-cli - Clarification of the logs - Improvement of the types with those of angular-cli

ThibaudAV · 2021-04-19T15:44:14Z

@shilman it's ok for me

shilman

Did only a light review bug LGTM 💯

ThibaudAV changed the title ~~Angular:~~ Angular: Refactor angular server Mar 26, 2021

shilman added angular maintenance User-facing maintenance tasks labels Mar 26, 2021

ThibaudAV force-pushed the angular/refactor-server-test branch from 5c41213 to c17feae Compare April 2, 2021 14:44

ThibaudAV force-pushed the angular/refactor-server-test branch 7 times, most recently from 5fa4189 to c22fc7f Compare April 11, 2021 19:07

kroeder reviewed Apr 12, 2021

View reviewed changes

ThibaudAV commented Apr 12, 2021

View reviewed changes

ThibaudAV marked this pull request as ready for review April 12, 2021 17:33

ThibaudAV requested review from alterx and igor-dv as code owners April 12, 2021 17:33

ThibaudAV requested a review from a team April 12, 2021 17:33

ThibaudAV added 2 commits April 18, 2021 23:06

refactor(angular): use the full path to set configFile of TsconfigPat…

82ae93d

…hsPlugin with tsConfig

test(angular): add more test for framework-preset-angular-cli

62c344e

Adds tests in order to rework the code in next commit without changing the angular preset behavior

ThibaudAV force-pushed the angular/refactor-server-test branch from c22fc7f to a91d9f9 Compare April 18, 2021 21:06

ThibaudAV force-pushed the angular/refactor-server-test branch from a91d9f9 to 4f00418 Compare April 18, 2021 21:08

shilman approved these changes Apr 19, 2021

View reviewed changes

shilman merged commit 7eb9f89 into next Apr 19, 2021

shilman deleted the angular/refactor-server-test branch April 19, 2021 17:50

Jakob-em mentioned this pull request Apr 23, 2021

tsconfig could not be read on windows #14703

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular: Refactor angular server #14358

Angular: Refactor angular server #14358

ThibaudAV commented Mar 26, 2021 •

edited

kroeder left a comment

kroeder Apr 12, 2021

ThibaudAV Apr 12, 2021

kroeder Apr 12, 2021 •

edited

ThibaudAV Apr 14, 2021

shilman Apr 19, 2021

kroeder Apr 12, 2021

ThibaudAV Apr 12, 2021

ThibaudAV Apr 12, 2021

kroeder Apr 14, 2021

ThibaudAV commented Apr 12, 2021

shilman commented Apr 16, 2021

ThibaudAV commented Apr 16, 2021

ThibaudAV commented Apr 19, 2021

shilman left a comment

Angular: Refactor angular server #14358

Angular: Refactor angular server #14358

Conversation

ThibaudAV commented Mar 26, 2021 • edited

What I did

Test campagne

How to test

kroeder left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kroeder Apr 12, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThibaudAV commented Apr 12, 2021

shilman commented Apr 16, 2021

ThibaudAV commented Apr 16, 2021

ThibaudAV commented Apr 19, 2021

shilman left a comment

Choose a reason for hiding this comment

ThibaudAV commented Mar 26, 2021 •

edited

kroeder Apr 12, 2021 •

edited