I used with my project this plugin angular-multi-select-tree in github.
This is the way I included it to my project:
installed from bower bower install angular-multi-select-tree -save
after this I got string in bower.json :
"angular-multi-select-tree":"*"
And add to index.js "multi-select-tree"
angular.module('xyzApp', ['multi-select-tree', '....']);
After run "Gulp serve" webpage doesn't work, i saw this error in console
Error: [$injector:modulerr] Failed to instantiate module multi-select-tree due to:
Error: [$injector:nomod] Module 'multi-select-tree' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
How can i fix this error? Or which plugin that can be used? necessary functionality:
Dropdown list
search drop-down list
multi select
grouping
Example:
Try the isteven-multiselect here is the link;
https://github.com/isteven/angular-multi-select
Related
I have a project (named xProject) setup as depicted in images below. As we can see a module named utils.js under commons/ is importing uuid module but it is not installed as a dependency in commons/pacakge.json. I have added commons as dependency in web/package.json: "commons": "file:../commons". When I import utils.js into a module MyModule.tsx under web/, it complains about following ERROR:
ERROR in ../commons/utils.js
Module not found: Error: Can't resolve 'uuid' in '/Users/xuser/myfolder/xproject/commons/'
I want webpack to use uuid from other dependencies whose internal dependency is 'uuid'. Is it possible? If yes, how? For example, node-sass is a package which has uuid as an internal dependency.
I did look for the solution whole last day but unfortunately I didn't get it working.
Thank you in advance for your help.
I have tried for custom D3 Power BI ,but showing me below error .I also reinstall pbiviz and node but showing same error .Need little help.
I tried adding different version older but not got success.
my node version is v12.16.1. and pbiviz 3.1.10 Now
PS C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard> pbiviz package
info Building visual...
info Start preparing plugin template
info Finish preparing plugin template
Error parsing bundle asset "C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\drop\visual.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.
Webpack Bundle Analyzer saved report to C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\webpack.statistics.prod.html
ERROR Failed to compile with 1 errors 10:43:12 PM
error in ./.tmp/precompile/visualPlugin.ts
Module build failed (from C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\precompile\visualPlugin.ts: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\\Users\\mahendra\\AppData\\Roaming\\npm\\node_modules\\powerbi-visuals-tools\\node_modules\\#babel\\preset-env\\lib\\index.js")
at getPlugin (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:67:11)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:62
at Array.map (<anonymous>)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:43
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\helper-plugin-utils\lib\index.js:19:12
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\config\full.js:199:14
at Generator.next (<anonymous>)
at Function.<anonymous> (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:26:3)
at Generator.next (<anonymous>)
at step (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:254:32)
at evaluateAsync (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:284:5)
at Function.errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:108:7)
at errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:70:18)
at async (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:183:31)
at onFirstPause (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:209:13)
at Generator.next (<anonymous>)
# multi ./.tmp/precompile/visualPlugin.ts
error Package wasn't created. 1 errors found
warn Please, make sure that the visual source code matches to requirements of certification:
info Visual must use API v2.5 and above
info The project repository must:
info Include package.json and package-lock.json;
info Not include node_modules folder
info Run npm install expect no errors
info Run pbiviz package expect no errors
info The compiled package of the Custom Visual should match submitted package.
info npm audit command must not return any alerts with high or moderate level.
info The project must include Tslint from Microsoft with no overridden configuration, and this command shouldn’t return any tslint errors.
info https://www.npmjs.com/package/tslint-microsoft-contrib
info Ensure no arbitrary/dynamic code is run (bad: eval(), unsafe use of settimeout(), requestAnimationFrame(), setinterval(some function with user input).. running user input/data etc.)
info Ensure DOM is manipulated safely (bad: innerHTML, D3.html(<some user/data input>), unsanitized user input/data directly added to DOM, etc.)
info Ensure no js errors/exceptions in browser console for any input data. As test dataset please use this sample report
info Full description of certification requirements you can find in documentation:
info https://learn.microsoft.com/en-us/power-bi/power-bi-custom-visuals-certified#certification-requirements
I sorted out after long trial and error.
Here are the steps. First, manually install the problematic dependencies:
npm install --save-dev #babel/core
npm install --save-dev #babel/preset-env
npm i #babel/plugin-proposal-numeric-separator
Second, go to file path in which the error is occurring (not in your code dir). In my case:
C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Note that this was found by examining the error message and noticing this line:
Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/index.js")
Finally, add the following lines to the file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator")); (Import dependency; anywhere above the definition of the export object _default)
"proposal-numeric-separator": _pluginTransformNumericSeperator (Add the dependency as a new export in the export object _default by adding a new key value pair)
Note that you may have to replace the path argument to require() with an absolute path to the location of #babel/plugin-proposal-numeric-separator in step 1 above if you are unable to resolve this during your next build.
Enjoy!
The root issue seems to be a problematic version of #babel/plugin-proposal-numeric-separator that powerbi-visuals-tools is depending on.
An alternative to the accepted solution is to install a working version of #babel/plugin-proposal-numeric-separator as a global dependency and then modify the powerbi-visuals-tools to use this instead of its packaged version. See steps below:
npm i -g #babel/plugin-proposal-numeric-separator
Locate the file that lists dependencies for the failing module. See the accepted answer for instructions, but it seems to be this path for Windows: <userDir>/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Add the following lines to this file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator"));
This imports our globally installed dependency: place anywhere above the definition of the export object _default
"proposal-numeric-separator": _pluginTransformNumericSeperator
Add the dependency as a new export in the export object _default by adding a new key value pair
You should now see the build succeed.
As a note, I'd generally avoid installing global dependencies like this. However, this may be the easiest workaround until the powerbi-visuals-tools package is updated to fix this issue. When this is done, I would recommend uninstalling the global dependency and reinstalling the powerbi-visuals-tools from scratch to undo our changes to the dependency file.
I want to install and use farmhash. But I'm getting the following error.
./node_modules/farmhash/index.js
Module not found: Can't resolve './build/Release/farmhash' in '/path/to/my_project/node_modules/farmhash'
Steps to recreate.
At the command line, I did
yarn add farmhash
Then imported using
import farmhash from 'farmhash';
Then tried to use with
const hash = farmhash.hash32('test');
I checked my node_modules directory to verify it installed to the correct location: node_node_modules/farmhash/index.js
What am I doing wrong and how can I correct this error?
I am trying to implement show more show less functionality in my project using angular. Following are the versions of angular, bootstrap and jQuery in my project.
"angular": "^1.6.0",
"bootstrap": "^3.3.7",
"jquery": "2.2.4"
I have added the bower component to add this functionality. I ran following command:
bower install angular-read-more --save
I have also included the JS files.
Then I added module to the app:
angular.module("app", ["hm.readmore"]);
When I am running the project, I am getting error in browser console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module regulationLibraryApp due to: Error: [$injector:modulerr] Failed to
instantiate module hm.readmore due to: Error: [$injector:nomod] Module
'hm.readmore' is not available! You either misspelled the module name
or forgot to load it. If registering a module ensure that you specify
the dependencies as the second argument.
Where I had mistaken? Is there any other easy way to implement this functionality?
Looks like your bower dependencies are not loaded before angular application is bootstrapped.
Load your bower dependencies before you load angular app.
For example
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-read-more/readmore.min.js"> </script>
<script src="/my_angular_app/app.js"></script>
You're probability missing ngAnimate dependency.
To get it work 'hm.readmore' uses: ngSanitize, ngAnimate both plugins.
So, you can download it from npm repository https://www.npmjs.com/package/angular-animate
I've installed angular-formly-templates-bootstrap via bower on a project that I've been working on. But when I try to inject it in angular, I receive the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bandar due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:nomod] Module 'formlyBootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.1/$injector/nomod?p0=formlyBootstrap
at http://localhost:3000/bower_components/angular/angular.js:68:12
at http://localhost:3000/bower_components/angular/angular.js:1949:17
at ensure (http://localhost:3000/bower_components/angular/angular.js:1873:38)
at module (http://localhost:3000/bower_components/angular/angular.js:1947:14)
at http://localhost:3000/bower_components/angular/angular.js:4355:22
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
at http://localhost:3000/bower_components/angular/angular.js:4356:40
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
The problem is, bower doesn't load angular-formly-templates-bootstrap in the browser. There are some other packages which are being loaded to the browser with bower. But I don't know what the problem is with formlyBootstrap.
Are you using gulp for inject bower dependencies? If so, find in gulp config something like that
exports.wiredep = {
exclude: [/bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
So all files ended with 'bootstrap.js' not injected. You can chage it with something like that
exports.wiredep = {
exclude: [/[^-]bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
Got the same error. I was working with gulp angular generator which seems to be ignoring formly bootstrap. I changed the main file in bower_components for angular-formly-bootstrap-template to dist/...bootstrap.min.js. Started working after that. Seems like the generator was ignoring files having bootstrap.js at the end