I am just getting started developing an app with Ionic in the new Visual Studio Apache Cordova Tools.
I have created a home page using one of the Ionic tutorials (almost copy and paste) and tested it in the Ripple Emulator as well as on a real device, both run with the same result.
They both run fine as apps but Ionic fails to render anything.
In Visual Studio I get the following JavaScript error:
"Uncaught TypeError: Cannot set property 'content' of undefined"
File: ionic.js, Line 3898, Column: 23
This is where the ionic.js file tries to set the property of viewportTag.content but the viewport variable is undefined.
function viewportTagUpdate() {
var key, props = [];
for (key in viewportProperties) {
if (viewportProperties[key]) {
props.push(key + (viewportProperties[key] == '_' ? '' : '=' + viewportProperties[key]));
}
}
viewportTag.content = props.join(', ');
}
The viewportTag.content = props.join(', '); is where the error is.
This is my HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Test Tabs App</title>
<link href="/Content/ionic.css" rel="stylesheet" />
<link href="/css/index.css" rel="stylesheet" />
<script src="/cordova.js"></script>
<script src="/scripts/platformOverrides.js"></script>
<script src="/scripts/viewScripts/Home.js"></script>
<script src="/scripts/packages/ionic/ionic.bundle.js"></script>
</head>
<body>
<ion-tabs>
<ion-tab class="tabs-positive" title="Home">
<ion-content>
<p>Home Tab</p>
</ion-content>
</ion-tab>
<ion-tab title="About">
<ion-content>
<p>About Tab</p>
</ion-content>
</ion-tab>
</ion-tabs>
</body>
</html>Has anyone ran into this problem with Ionic before and knows how to solve it?
-Kyle
You may need to update the shim. This sample may help: https://code.msdn.microsoft.com/Ionic-SideMenu-Starter-8e905eb5