Sitelet https://github.com/angular/angular/pull/38825
Skip to content

feat(router): add migration to update calls to navigateByUrl and createUrlTree with invalid parameters - #38825

Closed
crisbeto wants to merge 3 commits into
angular:masterfrom
crisbeto:navigation-extras-omissions
Closed

crisbeto wants to merge 3 commits into
angular:masterfrom
crisbeto:navigation-extras-omissions

Conversation

@crisbeto

Copy link
Copy Markdown
Member

In #38227 the signatures of navigateByUrl and createUrlTree were updated to exclude unsupported properties from their extras parameter. This migration looks for the relevant method calls that pass in an extras parameter and drops the unsupported properties.

Before:

this._router.navigateByurl(/sitelet?url=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F%27%2F%27%2C%2520%257BskipLocationChange%3A%2520false%2C%2520fragment%3A%2520%27foo%27%257D);

After:

this._router.navigateByurl(/sitelet?url=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F%27%2F%27%2C%2520%257B%2520%2F*%2520Removed%2520unsupported%2520properties%2520by%2520Angular%2520migration%3A%2520fragment.%2520*%2F%2520skipLocationChange%3A%2520false%2520%257D);

These changes also move the method call detection logic out of the Renderer2 migration and into a common place so that it can be reused in other migrations.

@crisbeto
crisbeto force-pushed the navigation-extras-omissions branch from 7183953 to 8497f22 Compare September 12, 2020 12:26
…teUrlTree with invalid parameters

In angular#38227 the signatures of `navigateByUrl` and `createUrlTree` were updated to exclude unsupported
properties from their `extras` parameter. This migration looks for the relevant method calls that
pass in an `extras` parameter and drops the unsupported properties.

**Before:**
```
this._router.navigateByurl(/sitelet?url=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F%27%2F%27%2C%2520%257BskipLocationChange%3A%2520false%2C%2520fragment%3A%2520%27foo%27%257D);
```

**After:**
```
this._router.navigateByUrl('/', {
  /* Removed unsupported properties by Angular migration: fragment. */
  skipLocationChange: false
});
```

These changes also move the method call detection logic out of the `Renderer2` migration and into
a common place so that it can be reused in other migrations.
@crisbeto
crisbeto force-pushed the navigation-extras-omissions branch from 8497f22 to e65956c Compare September 12, 2020 12:33
@crisbeto crisbeto added area: migrations Issues related to `ng update`/`ng generate` migrations area: router target: major This PR is targeted for the next major release labels Sep 12, 2020
@ngbot ngbot Bot modified the milestone: needsTriage Sep 12, 2020
@crisbeto crisbeto added the action: review The PR is still awaiting reviews from at least one requested reviewer label Sep 12, 2020
@crisbeto
crisbeto marked this pull request as ready for review September 12, 2020 13:47

@atscott atscott left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for this! Just one comment (and a documentation request) but otherwise LGTM.

runTSLint(true);

const content = getFile('/index.ts');
expect(content).toContain(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think the risk of a NavigationExtras variable being re-used is just about zero, but do you know what would happen if a NavigationExtras variable were used by both navigateByUrl and createUrlTree?

Actually, this is kind of the case of Router#navigate:
return this.navigateByurl(/sitelet?url=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2Fthis.createUrlTree%28commands%2C%2520extras), extras);

Could you add a test or two for this case?

I wonder if it would be better to have a type cast for ts.Identifiers at the call location instead of migrating the literal variable declarations.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

As things are set up right now, it'll try to migrate both the navigateByUrl and createUrlTree calls so it can end up removing too much. I can make it either be a noop if it's used in both places, or add a TODO comment for people to migrate manually, or potentially give one method precedence over the other.

I suppose that casting it would work too, but I decided not to follow that route, because it just solves the compilation error, it doesn't actually correct the user's problem.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think it's extremely rare/unlikely that this might happen so I'll leave it up to you to decide if you want to handle it. If you do, I think a no-op would be the approach to go with. At worst, the application wouldn't compile but you'd at least be pointed directly to where a fix is needed. Removing properties might cause unexpected/silent breakages unless they're caught in unit tests.

Comment thread packages/core/schematics/utils/typescript/imports.ts Outdated

@devversion devversion left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM. Just a few minor comments

Comment thread packages/core/schematics/migrations/navigation-extras-omissions/util.ts Outdated
if ((ts.isPropertyAssignment(property) || ts.isShorthandPropertyAssignment(property)) &&
(ts.isStringLiteral(property.name) || ts.isNumericLiteral(property.name) ||
ts.isIdentifier(property.name))) {
if (!property.name || allowedProperties.has(property.name.text)) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Why is !property.name needed here? From past migrations I know that ts.is<...> functions throw if they receive undefined, so we might want to move that above.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I think it's a leftover that I hadn't cleaned up after I reworked the code. Removed.

Comment thread packages/core/schematics/utils/typescript/imports.ts
@devversion devversion added the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Sep 14, 2020

@crisbeto crisbeto left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I've reworked it based on the feedback.

if ((ts.isPropertyAssignment(property) || ts.isShorthandPropertyAssignment(property)) &&
(ts.isStringLiteral(property.name) || ts.isNumericLiteral(property.name) ||
ts.isIdentifier(property.name))) {
if (!property.name || allowedProperties.has(property.name.text)) {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I think it's a leftover that I hadn't cleaned up after I reworked the code. Removed.

runTSLint(true);

const content = getFile('/index.ts');
expect(content).toContain(

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

As things are set up right now, it'll try to migrate both the navigateByUrl and createUrlTree calls so it can end up removing too much. I can make it either be a noop if it's used in both places, or add a TODO comment for people to migrate manually, or potentially give one method precedence over the other.

I suppose that casting it would work too, but I decided not to follow that route, because it just solves the compilation error, it doesn't actually correct the user's problem.

Comment thread packages/core/schematics/utils/typescript/imports.ts
Comment thread packages/core/schematics/utils/typescript/imports.ts Outdated
@crisbeto
crisbeto force-pushed the navigation-extras-omissions branch from 46cb893 to 4d92fa1 Compare September 14, 2020 20:46
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews action: review The PR is still awaiting reviews from at least one requested reviewer labels Sep 15, 2020
@AndrewKushnir AndrewKushnir added the action: presubmit The PR is in need of a google3 presubmit label Sep 15, 2020
@AndrewKushnir

Copy link
Copy Markdown
Contributor

Presubmit.

@AndrewKushnir AndrewKushnir removed the action: presubmit The PR is in need of a google3 presubmit label Sep 16, 2020
@angular-automatic-lock-bot

Copy link
Copy Markdown

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 Oct 17, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: migrations Issues related to `ng update`/`ng generate` migrations area: router cla: yes target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants