Using Angular Service Providers in Service Portal

[jonlind]

Hello.   I'm trying to create an Angular Service Provider to share information amongst widgets.   There seem to be a lot of examples of Directives, but I have not been able to find an example of an Angular Service Provider in Service Portal for ServiceNow (you can see how this might be a tough item to search for).

Being intrepid I tried it anyway, and went and created a new Angular Provider of type "Service", named it "breadcrumbServiceProvider", and added it to the Angular Provider related list on my widget.

The widget's client script declaration looks like this:

The error I get from the browser on load is:

js_includes_sp.jsx?v=05-03-2016_1034&lp=Wed_May_04_13_01_59_PDT_2016&c=11_202:11755 Error: [$injector:unpr] Unknown provider: breadcrumbServiceProvider <- breadcrumbService

The provider is configured thusly:

So the question is: how do you set up and inject a Widget Angular Service Provider?

[fschuster · Accepted solution]

Hi Jon,

If I'm not mistaken you have to provide the name of the Service Provider to your controller - in your case that should be breadcrumbServiceProvider instead of breadcrumb.

Just built a quick example (based on this tutorial) to try and show-case. Worked fine for me:

[guy_boulton]

Hi,

I am experiencing the same error message but only in Edit Mode of the page Designer within Service Portal. It does not happen when I look at the page in Preview mode and the page and widgets work as expected.

A significant problem this creates is that due to the JavaScript error the edit page doesn't load properly so the Configuration page for that page is not available.

Initially I created a Service that had a few attributes and functions in it and added it to multiple Widgets. It worked fine but I was left scratching my head as to why the first widget on the page was not appearing in the column in the Editor. I then noticed the JavaScript error.

To troubleshoot I :

• Deleted everything I had done and then
• I created a new Service that does absolutely nothing. (See below)
• I created a new Widget that also does nothing except output some text in the html template section saying it does nothing.
• I applied the Service to the widget as an Angular Provider
• I then added the service to the widgets Controller
• As soon as I added the widget to a page I received this error message.
  • TypeError: config[provider.type] is not a function
  • Note: the widget at this point is visible in the editor
• Opening it in preview worked fine without any JavaScript error. When I toggle back to edit mode the error instead refers to the name of my Service
  • TypeError: [$injector:unpr] Unknown provider: CommServiceProvider <- CommService
  • Note: now the widget does not appear at all in the Editor. The column looks blank.
    

Here is my Service:

/* CommunicationService   */

function CommService() {

  /* I CURRENTLY DO NOTHING   */

}

/* Widget Controller */

Here is my Widget controller:

function(CommService) {

  /* widget controller */

  var c = this;

}

I also recreated the CalculatorService and MathService example that Frank posted. It also works fine in Preview mode but I get the same JavaScript error in Edit mode.

TypeError: config[provider.type] is not a function

I would be keen to know if you also get this error Frank?

Any thoughts?

cheers

Guy

[fschuster]

Hi Guy,

sorry - have been on vacation. Interesting, happens to my Calculator Widget as well. I'm gonna run this by the dev team and see if this is already a known issue.

Thanks!

[jamesfreund]

Any updates on this? I have no issues in preview mode or viewing the portal page itself when using a service provider. But like everyone else, when in edit mode it can't seem to find that provider.