Legacy Meteor Methods angular2 UI Router Issue

Question

https://github.com/faizmh/meteor_angular2_router_issues

I am trying to navigate from home page to market page.

In home page, I tried different variations to transition to market page

My target market page, reads from the db using Meteor RPC method via Observables

In the case of legacy accounts package and meteor methods, the angular UI fails to render the data

home.component.html

home page
<a [routerLink]="['/market']"> Market</a>
<button (click)="direct()">Direct Router</button>
<button (click)="accounts_package()">Using meteor accounts_package</button>
<button (click)="meteor_methods()">Using meteor Methods</button>
<button (click)="meteor_observable()">Using meteor meteor_observable</button>

home.component.ts

import { Component} from '@angular/core';
import template from './home.component.html';
import { Router, CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { MeteorObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';

@Component({
  selector: 'home',
  template
})
@Injectable()
export class HomeComponent {
    constructor(private router:Router){
    }
    direct(): void {
        console.log('calling direct')
      this.router.navigate(['market']);
      console.log(this.router)
    }

    meteor_observable(): void {     
        console.log('calling meteor_observable')
        let router = this.router
        MeteorObservable.call('logout').subscribe((markets) => {
      router.navigate(['market']);
    }, (error) => {
      console.log(`Failed to receive market_filter due to ${error}`);
    });
    }
    accounts_package(): void {
        console.log('calling accounts_package')
        let router = this.router
        Meteor.logout(function(){       
        router.navigate(['market']);
      });
    }

    meteor_methods(): void {
        console.log('calling meteor_methods')
        Meteor.call('logout', (error,result) => {
            this.router.navigate(['market']);
        })
    }
}

market.component.ts

import { Component} from '@angular/core';

import template from './market.component.html';
import { MeteorObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';

@Component({
  selector: 'market',
  template,
})
export class MarketComponent  {
  private markets

  constructor() {
    MeteorObservable.call('market_filter').subscribe((markets) => {
      this.markets = markets
    }, (error) => {
      console.log(`Failed to receive market_filter due to ${error}`);
    });

  }
}

market.component.html

Markets are {{markets}}

Answer 1

Actually here main problem is we are using angular 2 and meteor together and both are in different zones. so angular don't detect change which are outside of its zone.you can solve this problem using this method.

import { NgZone } from '@angular/core';

in you constructor type use this

constructor(private ngZone: NgZone) {}

and use ngZone like this which values you want to detect by angular

  generate_head_list_data(){
        var self = this;
         Meteor.call('refresh_graph_list', self.all_csvdata, self.newGraphdata, (error, response) => {
                if (error) {
                    console.log(error.reason);
                    self.ngZone.run(() => { <-- put you code inside ngZone in which you are getting issue in rendering
                        self.processingStart = false;
                    });
                } else {
                    self.ngZone.run(() => {
                        self.processingStart = false;
                        self._router.navigate(['/login']);
                    });
                    console.log(response);
                }
            });
    }

i hope this will help.