I have been using angular-chart.js with my app locally and I have not had a problem. However, when I deploy my app on Heroku, I my page breaks because it Chart.js is not deployed properly.
Uncaught SyntaxError: Unexpected token < Chart.min.js:1
Uncaught ReferenceError: Chart is not defined angular-chart.min.js:1
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=swellsApp&p1=Error%…swells.herokuapp.com%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463) angular.min.js:38
I don't get these error when I run it on my local server. I'm sourcing the scripts properly and have included my dependencies in my app as well. What I don't understand is that my other scripts have been loading with no problem. It's just Chart.js that is giving me the issue...
Any thoughts???
What I see under Resources in Chrome's DevTools
index.html
<head>
<meta charset="utf-8">
<title>Swells</title>
<!-- For Angular Routing -->
<base href="/">
<!-- CSS -->
<link rel="stylesheet" href="public/assets/libs/normalize-css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/libs/angular-chart.js/dist/angular-chart.min.css">
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- JAVASCRIPT LIBS -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-route/angular-route.min.js"></script>
<script src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="assets/libs/angular-messages/angular-messages.min.js"></script>
<script src="assets/libs/Chart.js/Chart.min.js"></script>
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
<!-- MAP API -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Controllers -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mapCtrl.js"></script>
<script src="app/controllers/surfCtrl.js"></script>
<script src="app/controllers/weatherCtrl.js"></script>
<script src="app/controllers/surfReportCtrl.js"></script>
<!-- Services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>
<script src="app/services/surfService.js"></script>
<script src="app/services/weatherService.js"></script>
<script src="app/services/surfReportService.js"></script>
<!-- Main Angular Files -->
<script src="app/routes.js"></script>
<script src="app/app.js"></script>
<!-- SET VEIWPORT FOR MOBILE -->
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
</head>
app.js
angular.module('swellsApp', [
'appRoutes',
'authService',
'userService',
'surfService',
'weatherService',
'surfReportService',
'mainCtrl',
'userCtrl',
'surfCtrl',
'mapCtrl',
'surfReportCtrl',
'weatherCtrl',
'ngMessages',
'ngAnimate',
'ui.bootstrap',
'chart.js'
])
//application configuration to integrate tokens into our requests
.config(function($httpProvider){
//attach auth interceptor to the http requests
$httpProvider.interceptors.push('AuthInterceptor');
});
I found an alternate solution to this problem. I sourced a CDN for Chart.js and that worked. It seems that Chart.js was deploying with my app for some reason so I decided to source it from a cdn and that did the trick
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
I ahve that error when I have a mistake on the src property of my libs.
check that this line is ok:
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
Maybe you misspell the src path.
What about if you change to this <script src="assets/libs/angular-chart/dist/angular-chart.min.js"></script> I think that angular-chart.js is not the name of the folder
Check your angular.json file for Chart.min.js and change both instances to all lowercase. Heroku is case sensitive.
Worked for me using Angular 13.
Related
I was trying to host an existed project on Firebase which already have a css and js file. But it didn't seem to include my css and js files into the website.
I followed all of these steps:
https://www.youtube.com/watch?v=meofoNuK3vo&index=21&list=PLl-K7zZEsYLmnJ_FpMOZgyg6XcIGBu2OX
The project directory now looks like this:
\public (folder) (containing: index.html 404.html)
\css (folder) (containing: style.css)
\js (folder) (containing: index.js)
firebase.json
.firebaserc
Here is the website: https://together-cb.firebaseapp.com/
The index file looks like:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<!-- update the version number as needed -->
<script defer src="/__/firebase/4.8.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-database.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script src="/__/firebase/4.8.0/firebase.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="main-view">
....
</div>
</body>
</html>
I had the same issue but I added this line below my body tag and it solved.
<script src="/__/firebase/6.1.1/firebase-firestore.js"></script>
also, you can see the instruction here
https://firebase.google.com/docs/web/setup
Make soure that all your assets(css,js,img) and html are in /public
Hey I want to use this module into mine :
https://github.com/720kb/angular-datepicker
I include css here :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
<link rel='stylesheet' href='/stylesheets/main.css' />
<link href="/stylesheets/sass/vendors/font-awesome.min.css" rel="stylesheet">
</head>
<body>
and on end body :
</div>
<% include partials/footer.ejs %>
<script src="/javascripts/angular-datapicker.js"></script>
</body>
</html>
And when I open page in console I see error :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module 720kb.datepicker due to:
[$injector:nomod] Module '720kb.datepicker' 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.6.4/$injector/nomod?p0=720kb.datepicker
also I add inside module :
angular.module('app', ['angular.datepicker'])
How can I repair this?
EDIT:
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/angular-datapicker.js"></script>
<script src="/javascripts/angular-datepicker.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
Why the top link of angular-datapicker.js is showing error "cant include script" in console where second link bottom loading, and all is ok? if that is the same?
This is a complete stab in the dark, as you have not provided any reproducible sample.. but by just looking at the snippet you're provided... my best guess is that you're not using any dependency managers etc, and thus are relying on the order of when your scripts are loaded.
If you're app is then inside the body of the app... and you then only load the date-picker at the end... you'd see the problem you're experiencing.
You also have a typo in your file name.
A potential solution could be:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<!--move the datapicker script to here-->
<script src="/javascripts/angular-datepicker.js"></script>
<!--rest omitted for brevity-->
</head>
You've misspelled it to angular-datApicker.js
It should be angular-datEpicker.js
It looks like I can't instantiate my module. Here is my files :
--tv
-- contents (folder)
-- contents.template.html
-- contents.component.js
-- index.html
-- bootstrap.js
Now, here's the code :
Contents.component.js :
angular
.module('contents', [])
.component('myContents', {
controller: contentController,
templateUrl: 'contents/content.template.html',
});
function contentController() {
console.log('Le content est appelée !');
}
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TV</title>
<!-- SCRIPT DE CONNEXION -->
<script src="bower_components/angular/angular.js"></script>
<script src="bootstrap.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
</head>
<body ng-app="app">
<my-contents></my-contents>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>
Finally bootstrap.js :
angular
.module('app', ['ngComponentRouter', 'contents'])
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})
.value('$routerRootComponent', 'myApp')
.component('app', {
});
And the error catched in the browser console :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module contents due to:
[$injector:nomod] Module 'contents' 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.5.8/$injector/nomod?p0=contents
minErr/<#http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
module/<#http://127.0.0.1:8080/bower_components/angular/angular.js:2082:17
ensure#http://127.0.0.1:8080/bower_components/angular/angular.js:2006:38
module#http://127.0.0.1:8080/bower_components/angular/angular.js:2080:14
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:4617:22
forEach#http://127.0.0.1:8080/bower_components/angular/angular.js:321:11
loadModules#http://127.0.0.1:8080/bower_components/angular/angular.js:4601:5
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:461
I made a copy/paste of another project that I built yesterday that works. I have no idea why it's not working.
You are bootstrapping your app, then you load the contents script. Change their order, like this:
<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>
I'm doing some tests with Angular, and wanted to try this cool library to make a test applcation, but it's not working:
ReferenceError: Chart is not defined angular-chart.js:13:5 Error:
[$injector:modulerr]
http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=chartist&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js
This is my HTML template:
<!DOCTYPE HTML>
<html ng-app="chartist">
<head>
<meta charset="UTF8">
<!-- Plugins/Frameworks !-->
<script type="text/javascript" src="plugins/angular.js"></script>
<script type="text/javascript" src="plugins/angular-route.js"></script>
<script type="text/javascript" src="plugins/angular-chart.js"></script>
<!-- JS !-->
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- <script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/services.js"></script> !-->
<!-- Stylesheets !-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
</head>
<body>
<div ng-view>
</div>
</body>
</html>
And I inject the dependency in the module by this way:
var app = angular.module('chartist', ['ngRoute', 'controllers', 'chart.js']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
Why can't I use Chart.js? Is some version problem? I will be glad is someone helps.
If you closely look at error, it does clearly said that
ReferenceError: Chart is not defined angular-chart.js:13:5 Error:
[$injector:modulerr]
Basically angular-chart.js doesn't work stand alone API. It is just wrapper directive to make it compatible very easily with AngularJS code. If you look at angular-chart.js code, you will come to know that it uses Chart object, which is come from chart.js API.
To fix you problem you need to add chart.js reference before angular-chart.js as, Chart object will available render chart.
So do add chart.js cdn reference reference before angular-chart.js to make your code working.
I'd also prefer you to go through the angular-chart.js Getting started Doc
Sample Here
This is the follow up of question Grid For HTML app's based on this answer
I've tried to create the data table using https://www.datatables.net/ the js files coming with this added to my existing project folder
and following is my <head> tag
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>AndRemedy</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="jqm.autoComplete-1.5.2-min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<!-- DataTable reference starts here -->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
</head>
But when I run this getting
Uncaught TypeError: Cannot read property 'orientation' of undefined : jquery.mobile-1.0rc1.min.js:45
Note : Am trying to develop a hybrid app using PhoneGap,HTML5
As the error says, there's a TypeError in you jquery.mobil script. You can try to update it with the last version. Don't forget the stylesheet.
If you still have an error, try the uncompressed version.
You are using referencing two jquery files in your script. Only one is needed. Remove the first one and move the rest of the jquery and it's dependency files to the body tag.