MEAN Stack Archives - AgilizTech

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 –

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

AngularJS is an excellent front end framework for building web applications and hybrid mobile applications. But when it comes to social sharing and Search Engine Optimization (SEO) of our page, it is a major letdown. The AngularJS Social Share issue has been reported and resolved in the recent versions of Angular by server-side rendering feature, also called Angular universal.

Search engine or social media crawlers are designed to crawl and read basic HTML content. But with AngularJS we will have just one single HTML page which will be changing its view asynchronously based on our requirements. Accordingly, we will need to change the meta tags that Facebook, Twitter or Google crawlers can read and render our HTML page as we want.

Let’s discuss this and find the solution for the AngularJS Social Share issue.

The problem

Social Media crawlers like Facebook do not evaluate JavaScript while fetching the value of our meta tags. This is how our code would look for meta tags.

Even if we have all the Open Graph Meta tags placed and valued properly, this is how our page will appear on Facebook:

Solution

We will follow the conventional server-side rendering of the page using a small piece of PHP code. We are going to identify the requests from the crawlers and redirect them to our PHP code, which will generate a page to share with properly constructed meta tags.

Here’s a diagram explaining the solution.

Follow the steps given below and enable rich content sharing on social media:

Add the following tag in your index.html

If your Angular app uses html5Mode there will be no issues. But, if you are using a ‘#’ hash in the URL, replace it with hashBang by adding following code piece,

$locationProvider.hashPrefix(‘!’);

Add a .htaccess file with the following content for redirection,

<IfModule mod_rewrite.c/>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]| Twitterbot|Pinterest|Google.*)
RewriteRule ^.*$ autorender.php
</IfModule/>

And finally, the PHP code that will make a page. Here we will call the appropriate API to get the required details.

<?php

$APIBASE = “<your_api_base/>”;
$id;
if(isset($_GET[‘_escaped_fragment_’])){
$escaped = explode(“/”, $_GET[‘_escaped_fragment_’]);
$id = $escaped[1];
$jsonData = getData($APIBASE , $id);

}

function getData($apiBase, $id ) {
$rawData = file_get_contents($apiBase.”/”.$id);
return json_decode($rawData);
}
makePage($jsonData, $APIBASE ,”<your_redirect_url/>”.$id);
function makePage($data, $siteRoot, $redirectUrl) {

?>
<!DOCTYPE html>
<html>
<head>
<meta property=“og:title” content=“<?php echo $data->name; ?>“ />
<meta property=“og:description” content=“<?php echo $data->description; ?>“ />
<meta property=“og:image” content=“<?php echo $data->image; ?>“ />
<meta property=“og:url” content=“<?php echo $redirectUrl ?>“ />
</head>
<body>
<h2><?php echo $data->name; ?></h2>
<p><?php echo $data->description; ?></p>
<img src=“<?php echo $data->image; ?>“>
</body>

</html>
<?php
}
?>

Output

Test it out at https://developers.facebook.com/tools/debug/ and you are good to go 🙂

Happy coding!

Currently browsing: MEAN Stack

Category: MEAN Stack

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

Problem

Solution

References

Recent Posts

Categories

INDIA

UNITED STATES

Services

Category: MEAN Stack

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

Problem

Solution

References

Solving the AngularJS Social Share issue

The problem

Solution

Output

References:

Recent Posts

Categories