# Problem with an application kibana plugin

**URL:** <https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920>\
**Category:** Kibana\
**Created:** [January 22, 2016, 7:09pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920 "2016-01-22T19:09:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![michele\_crudele](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@michele\_crudele](https://discuss.elastic.co/u/michele_crudele)\
**Post date:** [January 22, 2016, 7:09pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/1 "2016-01-22T19:09:59Z")

</div>

I'm trying to create a kibana plugin of type app (named **myplugin** below). I did the following:

**app.js file:**  
require('ui/autoload/all');  
require('plugins/myplugin/mypluginController');  
require('plugins/myplugin/less/main.less');

var chrome = require('ui/chrome');  
chrome.setNavBackground('#222222')  
.setTabs([])  
.setRootTemplate(require('plugins/myplugin/templates/index.html'))  
.setRootController('myplugin', 'MypluginController');

**mypluginController.js file:**  
// Create an Angular module for this plugin  
var module = require('ui/modules').get('myplugin');

module.controller('MypluginController', function ($scope, $route, $interval) {  
$scope.title = 'My Plugin';  
$scope.description = 'My simple app plugin doing nothing';  
});

**index.html file:**

## Congratulations

You've successfully created your first Kibana Plugin!

# {{title}}

{{description}}

**index.js file:**  
module.exports = function (kibana) {  
return new kibana.Plugin({  
id: 'myplugin',  
name: 'myplugin',  
require: ['kibana', 'elasticsearch'],  
uiExports: {  
app: {  
title: 'MyPlugin',  
description: 'My simple plugin doing nothing',  
main: 'plugins/myplugin/app',  
injectVars: function(server, options) {  
return options;  
}  
}  
},

```
config: function (Joi) {
  return Joi.object({
    enabled: Joi.boolean().default(true),
  }).default();
},

init: require('./init.js')

```

});

};

I installed the plugin onto installedPlugins of my kibana server started in dev mode. I correctly see myplugin application among the ones I have installed (kibana, sense, timelion). However, when I select myplugin I cannot see the angular expressions {{...}} resolved in the index.html template. It seems like myplugin angular module was not bootstrapped. What did I miss ? Thanks in advance.

p.s. I'm using the Kibana 5.0.0-snapshot (what I read from the [README.md](http://README.md) file), which I git cloned a couple of days ago.

---

<div class="post-metadata">

**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\
**Post date:** [January 22, 2016, 8:11pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/2 "2016-01-22T20:11:09Z")

</div>

Hrm, that's not good; something might be wrong with the generator. I'm looking into it now, I'll let you know what I find.

---

<div class="post-metadata">

**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\
**Post date:** [January 23, 2016, 12:30am UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/3 "2016-01-23T00:30:01Z")

</div>

OK, I think I figured it out.

In your controller, you are still using the `$route` provider, even though you aren't consuming it.

Best solution is to remove it.

If you want to use that provider, you need to include the module where it's defined, [as used in the generator](https://github.com/elastic/generator-kibana-plugin/blob/master/generators/app/templates/public/app.js#L10-L23). `require('ui/routes').enable();` would get you there, but you're not using it here, just remove it for now.

As an aside, you've encouraged me to fix the generator now, so thanks for that ;). Now I just need to get a hold of someone with npm publish access.

---

<div class="post-metadata">

**Author:** ![michele\_crudele](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@michele\_crudele](https://discuss.elastic.co/u/michele_crudele)\
**Post date:** [January 25, 2016, 12:50pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/4 "2016-01-25T12:50:34Z")

</div>

Thanks Joe,

I made progress following your suggestions: removing the $route parameter from the myplyginController.js file works, I get {{}} expressions resolved.

So, I tried to get the generator stub working. I modified the code as follows:

```auto
// Create an Angular module for this plugin
var module = require('ui/modules').get('myplugin');

var html = require('plugins/myplugin/templates/index.html');

var routes = require('ui/routes');
routes.enable();

routes.when('/myplugin', {
  template: html,
  resolve: {
    currentTime: function ($http) {
      return $http.get('/myplugin/api/example')
      .then(function (resp) {
        return resp.data.time;
      });
    }
  }
});

module.controller('MypluginController', function ($scope, $route, $interval) {
  $scope.title = 'My Plugin';
  $scope.description = 'My simple app plugin doing nothing';

  var moment = require('moment');
  var currentTime = moment($route.current.locals.currentTime);
  $scope.currentTime = currentTime.format('HH:mm:ss');
  var unsubscribe = $interval(function () {
    $scope.currentTime = currentTime.add(1, 'second').format('HH:mm:ss');
  }, 1000);
  $scope.$watch('$destroy', unsubscribe);
});

```

With those changes the plugin got back in error: {{}} expressions not resolved, as reported in my first post.  
I'm able to see expressions resolved only if I remove any reference to `$route.current`. I changed the code to inspect $route:

```auto
module.controller('MypluginController', function ($scope, $route, $interval) {
  $scope.title = 'My Plugin';
  $scope.description = 'My simple app plugin doing nothing';

  $scope.currentTime = JSON.stringify($route);
});

```

and I get this json for the $route. It seems $route.current is not set.

```auto
{
    "routes": {
        "/": {
            "template": "<div class=\"container\" ng-controller=\"MypluginController\">\n <div class=\"row\">\n <div class=\"col-12-sm\">\n <div class=\"well\">\n <h2>Congratulations</h2>\n <p class=\"lead\">You've successfully created your first Kibana Plugin!</p>\n </div>\n <h1>{{title}}</h1>\n <p class=\"lead\">{{description}}</p>\n <p>The current time is {{currentTime}}</p>\n </div>\n </div>\n</div>\n",
            "resolve": {
                
            },
            "reloadOnSearch": false,
            "caseInsensitiveMatch": false,
            "originalPath": "/",
            "regexp": {
                
            },
            "keys": []
        },
        "": {
            "redirectTo": "/",
            "originalPath": "",
            "regexp": {
                
            },
            "keys": []
        }
    }
}

```

Can you explain (or point me to any article) how the route provider works? I think I missed the basics of kibana architecture. Which other providers should I know to effectively implement a plugin? Thanks very very much for your help.

---

<div class="post-metadata">

**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\
**Post date:** [January 25, 2016, 5:35pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/5 "2016-01-25T17:35:55Z")

</div>

I don't immediately see anything wrong with what you've posted, but I also haven't tried running it yet.

One thing that comes to mind is if you're running against the master branch of Kibana, we made a change where we're forcing development to use SSL and a basePath now, two things a lot of our plugins were doing wrong. I fixed this [in the generator](https://github.com/elastic/generator-kibana-plugin/blob/master/generators/app/templates/public/app.js#L17) last week, but it's not on npm yet. So, it's possible that's the issue.

I'd recommend checking your browser's developer console and seeing what errors you see. I'm sure there's _something_ being reported, and seeing the error will hopefully guide you to a solution. At the very least, you can post the error and we'll be better able to help out.

---

<div class="post-metadata">

**Author:** ![michele\_crudele](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@michele\_crudele](https://discuss.elastic.co/u/michele_crudele)\
**Post date:** [January 25, 2016, 10:43pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/6 "2016-01-25T22:43:13Z")

</div>

Thanks, I'll try the fix you made in the generator. Actually I'm running  
kibana with `npm start -- --no-ssl`. Is that a problem?

---

<div class="post-metadata">

**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\
**Post date:** [January 25, 2016, 11:16pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/7 "2016-01-25T23:16:13Z")

</div>

`--no-ssl` is fine. You can also use `--no-basepath` if you rather not deal with that right now as well.

It's good to run with both enabled, to make sure your plugin actually works in all configurations, but as a short-term fix, it's an option.

We did push a new version of the generator to npm a little while ago too. If you made that small change by hand though, you should be fine.

---

<div class="post-metadata">

**Author:** ![michele\_crudele](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@michele\_crudele](https://discuss.elastic.co/u/michele_crudele)\
**Post date:** [January 26, 2016, 10:12am UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/8 "2016-01-26T10:12:31Z")

</div>

Joe,

I updated the generator and created a brand new plugin using it. Now it works, thanks.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 6, 2017, 2:04pm UTC](https://discuss.elastic.co/t/problem-with-an-application-kibana-plugin/39920/9 "2017-07-06T14:04:15Z")

</div>