Author: Meghana Manjunath

Solved – Angular router outlet appended the view instead of replacing it

Recently while working on an Angular project, we faced a very weird issue while working on one of the third-party plugins recently – the Angular router outlet appended the view instead of replacing it. We spent considerable amount of time searching for solution, before finally cracking it. We hope this article saves your time.

Problem

The router outlet did not load the component that we had asked it to load, instead it appended the view on top of the previous view.

Structure of our component looked something like this –

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

 

From the dashboard component (for which the route is ‘/dashboard’) we asked the router to replace the view with home component (for which the route is ‘/home).

This is how the navigation code looked like,

import { Router } from ‘@angular/router’;
constructor( private router: Router) {}
this.router.navigate([‘/home]);

But this did not work as expected. The layout after the router navigation looked something like this –

 

Angular router outlet appended the view instead of replacing

 

Instead of replacing, it placed the Home view above the Dashboard view!

 

Solution

We dug deeper to understand why this happened. Here’s what we found –

The plugin we used took the application out of Angular’s ecosystem (which is good as it optimizes performance when starting a work consisting of one or more asynchronous tasks that don’t require UI updates or error handling to be handled by Angular).

In the handler function of the plugin, the ‘this’ keyword that we had used did not hold proper value for the router object.

To force the chunk of code to execute back in the required and necessary “Angular ZONE” we just replaced the navigation code with the following lines,

import { Router } from ‘@angular/router’;
import { NgZone } from ‘@angular/core’; // do not forget the import 🙂
constructor( private router: Router , public zone: NgZone) {}
this.zone.run(() => { this.router.navigate([‘/home]); });

 

That’s it! 🙂

Happy Coding!

 

References

For more information on ngZone check out Angular docs at https://angular.io/api/core/NgZone

Solved – Unable to retrieve audio/video file recorded and saved in Ionic 2 App

AgilizTech works on exciting web and mobile app projects for customers around the globe. We develop both native and hybrid apps for our customers.

Recently, while building a hybrid app on the Ionic 2 Framework, our developers encountered an issue in coding an audio/video file record and retrieval. The initial functionality seemed simple, but that’s where Cordova threw spanner in the works. We had researched extensively online and weren’t able to find any solution. So, when our developers toiled for a few hours, and successfully solved it, we decided to share the solution and let others benefit from it.

For this project, our team had used the Cordova plugin – cordova-plugin-media-capture. This plugin provides access to the device’s audio, image, and video capture capabilities.

It is super easy to use. So, to record a video, we used the code:


navigator.device.capture.captureVideo(
	(result) => {
		console.log(result);
		console.log(“Video captured Successfully”);
		// Your code goes here.
	} ,
	(error) => {
		console.log(error);
		console.log(“Video captured failed”);
	}
);

Everything looked pretty simple. The video was getting recorded using the device’s recording application. On Android, the code worked like a charm. However, the team ran into issues in the iOS device, as the saved file was not getting played.

While debugging the issue, we observed the Media Capture object in captureSuccess.
In Android, the file was getting stored in a persistent location, so the code worked fine when we tried to retrieve the saved file.

But in iOS device, the file got stored in a temporary location!
Result, we were unable to play the saved file in the application.

Solution?

Once we figured out the issue, the solution was simple. We just had to copy the file from this temporary location to a persistent location.

We chose a persistent location that covered both Android and iOS. The File plugin provided such an alias: cordova.file.dataDirectory

navigator.device.capture.captureVideo(
	(result) => {
	  console.log(“Video captured Successfully”);
	  var fileName = result[0].name;
	  var dir = result[0].localURL.split(“/”);
	  dir.pop();
	  var fromDirectory = dir.join(“/”);
	  var toDirectory = cordova.file.dataDirectory;
	  File.copyFile (fromDirectory , fileName , toDirectory , fileName).then( res =>{
			console.log(“File successfully copied”);
			// Your code goes here.
		});
     	  } ,
	(error) => {
		console.log(error);
		console.log(“Video captured failed”);
	}
);

Everything fell into place after that.

Summarising, to make the recording and retrieval possible, just save the file in a persistent location that’s common to both Android and iOS.

Have you faced a similar issue while building an app in Ionic 2? Do let us know in the comments!

AgilizTech is working on some pretty cool Hybrid Apps powered by Ionic 2. Would you like to know more?

Contact Us

Solved: Click Handler Reaction Delay in Ionic 2

I am happy to announce the solution for the click handler reaction delay in Ionic 2. As an Ionic developer, you would be familiar with the infamous 300 ms delay that occurs, when a user attempts to tap and register a click on the hybrid mobile app you painstakingly built with Ionic 2.

Cue in some dramatic visualization…
Click Handler Reaction Delay in Ionic 2

Moving on…

The delay in registering the tap is the time lag taken by the click handler in reacting. And this delay is specific to ion-col and ion-items.

In their blog and the official documentation, the Ionic team has discussed about the issue in detail. The reason for this delay is said to be the Ionic click blocker, that blocks any interaction until a transition is completely done. This is to recognize if the user wants a click event or double click event on touch devices.

How does this affect the user?

This makes the application slow, thus affecting user experience. The issue is more prominent on iOS devices.

Solved: Click Handler Reaction Delay in Ionic 2

The solution to this issue is quite simple. All you need to do is this:

Add the ‘tappable‘ directive to your element.

For example:

<ion-item tappable (click)=“myClickHandler()”>
    // Your code goes here
</ion-item>
Note: We recommend you add the ‘tappable‘ directive to the click handlers of elements which are not normally clickable.

Hope this post helped you overcome this rather frustrating issue in Ionic 2.

Happy Coding!!

 

AgilizTech is working on some pretty cool Hybrid Apps powered by Ionic 2.

Would you like to know more?

Contact Us

Close Bitnami banner
Bitnami