Skip to content
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

List available migrations and let users choose on ng update (including optional migrations) #23205

Closed
1 of 15 tasks
d-koppenhagen opened this issue May 24, 2022 · 5 comments · Fixed by #24825
Closed
1 of 15 tasks
Labels
area: angular/cli feature: under consideration Feature request for which voting has completed and the request is now under consideration feature Issue that requests a new feature ng update DX
Milestone

Comments

@d-koppenhagen
Copy link

d-koppenhagen commented May 24, 2022

🚀 Feature request

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Description

Currently executing ng update will perform necessary migrations from one angular version to another which works smoothly.

However there there are two issues I see:

  1. Users can't select / see the available migrations with their details before executing ng update
  2. Optional migrations that may be available won't be executed and listed. In fact users that doesn't know about such probably very helpful but optional migrations aren't able to find and execute them.

One example for this which can be found at update.angular.io only when selecting 'medium' or 'advanced' option:

ng update @angular/cli@12 --migrate-only production-by-default

Identifying and executing such optional migrations can be tricky if there isn't a way to list/select them.

Describe the solution you'd like

Ideally during the execution, ng update should list the migrations with their default execution state and also include all available optional migrations with a non-preselected state like this:

> ng update
Which migrations do you want to execute:
[x] migration1Name: migration1Description
[x] migration2Name: migration1Description
[ ] optionalMigration1Name: optionalMigration1Description

After a user made the selection, all selected migrations will be executed including the selected optional ones.
This will cause a better developer experience as it's more clear what will happen during the update process before actually running the migrations.

It should be considered, that tools like renovate or dependabot can't handle such interactive selections.
Therefore a flag could be helpful to deactivate the prompt and switch back to the current behavior (only executing the pre-selected non-optional migrations):

ng update --interactive=false

As users may have already executed migrations previously or want to know what migrations are available at another point of time, a separate migration command/option could be helpful:

> ng update --list-migrations
- migration1Name: migration1Description
- migration2Name: migration1Description
- optionalMigration1Name: optionalMigration1Description

To execute a migration run: ng update --migrate-only <migration-name>

Describe alternatives you've considered

An alternative would be to implement a "small" solution that would at least list possible optional migrations at the end of the ng update log to give users a hint about possibly further migration they can execute manually

> ng update

...

Further optional migrations are available:

- migration1Name: migration1Description
- migration2Name: migration1Description
- optionalMigration1Name: optionalMigration1Description

To execute a migration run: ng update --migrate-only <migration-name>
@alan-agius4 alan-agius4 added feature Issue that requests a new feature area: angular/cli ng update DX labels May 24, 2022
@ngbot ngbot bot modified the milestone: needsTriage May 24, 2022
@alan-agius4
Copy link
Collaborator

I do agree that we should provide a better DX experience for optional migrations.

@angular-robot
Copy link
Contributor

angular-robot bot commented May 24, 2022

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

@angular-robot angular-robot bot added the feature: votes required Feature request which is currently still in the voting phase label May 24, 2022
@d-koppenhagen
Copy link
Author

Currently an optional migration seems to be handled by simply setting a version in the migration that will not match with any realistic Angular Version. That will cause the migration isn't executed by default.

See: https://github.com/angular/angular-cli/blob/12.2.x/packages/schematics/angular/migrations/migration-collection.json#L128-L133

 "production-by-default": {
      "version": "9999.0.0",
      "factory": "./update-12/production-default-config",
      "description": "Optional migration to update Angular CLI workspace configurations to 'production' mode by default."
    }

I think it would be better to add an explicit flag like optional with the type of boolean. This would allow to define migrations for related versions but make them optionally executable.

@angular-robot
Copy link
Contributor

angular-robot bot commented Jul 3, 2022

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

@angular-robot angular-robot bot added feature: under consideration Feature request for which voting has completed and the request is now under consideration and removed feature: votes required Feature request which is currently still in the voting phase labels Jul 12, 2022
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Mar 8, 2023
When running `ng update` we now display optional migrations from packages.

When the terminal is interactive, we prompt the users and ask them to choose which migrations they would like to run.
```
$ ng update @angular/core --from=14 --migrate-only --allow-dirty
Using package manager: yarn
Collecting installed dependencies...
Found 22 dependencies.
** Executing migrations of package '@angular/core' **

▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive.
  This migration replaces all `RouterLinkWithHref` references with `RouterLink`.
  Migration completed (No changes made).

** Optional migrations of package '@angular/core' **

This package have 2 optional migrations that can be executed.
Select the migrations that you'd like to run (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Update server builds to use generate ESM output.
 ◯ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

In case the terminal is non interactive, we will print the commands that need to be executed to run the optional migrations.
```
$ ng update @angular/core --from=14 --migrate-only --allow-dirty
Using package manager: yarn
Collecting installed dependencies...
Found 22 dependencies.
** Executing migrations of package '@angular/core' **

▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive.
  This migration replaces all `RouterLinkWithHref` references with `RouterLink`.
  Migration completed (No changes made).

** Optional migrations of package '@angular/core' **

This package have 2 optional migrations that can be executed.

▸ Update server builds to use generate ESM output.
  ng update @angular/core --migration-only --name esm-server-builds

▸ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  ng update @angular/core --migration-only --name migration-v15-router-link-with-href
```

**Note:** Optional migrations are defined by setting the `optional` property to `true`. Example:
```json
{
  "schematics": {
    "esm-server-builds": {
      "version": "15.0.0",
      "description": "Update server builds to use generate ESM output",
      "factory": "./migrations/relative-link-resolution/bundle",
      "optional": true
    }
}
```

Closes angular#23205
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Mar 8, 2023
When running `ng update` we now display optional migrations from packages.

When the terminal is interactive, we prompt the users and ask them to choose which migrations they would like to run.
```
$ ng update @angular/core --from=14 --migrate-only --allow-dirty
Using package manager: yarn
Collecting installed dependencies...
Found 22 dependencies.
** Executing migrations of package '@angular/core' **

▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive.
  This migration replaces all `RouterLinkWithHref` references with `RouterLink`.
  Migration completed (No changes made).

** Optional migrations of package '@angular/core' **

This package have 2 optional migrations that can be executed.
Select the migrations that you'd like to run (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Update server builds to use generate ESM output.
 ◯ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

In case the terminal is non interactive, we will print the commands that need to be executed to run the optional migrations.
```
$ ng update @angular/core --from=14 --migrate-only --allow-dirty
Using package manager: yarn
Collecting installed dependencies...
Found 22 dependencies.
** Executing migrations of package '@angular/core' **

▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive.
  This migration replaces all `RouterLinkWithHref` references with `RouterLink`.
  Migration completed (No changes made).

** Optional migrations of package '@angular/core' **

This package have 2 optional migrations that can be executed.

▸ Update server builds to use generate ESM output.
  ng update @angular/core --migration-only --name esm-server-builds

▸ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  ng update @angular/core --migration-only --name migration-v15-router-link-with-href
```

**Note:** Optional migrations are defined by setting the `optional` property to `true`. Example:
```json
{
  "schematics": {
    "esm-server-builds": {
      "version": "15.0.0",
      "description": "Update server builds to use generate ESM output",
      "factory": "./migrations/relative-link-resolution/bundle",
      "optional": true
    }
}
```

Closes angular#23205
angular-robot bot pushed a commit that referenced this issue Mar 8, 2023
When running `ng update` we now display optional migrations from packages.

When the terminal is interactive, we prompt the users and ask them to choose which migrations they would like to run.
```
$ ng update @angular/core --from=14 --migrate-only --allow-dirty
Using package manager: yarn
Collecting installed dependencies...
Found 22 dependencies.
** Executing migrations of package '@angular/core' **

▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive.
  This migration replaces all `RouterLinkWithHref` references with `RouterLink`.
  Migration completed (No changes made).

** Optional migrations of package '@angular/core' **

This package have 2 optional migrations that can be executed.
Select the migrations that you'd like to run (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Update server builds to use generate ESM output.
 ◯ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

In case the terminal is non interactive, we will print the commands that need to be executed to run the optional migrations.
```
$ ng update @angular/core --from=14 --migrate-only --allow-dirty
Using package manager: yarn
Collecting installed dependencies...
Found 22 dependencies.
** Executing migrations of package '@angular/core' **

▸ Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive.
  This migration replaces all `RouterLinkWithHref` references with `RouterLink`.
  Migration completed (No changes made).

** Optional migrations of package '@angular/core' **

This package have 2 optional migrations that can be executed.

▸ Update server builds to use generate ESM output.
  ng update @angular/core --migration-only --name esm-server-builds

▸ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  ng update @angular/core --migration-only --name migration-v15-router-link-with-href
```

**Note:** Optional migrations are defined by setting the `optional` property to `true`. Example:
```json
{
  "schematics": {
    "esm-server-builds": {
      "version": "15.0.0",
      "description": "Update server builds to use generate ESM output",
      "factory": "./migrations/relative-link-resolution/bundle",
      "optional": true
    }
}
```

Closes #23205
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: angular/cli feature: under consideration Feature request for which voting has completed and the request is now under consideration feature Issue that requests a new feature ng update DX
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants