CODEWITHSUNDEEP
javascriptangularjselectronpaperjs
user2800708
user2800708

Reputation: 2000

TypeError when running Angular directive under electron?

I get this exception trace:

TypeError: element.get is not a function at link (http://localhost:9071/js/class-editor-canvas-directive.js:6:33) at invokeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8841:9) at nodeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8335:11) at compositeLinkFn (http://localhost:9071/bower_components/angular/angular.js:7731:13) at compositeLinkFn (http://localhost:9071/bower_components/angular/angular.js:7734:13) at publicLinkFn (http://localhost:9071/bower_components/angular/angular.js:7611:30) at http://localhost:9071/bower_components/angular-ui-router/release/angular-ui-router.js:4026:9 at invokeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8841:9) at nodeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8335:11) at compositeLinkFn (http://localhost:9071/bower_components/angular/angular.js:7731:13)

I'm trying to run an app based on angular.js and paper.js under electron. It works fine running on the web and using chrome as the UI. However, I also want to support a standalone UI using an electron wrapper.

The error above occurs on the last line below:

jModeller.directive('classEditor', function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {

        paper.setup(element.get(0));

When running on electron, the debugger reveals that the type of 'element' is:

element: JQLite[1]
   > 0: canvas
   length: 1
__proto__: Object[0]

But when running under chrome, the debugger shows the type of 'element' to be:

element: jQuery.fn.init[1]
   0: canvas
   context: canvas
   length: 1
__proto__: jQuery[0]

Why the difference? And is there some expression I can use instead of element.get(0) to get this angular directive running under electron?

=====

Some more details.

Here is the 'main.js' that is running under electron:

'use strict';

var app = require('app');
var BrowserWindow = require('browser-window');

var mainWindow = null;

var express = require('express');
var expressApp = express();

expressApp.use('/', express.static('../assets'));
expressApp.listen(9071);

app.on('ready', function() {
mainWindow = new BrowserWindow({
    height: 600,
    width: 800
});

mainWindow.loadUrl('http://localhost:9071/#/');    
});

So you can see I am serving up the application on port 9071, then just using electron to browse to that on localhost.

Within the index.html, all the javascript libraries are loaded:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" class="no-js" lang="en" ng-app="jModeller" id="ng-app">
  <head>
  <meta charset="UTF-8">

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/ng-sortable/dist//ng-sortable.min.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script>
<script src="bower_components/rfc6570/rfc6570.js"></script>
<script src="bower_components/angular-hal/angular-hal.js"></script>
<script src="bower_components/angular-slugify/angular-slugify.js"></script>
<script src="bower_components/ng-table/dist/ng-table.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
<script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script>
<script src="bower_components/angular-prompt/dist/angular-prompt.js"></script>
<script src="bower_components/angular-breadcrumb/dist/angular-breadcrumb.min.js"></script>
<script src="bower_components/highcharts/highcharts.js"></script>
<script src="bower_components/highcharts/highcharts-3d.js"></script>
<script src="bower_components/highcharts/modules/exporting.js"></script>
<script src="bower_components/underscore.string/lib/underscore.string.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/angular-toggle-switch/angular-toggle-switch.js"></script>
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/angular-progress-arc/angular-progress-arc.min.js"></script>
<script src="bower_components/angular-highcharts-directive/src/directives/highchart.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="bower_components/angular-async-series/dist/angular-async-series.min.js"></script>
<script src="bower_components/angular-ui-grid/ui-grid.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/ng-csv/build/ng-csv.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="bower_components/paper/dist/paper-full.min.js"></script>

Quite a lot of libraries, and certainly not all are needed. I just cut this list from another project I was working on. The problem seems to be though, that jquery does not get loaded correctly and made available to angular.

I can see under the dev tools network tab though that 'jquery.js' is succesfully loaded with a 200 status, when index.html is loaded.

Upvotes: 1

Views: 350

Answers (1)

user2800708
user2800708

Reputation: 2000

It works if I include jquery this way:

<script type="text/javascript">
   window.$ = window.jQuery = require(__dirname+'/js/jquery.js');
</script>

Apparently this is a known issue with jquery and electron.

Upvotes: 0

Related Questions