I want to work with angular-chart in my project so I have installed chart.js and angular-chart js with bower with following steps
add in .bowerrc
{
"resolvers": [
"bower-npm-resolver"
]
}
and than
npm install -g bower-npm-resolver
bower install npm:chart.js --save
bower install --save angular-chart.js
my bower_components folder also have angular-chart.js and chart.js folder
|-- angular
|-- angular-chart.js
|-- chart.js
as I do not add anything in index.html , gulp automatically add all bower when I run gulp serve components js in index.html when render ( see below )
<script src="../bower_components/chart.js/src/chart.js"></script>
<script src="../bower_components/angular-chart.js/dist/angular-chart.js"></script>
it gives errors in console
chart.js:4 Uncaught ReferenceError: require is not defined
angular-chart.js:23 Uncaught Error: Chart.js library
needs to be included, see http://jtblin.github.io/angular-chart.js/
I had the same problem after installing with Bower.
The solution as proposed in https://github.com/jtblin/angular-chart.js/issues/466 was to get specific versions of chart.js and angular-chart.js (tested with angular 1.4.0)
Edit your bower.json file to match these versions:
"chart.js": "npm:chart.js#2.1.0",
"angular-chart.js": "1.0.1"
and then run: bower uninstall angular-chart.js chart.js to un-install conflicting versions and finally run bower install to install the required versions.
Related
I am new in this. I am trying to create a react app with bootsrap 4. I am using reactstrap following the next steps:
create-react-app my-app
npm install bootstrap --save
npm install --save reactstrap#next react react-dom
Import Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
But when I start my app, I am getting this error:
Failed to compile.
./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap.css' in 'D:\React\my-app2\src'
I used to use bootstrap with CDN, you know, in my html page, link rel="stylesheet" ... etc and script src=""... etc. But using reactstrap, where are the js files? (jquery, popper, bootstrap) (are all together when I run npm install bootstrap --save ?)
Thanks
As you see from the error, it tries to look for bootstrap/dist/css/bootstrap.css inside your src folder. But if you look at your project files, you will notice that the bootstrap folder is located 1 level up (in the root) inside node_modules folder.
So either search and correct your path to:
../node_modules/bootstrap/dist/css/bootstrap.css.
Or add (if you still haven't done this) a reference to your index.js:
import '../node_modules/bootstrap/dist/css/bootstrap.css'.
This is the files tree:
+-node_modules
|-bootstrap
|-dist
|-css
|-bootstrap.css
+-src
|-index.js
I my project I came into an issue about the package of angular-cookies.
I have download the package and place it in my project. And as usually, in index.html, I add a script tag:
<script src="vendor/angular-cookies/angular-cookies.min.js" charset="UTF-8"></script>
But when the pages loaded I got an error message:
Uncaught TypeError: c.module(...).info is not a function at angular-cookies.min.js:7
in the package, it uses angular.module.info but it is not regarded as a function?
So what is the reason for this issue? Is it because version issue? Any help
I had the same problem with a recent bower update I've done. I don't know if the angular 1.6.3 is stable so I went to https://code.angularjs.org/latest/ and I saw that is 1.5.8 angular version which is used.
So to resolve it, I added these versions in my bower.json :
"dependencies": {
"angular-cookies": "1.5.8",
},
"resolutions": {
"angular": "1.5.8"
}
You should install particular dependecies according to angular.You can achieve it by using bower install like this:
bower install angular-cookies#1.5.8
bower install angular#1.5.7
I've followed the following steps :
bower install ng-ckeditor
added <script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script> in index.html
added in app.js like angular.module('MyApp',['ngCkeditor'])
but now when i'm running the app i'm getting this issue, how to resolve it ?
ng-ckeditor internally uses ckeditor, so you should refer ckeditor.js before ng-ckeditor.
Follow the steps mentioned below
sudo npm install ckeditor
bower install ckeditor
bower install ng-ckeditor
add the following lines in index.html
<script src="bower_components/ckeditor/ckeditor.js"></script>
<script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script>
I'd like to use the angular-ui filters package and I'd like to install it through bower. I've run bower install --save angular-ui which installs it and inserts it into the bower.json file.
Unfortunately it doesn't seem to actually import the files into the project. I've already got ui.bootstrap in there, I can't find any instructions to install the filters part.
I've seen issues where the folder already exists in bower_components and so bower assumes that its already there and doesn't add the files.
bower uninstall angular-ui
check that the angular-ui folder isn't in bower-components and if it is then delete it.
bower install angular-ui --save
I'm using the yeoman generator-gulp-angular to scaffold my app. I installed ng-18next with bower, and the package and it's dependency were both correctly installed in the bower_components directory. However, when I run gulp serve and view the source the components aren't being injected into page, so I get a module instantiation error. If I hard code the deps into the page there are no errors. I also tried bower install --save and the deps are inserted into the bower.json file correctly. Any ideas?
Thanks.
I had hard-coded script references in index.html. Even though they were commented, this caused them not to be injected with wiredep.