Highcharts is not defined. Error log in console - javascript

Please help me. This error log in console in my angular app.
My App section:
angular.module('fbApp', [
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router',
'ui.utils',
'chieffancypants.loadingBar',
'ui.date',
'angular-underscore',
'highcharts-ng'
])
My index.html from bower:
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-underscore/angular-underscore.js"></script>
<!-- endbower -->
Where is my problem?

highcharts-ng depends on hightcharts so you need to install them both.
bower install --save highcharts
bower install --save highcharts-ng

I've come across exactly same problem. I think the answer is in the documentation. Check the git hub documentation Git hub documentation
I found the solution to this. Insert the below script tag in the index above the script tag highcharts-ng.js
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/src/highcharts-ng.js"></script>
This should remove the error.

Download highcharts.js and link it in your app. You only have the angular directive highcharts-ng .

Another way to do this via bower.json; Update the following dependencies.
"highcharts" : "*",
"highcharts-ng" : "*"
Run the bower update from the command line project directory.
Use the "highcharts-ng module
var myApp = angular.module('myApp',
[
"highcharts-ng",
"ngRoute",
"myApp.view1",
"myApp.view2",
"myApp.version"
]);
Include the following in the index.html or view
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>

It looks like highcharts.js is dependent on jQuery. Verify that jQuery is loading correctly and it's the correct version.

Related

Webpack replace content between html comment tags

How can i replace
<!-- vendors.js - Start -->
<script src="../node_modules/lodash/index.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script> <!--Replace with min.js-->
<script src="../node_modules/jquery-ui/ui/core.js"></script>
<script src="../node_modules/jquery-ui/ui/widget.js"></script>
<script src="../node_modules/jquery-ui/ui/mouse.js"></script>
<script src="../node_modules/jquery-ui/ui/sortable.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<!-- vendors.js - End -->
with
<script src="vendors.js"></script>
while webpack bundling ?
Can this be achieve using html-replace-webpack-plugin ?
All of the libraries you have listed are available on https://unpkg.com/.
https://unpkg.com/lodash#4.17.15/lodash.min.js
https://unpkg.com/jquery#3.4.1/dist/jquery.min.js
https://unpkg.com/jquery-ui#1.12.1/ui/core.js
https://unpkg.com/jquery-ui#1.12.1/ui/widget.js
https://unpkg.com/jquery-ui#1.12.1/ui/widgets/mouse.js
https://unpkg.com/jquery-ui#1.12.1/ui/widgets/sortable.js
https://unpkg.com/angular#1.7.8/angular.min.js
https://unpkg.com/angular-animate#1.7.8/angular-animate.min.js
My suggestion is to use: https://www.npmjs.com/package/webpack-cdn-inject and inject these dependencies into your HTML document(s) vs. trying to bundle them and add to your build times.

"Error: [$injector:unpr] Unknown provider:" when updating controller dependencies

I'm unable to get my project to run. It's fine until I...
Update my controller to include the "$ionicPlatform, $cordovaToast, $cordovaLocalNotification"
.controller('MenuController', ['$scope', 'menuFactory', 'dishes', 'favoriteFactory', 'baseURL', '$ionicListDelegate', '$ionicPlatform', '$cordovaToast', '$cordovaLocalNotification',
function ($scope, menuFactory, dishes, favoriteFactory, baseURL, $ionicListDelegate, $ionicPlatform, $cordovaToast, $cordovaLocalNotification) {
I attempt to run my project and get
Error: [$injector:unpr] Unknown provider: $cordovaLocalNotificationProvider <- $cordovaLocalNotification <- MenuController
Then Angular doc and other posts I've seen suggest that that $cordovaLocalNotification has been omitted or misspelled in the dependency injection for this controller, but I'm sure they're the same.
make sure that you have included all the required JS files that is required to work $cordovaLocalNotification.
<!-- ngCordova -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
var ctrls = angular.module('notiApp.controllers', ['ionic', 'ngCordova', 'ngCordova.plugins']);
Bingo! Thanks for that. It was causing me grief...fyi. I had that script reference, but the order was wrong.
It WAS
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>//THIS is the line
I change to the following and it resolved the issue.
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>//THIS is the line
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>

Concatenate and uglify with gulp into several files

As a result of this operation I need to obtain two files: vendors.js and bundle.js. They should also be uglified, but variable names must be consistent between them, but so far it either uglification or two files.
<!-- build:js1 vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- endbuild -->
<!-- build:js2 bundle.js -->
<script src="js/app.js"></script>
<script src="components/stores.js"></script>
<script src="components/userInfo/UserInfo.js"></script>
<script src="components/userMenu/UserMenu.js"></script>
<script src="components/components.js"></script>
<!-- endbuild -->
Please use the already minified versions provided by AngularJS itself. You should not uglify third party dependencies when these are already provided.
Hence you should concat angular and all other angular components into one vendor file and uglify and concat your own javascript.
When you take a look at path bower_components/angular/, there should also be a angular.min.js file (as well as the other angular components).
Take a look at my default setup for GulpJS and AngularJS at https://github.com/elgervb/skeletonSPA. I use a simular approach.
Try this:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concatJS = require('gulp-concat');
gulp.task('concat-js', function () {
gulp.src(['one.js', 'two.js'])
.pipe(concatJS('first.js'))
.pipe(uglify())
.pipe(gulp.dest('./javascript'));
gulp.src(['three.js', 'four.js'])
.pipe(concatJS('second.js'))
.pipe(uglify())
.pipe(gulp.dest('./javascript'));
});

Module 'datatables' is not available! You either misspelled the module name or forgot to load it

I am getting a module not available error when trying to load 'datatables' as part of my AngularJS app.
angular.module('pricingOptionsTable', ['resources.pricingOptions', 'datatables'])
.controller('pricingDataController', ['$scope', 'poResource', 'DTOptionsBuilder', PricingDataController])
.directive('pricingDataTable', ['$http', '$templateCache', '$compile', PricingDataTable]);
`
The module's controller is defined as:
function PricingDataController($scope, poResource, DTOptionsBuilder) {
In the index.html I have:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.js"></script>
I am using AngularJS 1.3.9, jQuery 2.1.3, Angular Datatables 0.4.0 and Datatables 1.10.4.
Has anyone run in to this issue with angular-datatables 0.4.0?
Just taking a quick peek at the module's definition on Github, it appears that the datatables module takes a dependency on the datatables.directives and datatables.factory defined (also in the git repository). The datatables.directives in turn has other dependencies (e.g. datatables.renderer, datatables.options, etc.
I believe your best bet in getting the main datatables module up and running is to first load the 'leaf' scripts of datatables (i.e. the scripts that have no dependencies), followed by the datatables.renderer (which only has dependencies on the 'leaf' scripts), followed by the datatables.directives script, then finally load the datatables script.
So it would look something like this:
`<script src='/some-path/datatables.util.js></script>
<script src='/some-path/datatables.factory.js></script>
<script src='/some-path/datatables.options.js></script>
<script src='/some-path/datatables.renderer.js></script>
<script src='/some-path/datatables.directive.js></script>
<script src='/some-path/datatables.js></script>`

AngularJS app not loading when using angulartics for Piwik

I'm trying to use this: http://luisfarzati.github.io/angulartics and running into some issues. I am not able to debug it and I am not finding any info about it anywhere.
In app.js, I am adding the Angularitics dependencies (to my existing ones):
var app = angular.module('shiftSwap', [
'ui.router'
, 'infinite-scroll'
, 'angulartics'
, 'angulartics.piwik'
]);
In my index.html, I have:
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-ui-router.min.js"></script>
<script src="js/lib/ng-infinite-scroll.min.js"></script>
<script src="js/lib/angulartics-piwik.js"></script>
<script src="js/app.js"></script>
When I load the app, I get the following error.
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-
beta.8/$injector/modulerr?p0=shiftSwap&p1….angularjs.org%2F1.3.0-
beta.8%2F%24injector%2Fmodulerr%3Fp0%3Dangulartics%...<omitted>...7)
This error links to this page, which gives me no information. https://docs.angularjs.org/error/$injector/modulerr?p0=shiftSwap&p1=undefined.
Would anyone have any idea of what may be happening?
Thank you!!!
I see in Angulartics repository that there are the following files:
angulartics.min.js
angulartics-piwik.min.js
angulartics-ga.min.js
angulartics-....min.js
So maybe did you forget to include angulartics.min.js? It doesn't appear in the index.html you posted above.

Categories