Keep navParams on livereload for dev environment

Ionic Framework ionic-v3
1

Hi folks,

I was wondering what would be the best approach to keep navParams for the page/component that we work on during development. We’re already using IonicPage() deeplinking so I can already land on the required page on refresh, however once page is refreshed on watch trigger, params/state disappear and you should navigate from the beginning or land in a deadloop.

I created following component for keeping the navParams as is for the active page and it does the job if only it’s injected to the component template. I would like to inject this component for all/current component templates when we’re on dev environment and push this responsibility to build system somehow. I don’t want it to be part of source code of each component’s template.

import { Component, OnDestroy } from '@angular/core';
import { StorageService } from '../storage/storage.service';
import { Environment } from '../../../apps/imech/src/env/environment';
import { NavController, NavParams } from 'ionic-angular';
import isEqual from 'lodash-es/isEqual';

@Component({
    selector: 'kl-persistent-nav-params',
    providers: [StorageService],
    template: '',
})
export class PersistentNavParamsComponent implements OnDestroy {

    constructor(public navParams: NavParams,
                public navController: NavController,
                public storageService: StorageService) {

        if (Environment.build === 'dev') {
            const params = this.getNavParams();
            if (params && !isEqual(params, this.navParams.data) && !Object.keys(this.navParams.data).length) {
                this.navParams.data = params;
            }
            this.subscribeToViewEvents();
        }
    }

    public ngOnDestroy() {
        this.navController.viewWillLeave.unsubscribe();
        this.navController.viewDidEnter.unsubscribe();
    }

    private subscribeToViewEvents() {
        this.navController.viewDidEnter.subscribe(() => {
            this.setNavParams();
        });

        this.navController.viewWillLeave.subscribe(() => {
            this.setNavParams();
        });
    }

    private get storageKey() {
        return 'navParams';
    }

    private getNavParams() {
        const navData = this.storageService.getObject(this.storageKey);
        if (navData) {
            return navData;
        }
        return undefined;
    }

    private setNavParams() {
        this.storageService.setObject(this.storageKey, this.navParams.data);
    }
}

Any ideas on how to solve my issue or providing a better approach for this goal?

Thanks in advance!