I have added itemtype="http://schema.org/Restaurant" schema in my angular 2 website. I tested with https://search.google.com/structured-data/testing-tool/ but my page content not rendered in google testing tool. it is displayong like <my-app>Loading...</my-app>. I have checked in console html is rendered. I want to display the rednred html in google testing tool. How to fix this?. Please help with this.
<div class="col-md-12 col-sm-12 col-xs-12 " itemscope="" itemtype="http://schema.org/Restaurant">
<div class="col-md-7 col-sm-7 col-xs-12 ">
<div class="summary">
<div class="hidden"> <img itemprop="image" src="https://www.dropbox.com/s/cj17j9p8ia2324p/13531992_1727289640876806_1806315202_n.jpg?raw=1"></div>
<div class="hidden" itemprop="name">Chicks On Fire</div>
<h1 class="">Summary</h1>
<p class="" itemprop="description">item description.</p>
</div>
<div class="sum_details ">
<div class="address">
<span class="icon-address"><img alt="Activity" class="icon1" src="assets/images/korean.png" title="Activity"></span>
<p class="address_title" itemprop="servesCuisine">Western</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Food Category" class="icon1" src="assets/images/tick.png" title="Food Category"></span>
<p class="address_title">Halal meat</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Timing" class="icon1" src="assets/images/time.png" title="Timing"></span>
<p class="address_title">1800 - 2200</p>
<div itemprop="openingHoursSpecification" itemscope="" itemtype="http://schema.org/OpeningHoursSpecification">
<span class="hidden" itemprop="opens" content="1800">1800</span>
<span class="hidden" itemprop="closes" content="2200">2200</span>
</div>
<p class="address_title">Closed on Mondays.</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Pricing" class="icon1" src="assets/images/tag.png" title="Pricing"></span>
<p class="address_title" itemprop="priceRange">20-30 GBP</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Website" class="icon1" src="assets/images/website.png" title="Website"></span>
<p class="address_title"><a itemprop="url" target="_Blank" href="http://www.mysite.co.uk/">Visit website</a></p>
</div>
<div class="address">
<span class="icon-address"><img alt="Location" class="icon1" src="assets/images/location.png" title="Location"></span>
<p class="address_title " itemprop="address">11 Hercules St, London Borough of Islington, London</p>
</div>
</div>
</div>
</div>
google testing tool result
<html>
<head>
<meta charset="utf-8">
<base href="/planner/">
<script>
(function() {
window['_app_base'] = '/' + window.location.pathname.split('/')[1];
})();
</script>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5257', 'none');
ga('send', 'pageview');
</script>
<link href="styles.dbb24ce5e4a005ec7903.bundle.css" rel="stylesheet"/></head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="inline.ca338d2ec972840d9759.bundle.js"></script><script type="text/javascript" src="polyfills.507dd0128897cd6bbb86.bundle.js"></script><script type="text/javascript" src="vendor.d72da31d6e50a2a57f34.bundle.js"></script><script type="text/javascript" src="main.6456ae999bcbe35f9e26.bundle.js"></script></body>
</html>
The great thing about Angular2 is that when fired up, all content inside your root app-element goes away. This means that you can put whatever you want in there from the server which you want to be picked up by crawlers.
You can generate this content by using a server-rendered version of the content in your app, or have custom logic.
You can find some more information here: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering and here: https://github.com/angular/universal