Pentaho

 View Only

 add angular js as resource in dashboard

  • Pentaho
  • Ctools
  • Pentaho
Raj Karan's profile image
Raj Karan posted 01-16-2018 19:33

I want to add AngularJS in my dashboard. I am aware that AngularJS is not AMD module so I will have to add it to shim, which I am trying to do.

var requireConfig = requireCfg.config; if(!requireConfig['amd']) { requireConfig['amd'] = {}; } if(!requireConfig['amd']['shim']) { requireConfig['amd']['shim'] = {}; } requireConfig['amd']['shim']["cde/resources/public/AngularJS in Dashboard/angular.min"] = { exports: "angular" }; requirejs.config(requireCfg); define([     "cdf/lib/jquery",     "amd!cdf/lib/jquery.chosen",     "amd!cde/resources/public/AngularJS in Dashboard/angular.min" ], function($, jQuery, angular) {    console.log(jQuery, angular) });

Dashboard is sitting in public/AngularJS in Dashboard/ directory.

When I runs this I gets timeout error.

Uncaught Error: Load timeout for modules: amd!cde/resources/public/AngularJS in Dashboard/angular.min,cde/resources/public/AngularJS in Dashboard/angular.min http://requirejs.org/docs/errors.html#timeout     at C (require.js:8)     at D (require.js:13)     at require.js:14

What am I missing?


#Ctools
#Pentaho
Attachment  View in library
add angular js as resource in dashboard 59 KB
Data Conversion's profile image
Data Conversion posted 01-25-2018 14:47

Please avoid using white spaces in paths.

Attached is a working sample.

Caution, the Angular components will have a lifecycle (Angular Docs ) different from the lifecycle of the CDF dashboard and components (e.g. cdf/Dashboard.lifecycle.js at master · webdetails/cdf · GitHub , cdf/UnmanagedComponent.js at master · webdetails/cdf · GitHub ), so you might bump into some synchronization difficulties here.

Also, Angular tries to load window.jQuery (angular.js/Angular.js at master · angular/angular.js · GitHub ), so if multiple versions of jQuery are loaded "randomly" without using noConflict (https://api.jquery.com/jquery.noconflict/ ), you might not know which version will be used by Angular.

Data Conversion's profile image
Data Conversion posted 08-14-2019 20:16
Attachment  View in library
AngularJS_in_Dashboard.zip 59 KB

Related Content