Routerlink issue with dynamic route

I am reading in a JSON file and creating buttons for each entry. When the button is pressed, I’m trying to have it go to a specific page - which is included in the JSON. I’m calling this from the HOME page, and the pages I’m calling are in the PAGES folder.

Here’s the code snippet:

    <ion-list>
        <ion-item button *ngFor="let item of (results | async)" routerLink="../pages/{{ item.itemPage }}/">
            <ion-label text-wrap>
                <h3>{{ item.name }}</h3>
            </ion-label>
            <ion-icon slot="start"  name="{{ item.icon }}"></ion-icon>
        </ion-item>
    </ion-list>

Everything works EXCEPT the routing. When I click on a button, I get the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'pages/protocols'
Error: Cannot match any routes. URL Segment: 'pages/protocols'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)

I’m not sure what I’m doing wrong.

My structure is:

2019-05-21_7-52-31

Any ideas what I’m doing wrong?

Thank you!