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>
Related
I managed to instal Tween js npm install tween but i can't import it to my component ?
My lib is install in node_modules/tween.
I tried :
import * AS TWEEN from 'tween/tween.js'
import {TWEEN} from 'tween'
But it's not working.
Any ideas ?
Probably not the best way, but the way I do this sometimes:
Include the script in your index.html file:
<head>
...
<script src="path/to/script"></script>
...
</head>
Access the script through window object:
window.SCRIPTNAME
Example with screenfull.js:
<script src="/assets/scripts/screenfull.min.js"></script>
I access it like this in my code:
window.screenfull
I'have been struggling with the similar problem from two days. Here is what I got.
npm install #types/tween.js --save
npm install tween.js --save-dev
The package name after the #types/ must be the same as the second one. I was stupid installed npm install tween --save-dev instead of tween.js before, and I had no idea what was wrong, wasted hours to figuer this out.
And in your tsconfig.json add
"compilerOptions":{..."types":[..."tween.js"]}
then you can
import * as TWEEN from "tween.js"
Hope this could help.
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.
I try to work with AngularJS and Polymer (i actually use AngularJS for the Services eg. Token Auth and Polymer for the Material Design ) so i ask a simple method to build the scafolding for such kind of App (Polymer + AngularJS - localhost run with grunt) ? For the moment when i install :
yo angular MyApp
i have the bower_components in the root directory and if i try to install Polymer through :
bower install --save Polymer/polymer
So i install the Polymer in the AngularJS bower_components, (if i use the yo polymer generator the bower_components folder is in the /root/app/ folder and not in) And when i use grunt serve i get the Error (example with the core-toolbar) :
core-toolbar was not injected in your file.
Please go take a look in "/project-root/bower_components/core-component-page" for the file you need, then manually include it in your file.
so i think that i need to change something in the Gruntfile.js, but i do not know what ! Maybe is better use two bower_components folders ?
I solved the Problem, so i used the AngulaJS Generator for Yeoman, after that i moved the folder bower_components from the /project_root folder to the /project_root/app folder, so i modified the .bowerrc file with the new path of the bower_components folder :
{
"directory": "app/bower_components"
}
So now i can use bower to in install the Polymer elements that i need, with bower as usual :
bower install Polymer/core-toolbar
I do not use the --save for save the dependency in the package because when grunt/bower try to insert the link in the index.html file it fail, so
delete the Polymer dependencies from the bower.json file and add them manually, other hint remove the link already added by grunt/bower about polymer in the index.html file and add the webcomponents.js :
<!-- Polymer Section -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- My imports -->
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
I'm trying to use ngSanitize so that I can inject html content ( external) into my app. However I got stuck at the ngSanitize installation. If I add it into my app module it stops working . Should I download this from somewhere ? Angularjs docs don't say anything.
var crmApp = angular.module('crmApp', [
'ngRoute',
'crmControllers',
'ui.bootstrap',
'ngSanitize',
]);
Install bower. You want bower.
npm install -g bower
Go to your project root and install ngSanitize:
bower install angular-sanitize --save
bower install downloads the script for you. Include the JavaScript in your app:
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
If you want to use CDN resources without download go to https://code.angularjs.org/ and click on version you want .Will find all the various resources available there and then you can copy location straight into script tag:
<script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>
install
npm install --save angular-sanitize
import in app module
import ngSanitize from "angular-sanitize";
add it to your module
angular.module("app", [ngSanitize])
use in component
controller: class appController {
constructor($sanitize) {
this.$sanitize = $sanitize;
this.text = this.$sanitize('text to be sanitized');
}
}
Yes, you need to download and include it: https://github.com/angular/bower-angular-sanitize
I installed the generator-angular with yeoman:
Inside the bower.json I see this dependency which I also agreed to install.
but now I see I do need the angular ui router not the default angular-route.
Is this the angular core routing?
If yes why can it be installed extra?
If no what is this angular-route then? Googling it gives nothing unique...
"angular-route": "1.2.6",
with bower:
bower install --save angular-route
in the main page :
<script src="/bower_components/angular-route/angular-route.js"></script>
in your app:
angular.module('myApp', ['ngRoute']);
its all!
if you want more automatic import, you can install wiredep, wiredep injects yours dependencies into your source code, reading the bower.json file in this case.
That would be the bower package to install the ngRoute module. The source is found at:
https://github.com/angular/bower-angular-route
At a Windows cmd prompt:
> cd <path to your project>
> bower install angular-route
Bower will download to:
<path to your project>\bower_components\angular-route
And you can reference in your .html file via relative path:
<script src="bower_components/angular-route/angular-route.js"></script>