Angular Router URL array parameters doesnt get updated on navigate

[troehling]

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?

I dont know if this did work in previous versions

Description

Appending items to a URL parameter doesn´t work as expected. The parameter in the URL is an list/ array where items can be added or removed. Before it is possible to write an updated version of the list for append oder delete operations the current state of the parameters has to be read from the URL.

The minimal reproductions shows that setting the parameters doesn´t affect the URL. Only on the first call (click of the button) the URL does change. I belive that the problem might correlate with the fact that the list itself is read from the URL directly before in my example.

For example: If I´d click the button in the example 3 times i would expect the URL to look like this:
https://angular-slnewb.stackblitz.io/?myParameter=0&myParameter=1&myParameter=2
But instead it does look like this: https://angular-slnewb.stackblitz.io/?myParameter=0 only element that has been added at first appears in the URL.
If you check the console output it shows the value of the parameter that should have been written to the URL: ["0", "1", "2"] And it contains all three elements.
Writing another parameter to the URL afterwards will update the URL with the missing elements from the array aswell

There are a few possible workarounds for this issue.

1. Writing a comma-separated string to the URL instead of the array and splitting it when reading the parameter. Check: https://stackblitz.com/edit/angular-negcsk
2. Having an extra list that represents the items in die URL. This way it is not necessary to read from the URL before adding items to the list. A problem with this solution is that it is necessary initialize the additional list when the component loads.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-slnewb

🔥 Exception or Error

🌍 Your Environment

Angular Version:

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.2
Node: 8.11.4
OS: win32 x64
Angular: 8.0.0
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.2
@angular-devkit/core         8.0.2
@angular-devkit/schematics   8.0.2
@angular/cli                 8.0.2
@ngtools/webpack             8.0.2
@schematics/angular          8.0.2
@schematics/update           0.800.2
rxjs                         6.5.2
typescript                   3.4.5
webpack                      4.34.0

Anything else relevant?

[atscott]

Confirmed in v10: https://stackblitz.com/edit/angular-wps3zz?file=src%2Fapp%2Fapp.component.ts

The ActivatedRoute returns the actual queryParams stored in the router rather than a copy of them. By performing a push operation, the state inside the router gets modified. So the navigation is skipped because the router thinks it's navigating to the same URL.

Workaround: Use concat instead of push and don't directly modify data in the ActivatedRoute (see the added button that navigates by modifying the array with concat instead of push)

This is also likely related to #16261 and the fact that the router appears to not be providing an ActivatedRoute with observables that are insulated from the Router itself.