When I use sencha CMD (I have tried 4 and 5 with similar results), I get an error on loading app like:
Uncaught TypeError: Cannot read property 'setPath' of undefined
This error is referring to: Ext.Loader.setPath(), but also fires on Ext.application, and Ext.Loader.setConfig( if I re-order them.
There are no errors before or after this, it loads fine when loading without building, produces same results with production and development microloaders.
Any thoughts?
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script type="text/javascript">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onResume() {
}
</script>
</head>
<body onload="init()">
<img id='splashImage' src='resources/images/splash.png' />
<img id="splashLogo" src='resources/images/splashLogo.png' />
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Related
I have written a simple hello world code in ReactJS, but when I run the code, the browser displays nothing. There is not any error displayed on console. Please tell what can be the problem. I am using WebStrom compiler, Chrome as browser and Windows 8.1 is the OS.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First React App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.jsx" type="text/babel"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
script.js
var MyComponent = React.createClass({
render :function() {
return(
<h2>Heading 2</h2>
);
}
});
React.render(
<MyComponent/>, document.getElementById('content')
);
project directory
browser display
It could be that your script.js should be script.jsx?
It's a babel issue you're running into. Try replacing JSXTransformer with the official babel package:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
I'm new to react and I was just going through a tutorial. But when I write this piece of code here, there's an error saying "cannot read property 'purgeUnmountedComponents' of undefined". I'm trying to achieve a very basic first program. -
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
<script type = "text/babel">
var HelloWorld = React.createClass({
render: function() {
return <div>
<h1>Hello</h1>
</div>;
}
});
ReactDOM.render(<HelloWorld />, document.getElementById('hey'));
</script>
<title>Make or break</title>
</head>
<body>
<div id="hey">
</div>
<!-- <h1>Hello bro</h1> -->
</body>
</html>
Has anyone else faced this? Thanks in advance!
Looks like bug at minificated version, as previous version is ok and non-mimified version is ok
I mean this
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
and this
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
I'm trying to make my AngularJS HelloWorld work but I can't. My code is the following:
<!DOCTYPE html>
<html np-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
</body>
The output:
{{mensagem}}
I searched about similar questions here in SO but found only questions with a missing ng-app atribute.
I tried opening my file both in Firefox and Chrome and I get the same error. Logging both angular and app reveal that they are both defined.
I don't know what I'm doing wrong.
In your HTML tag, you've misspelled ng-app, which is probably the main reason it's not working. You should also place the include for Angular down at the end of the body, which ensures the app and controller elements are defined before the script runs:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</body>
</html>
I'm getting started with kendo & angular - free version - and I have a page that renders and behaves okay, but throws an error in the background.
I get an
"Uncaught TypeError: Cannot read property 'jQuery' of undefined" in /js/kendo.angular.min.js:16
I think I have a wrong dependency / am missing one, but I'm not sure which. The kendo scripts and css are from the core download page http://www.telerik.com/download/kendo-ui-core
Whats going on here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kendo With Angular</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
</head>
<body ng-app="KendoDemo">
<div ng-controller="Demo">
{{hello}}
<input kendo-date-picker k-ng-model="dateObject" />
{{date | date:'fullDate'}}
{{dateObject | date:'fullDate'}}
</div>
<script>
angular.module('KendoDemo',['kendo.directives'])
.controller('Demo', function($scope) {
$scope.hello = 'Hello World';
})
</script>
</body>
</html>
The kendo.ui.core.js script needs to go before the kendo.angular.js script:
proper script order
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>