Query parameters with virtualTree flag enabled

[pietro-ditommaso]

Hi everyone

I defined a navigation node with virtualTree: true in order to have the possibility to navigate the inner children without defining them. The micro frontend application which is linked to the defined navigation node is an Angular application and it has its own routing logic to navigate through components.

I followed the guide in this link also to sync the browser URL with the inner micro frontend URL. I applied some modifications depending on my needs, but everything seems to work fine. However, I cannot find the way to pass query parameters to the Angular application.

Here I paste my current code snippets:

Navigation node

{
    pathSegment: 'angular-test-app',
    label: 'Angular Test App',
    viewUrl: '/angular/test-app',
    virtualTree: true
  }

Luigi navigation service in Angular app

import { Injectable, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { linkManager } from '@luigi-project/client';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Injectable({ providedIn: 'any' })
export class LuigiAutoNavigationService implements OnDestroy {
    private destroy$ = new Subject<void>();
    private initialized = false;
    private urlRoot: string;

    constructor(private router: Router) { }

    ngOnDestroy(): void {
        this.destroy$.next();
    }

    initializeForFeature(featureRoot: string): void {
        if (this.initialized === false) {
            this.urlRoot = featureRoot.startsWith('/') ? featureRoot : `/${featureRoot}`;
            this.router.events
                .pipe(
                    takeUntil(this.destroy$),
                    filter(ev => ev instanceof NavigationEnd && ev.url.startsWith(this.urlRoot)),
                )
                .subscribe(ev => {
                    linkManager()
                        .fromVirtualTreeRoot()
                        .withoutSync()
                        .navigate((ev as NavigationEnd).url.replace(this.urlRoot, ''));
                    this.initialized = true;
                });
        }
    }
}

I tried to hard code the query parameter just for test on the browser URL by writing http://localhost:4321/angular-test-app/details?~id=5. The details page is routed correctly, but the query parameter is not passed to the Angular application.

What am I doing wrong? Can you help me, please?

Thank you

[JohannesDoberer]

Hi @pietro-ditommaso,
first for clarification.
There are two types of query parameters in Luigi.

On the one hand we have Luigi's node params with a prefix before to get the node params, like in your url http://localhost:4321/angular-test-app/details?~id=5.

initializeForFeature(featureRoot: string): void {
  console.log('nodeParams', getNodeParams());
  ....
}

You can add node params or you can navigate with params.

On the other hand there are the regular query parameters like http://localhost:4321/angular-test-app/details?id=5 without any prefix.
These params are called coreSearchParams with getter and setter for the luigi client.
Regarding security reasons it is necessary to set clientPermissions on the node config in Luigi core, like:

{
    pathSegment: 'angular-test-app',
    label: 'Angular Test App',
    viewUrl: '/angular/test-app',
    virtualTree: true,
    clientPermissions: {
      urlParameters: {
          id: {
             read: true,
             write: true
         }
      }
   },
  }

initializeForFeature(featureRoot: string): void {
 console.log('coreSearchparams', getCoreSearchParams())
....
}

Sorry for the late answer and please let me know if it helps.

Best regards

[pietro-ditommaso]

Hi @JohannesDoberer,
sorry if I didn't answer before.

I applied your suggestion about the first type of query parameters, the node params, and it actually worked.

Although, what I imagined about the query parameters prefixed with ~ was that they were passed to the client application also in the iframe url. In that case I wouldn't need to use the getNodeParams() method in the client application, but just use the Angular built-in classes to manager query parameters.

This is an example of what I mean:
Given this node configurated in the Luigi core application

{
    pathSegment: 'angular-test-app',
    label: 'Angular Test App',
    viewUrl: '/angular/test-app',
    virtualTree: true
  }

When I navigate to the following in url in the browser http://localhost:4321/angular-test-app/details?~id=5, I expected to see this in the iframe url by inspecting the web page: /angular/test-app/details?id=5. In that way, the Angular application works smoothly and I can just use this.activatedRoute.snapshot.queryParamMap.get('id') to retrieve the query parameter.
Instead, the iframe url is always without explicit query parameter (/angular/test-app/details) and I need to add the getNodeParams() method to handle the node params from Luigi core app.

Basically, after your answer, I wrote something like the following snippet:

private getIdParam(): number {
    const nodeParams = getNodeParams();
    return this.activatedRoute.snapshot.queryParamMap.get('id') || nodeParams['id'];
}

Just to explain the reason why I wasn't able to make my code work before.

Thank you very much for you help!