Skip to content

feat(angular-onboarding): Add standalone app docs #77302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

ArthurKnaus
Copy link
Member

Add platform option to javascript-angular that allows to switch between standalone / module app initialization.

Screen.Recording.2024-09-11.at.11.32.54.mov

Closes #77134

@ArthurKnaus ArthurKnaus requested a review from Lms24 September 11, 2024 09:56
@ArthurKnaus ArthurKnaus requested a review from a team as a code owner September 11, 2024 09:56
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Sep 11, 2024
Comment on lines 42 to 53
label: t('App Type'),
defaultValue: AppType.STANDALONE,
items: [
{
label: 'Standalone',
value: AppType.STANDALONE,
},
{
label: 'Module',
value: AppType.MODULE,
},
],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Lms24 what would be the proper label for it?
Can we add some postfix to Standalone and Module to make it clearer?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With "postfix", do you mean a tootlip-like element? Then I'd add something like

  • standalone: "Use this if you have an app.config.ts file"
  • module: "Use this if you have an app.module.ts file"

Some other ideas for the button names:

  1. App Config / App Module
  2. Standalone Config / Module-based Config
  3. Standalone Config / NGModule Config
  4. App Config / NGModule Config
  5. Standalone Conponent Config / NGModule-based Config

After thinking a bit about it, I kinda like 3 and 4. Makes it really clear that we're talking about Angular's NGModules. WDYT?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or can we do something like

"I have an [app.config.ts]|[app.module.ts] file", so that the selection more or less becomes part of a sentence? Hope this makes sense 😅

Copy link
Member Author

@ArthurKnaus ArthurKnaus Sep 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was talking about changing the button label 👍
Will go with 4 then. that is the clearest for me as someone who is not super familiar with Angular.


const appInit = isModuleApp(params)
? `
enableProdMode();
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Lms24 Why are we suggesting to enable prod mode?
According to the Angular docs this is discouraged. Maybe this deserves a comment?

Copy link
Member

@Lms24 Lms24 Sep 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can just remove this from the snippets. Looks like it was recommended until NG14, given the discouragement note was added in NG15 docs. We just didn't notice that. Good catch!

Copy link

codecov bot commented Sep 11, 2024

Codecov Report

Attention: Patch coverage is 84.61538% with 2 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...atic/app/gettingStartedDocs/javascript/angular.tsx 84.61% 2 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           master   #77302       +/-   ##
===========================================
+ Coverage   57.38%   78.09%   +20.71%     
===========================================
  Files        6945     6944        -1     
  Lines      308220   307754      -466     
  Branches    50449    50385       -64     
===========================================
+ Hits       176883   240353    +63470     
+ Misses     126537    61036    -65501     
- Partials     4800     6365     +1565     

Copy link
Member

@priscilawebdev priscilawebdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code looks good to me

Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks a lot Arthur! LGTM (and answered your questions).
I'll follow up with making the changes in docs once this is merged.

@ArthurKnaus ArthurKnaus merged commit cd5b45a into master Sep 13, 2024
44 checks passed
@ArthurKnaus ArthurKnaus deleted the aknaus/feat/angular-onboarding/add-standalone-app-docs branch September 13, 2024 09:14
@github-actions github-actions bot locked and limited conversation to collaborators Sep 28, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update onboarding instructions in the product to reflect the latest Angular changes
3 participants