I am having a problem with my ionic project, it is not loading cordova.js file or ngCordova.js file.
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<script src="lib/ngCordova/dist/ng-cordova.js"/>
<script src="cordova.js"></script>
<script type='text/javascript' src="lib/cryptojslib/rollups/aes.js"></script>
...
</head>
When I deploy the app on my iphone, aes.js and cordova.js file is loaded, the problem is ng-cordova.js is not loaded because when I invoke that code I get:
Error: Can't find variable: cordova
scan#file:///var/containers/Bundle/Application/6888FB51-F164-46EC-89AC-B8960C93FC7A/Nastic.app/www/lib/ngCordova/dist/ng-cordova.js:596:16\
....
If I switch lines:
<!DOCTYPE html>
<html>
<head>
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"/>
<script type='text/javascript' src="lib/cryptojslib/rollups/aes.js"></script>
...
</head>
Then ng-cordova.js is loaded, but aes.js is not loaded.
I was looking for a fix to this problem but couldn't find anything that solved the issue, however lot of similar issues.
Thanks
You should always include the file cordova.js after loading ng-cordova.js
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="lib/cryptojslib/rollups/aes.js"></script>
Reference: http://ngcordova.com/docs/install/
Related
I am working on a feature to replace a Flash dashboard with Nivo/D3. I successfully built the dashboard and have it as a React component to be imported. The react component even loads into the browser, but does not render on the page.
I have verified that my component is built correctly, and I am able to run it in an html page by itself. The page I am trying to put it in is of file type .html.erb. I did try changing the ruby tags to HTML and that did not work. One theory is that I need to remove the JS prototype duplicate line here.
<script type="text/javascript"> </script>
<script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/effects.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/controls.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/application.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/active_scaffold.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/dhtml_history.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/form_enhancements.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/rico_corner.js?1565285086" type="text/javascript"></script>
<link href="/stylesheets/active_scaffold/default/stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
However, I don't know where or how that code is being generated. I think it is related to active scaffolding. Does anyone have any input on that?
Presently, the error message I have been troubleshooting is this:
index.esm.js:214 Uncaught TypeError: h(...) is not a function
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Module.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
but I don't think that is relevant as I have dug into it quite a bit.
Tech stack notes (I realize I am on an old version of Ruby but upgrading is unfortunately not an option):
* XML Version 1.0
* Ruby version: 1.8.6
* Ruby gems
cgi_multipart_eof_fix (2)
gem_plugin (0.2.3)
* json_pure (1.7.6)
* mongrel (1.1.5)
* rake (0.8.7)
* ruby-net-ldap (0.0.5)
* Apache version: Not used yet. Eventually Odin and Sonitor will be replaced with nifi.
* .NET version 4.0 (or 4.7)
Does anyone have advice on how to get my React component to render?
I have an app I developed in Android. I installed a VM with Mac, and I'm testing it in iOS. The app worked perfectly in Android, but in iOS it is not. When I use 'ionic serve' or 'ionic serve --lab' the browser show a white screen, and in the console I get this errors (link of image below):
Console
Here is some code from the index.html:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic/css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/bluebird.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>
<script src="lib/ionic/js/ionic-modal-select.min.js"></script>
<script src="lib/ionic/js/ionic-toast.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
I'm really lost here because the exact same files works OK for Android.
Which error you are posted, not library error.Error coming from app.js file.If you dont mind create a new ionic app and replace your file in new app.it will works.
I am trying out a Polymer Dart App under Cordova. So I started with the Dart Editor Sample App.
I use a recent version of Polymer so I had to edit the sample code. Here is my pubspec.yaml
name: cortst
description: Cordova Test Application
dependencies:
polymer: '>=0.15.1+3 <0.16.0'
transformers:
- polymer:
entry_points:
- web/cortst.html
And here is the combined HTML and Dart. I think the initialization uses the new/approved technique:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample App</title>
<link rel="import" href="clickcounter.html">
<link rel="stylesheet" href="cortst.css">
<script type="application/dart">
import 'dart:async';
import 'package:polymer/polymer.dart';
void main() {
initPolymer().run( () {
Polymer.onReady.then( (_) {
new Future( () {
// stuff goes here!
});
});
});
}
</script>
</head>
<body>
<h1>A Test</h1>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
To generate stand-alone JavaScript I run dart2js via the command line:
pub build --mode=debug
And these are the results:
Dartium (37.0.2062.120 (292122) via Dart Editor 1.7.2) - OK
Run as JavaScript on Chrome (38.0.2125.111 m) - OK
Run as JavaScript on Firefox (33.0.3) - OK
dart2js and run on Chrome - no shadow DOM.
dart2js and run on Firefox - OK
When it fails the click counter is rendered (invisibly) as
<click-counter count="5"></click-counter>
This Chrome problem matters because the standard web host on Android is Chrome.
For brevity, I have embedded the Dart script in the HTML. I get the same results when I use a separate .dart file.
Perhaps I have overlooked something - it wouldn't be the first time...
I'm setting up an AngularDart/PolymerDart project, but I keep running against the following error:
Breaking on exception: Module.DEFAULT_REFLECTOR not initialized for dependency injection. http://goo.gl/XFXx9G
Now I've read the page behind the url given at the end of the error and did some Stackoverflowing, but the only sollution I came across was adding -angular as a transformer in the pubspect.yaml. And so I did. But still I keep getting the same error and my project won't start.
My pubspec.yaml:
name: application
description: application
dependencies:
angular: '>=1.0.0 <2.0.0'
angular_node_bind: any
core_elements: '>=0.3.2 <0.5.0'
paper_elements: '>=0.5.0 <0.6.0'
polymer: '>=0.14.0 <0.16.0'
web_components: '>=0.9.0 <0.10.0'
dependency_overrides:
args: '>=0.10.0 <0.12.0'
code_transformers: '>=0.1.4+2 <0.3.0'
html5lib: '>=0.10.0 <0.13.0'
observe: '>=0.11.0 <0.13.0'
transformers:
- angular
- polymer:
entry_points:
- client/web/index.html
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application</title>
<!-- include the web_components polyfills with support for Dart. -->
<script src="../packages/web_components/platform.js"></script>
<!-- imports -->
<link rel="import" href="../packages/polymer/polymer.html">
<link rel="import" href="components/component.html">
</head>
<body>
<!--
don't put ng-app on html or body. the polymer build inlines
custom elements definitions, which can trigger bugs if the code
inlined is inside of ng-app
-->
<div ng-app>
<section>
<p>Angular</p>
<p>
<input type="text" ng-model="cool"> Angular binding: {{cool}}
</p>
</section>
<section>
<p>Polymer</p>
<my-element message="[[ cool ]]"></my-element>
</section>
</div>
<!-- initialize -->
<script type="application/dart" src='dart/init.dart'></script>
<script src="../packages/browser/dart.js"></script>
</body>
</html>
init.dart:
import 'package:polymer/polymer.dart';
import 'package:angular/application_factory.dart';
import 'package:angular_node_bind/angular_node_bind.dart' show NodeBindModule;
void main() {
initPolymer()
.run(() {
applicationFactory()
.addModule(new NodeBindModule())
.run();
});
}
It appears that the "web" folder MUST be in the same folder as your pubspec.yaml. I placed the web folder inside a folder "client", which caused the problem. Putting the web folder in the project root folder again fixed the issue.
In my Rails app, I have ui-bootstrap-0.2.0.js in the vendor/assets/javascripts directory. I have required the file in my application.js file.
I get an error when I specify the bootstrap as my dependency in this line, angular.module('myApp',['ui.bootstrap']);, as instructed to do here, http://angular-ui.github.io/bootstrap/
Chrome detects a Uncaught ReferenceError: angular is not defined at this defined module:
angular.module("ui.bootstrap", ["ui.bootstrap.accordion", ...]) in the ui-bootstrap-0.2.0.js.
However, angular.js catches an error No module:ui.bootstrap. So it seems both of these javascript files cannot see eachother. Is there a solution to this?
Here is how I did it in my project:
<script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-ui.min.js"></script>
<script type="text/javascript" src="libs/angular-resource.min.js"></script>
<script type="text/javascript" src="libs/ui-bootstrap-tpls-0.2.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
And this is how I set my application module:
var app = angular.module('myapp', ['ui.bootstrap','ngResource']);