Probably a dupicate (Failed to instantiate module error in Angular js) but the given measures (including ng-route in HTML didn't solve the problem).
This is the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module coursemate due to:
Error: [$injector:nomod] Module 'coursemate' 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.
this is my app.js
var coursemate = angular.module('coursemate', ["ngRoute"]);
coursemate.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "view1.html"
})
.otherwise({
redirectTo : '/'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
this is my index.html
<!DOCTYPE html>
<html lang="de" ng-app="coursemate">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CourseMate</title>
<base href="/CourseMate/" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<ng-view>
</ng-view>
</body>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- AngularJS reditect -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>-->
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="/app.js"></script>
</html>
I can not find my mistake as I don't think that I have initialized the app in a wrong way?
Remove the ";" after redirectTo: '/'. And make sure that you have all your reference in your CourseMate directory.
Related
I am trying to add a local file to the HEAD section of index.html in my VueJs project.
index.html
<!doctype html>
<meta charset="utf-8">
<html lang="en">
<head>
<!-- https://npms.io/search?q=vue%20split -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="../src/assets/js/myfile.js"></script>
<title>demo</title>
</head>
My file structure is as follows:
/path/to/project
/public
index.html
/src/assets/js/myfile.js
When I add the javascript file, it seems to be interpreted as an HTML file, so in the console, I see the following error:
Uncaught SyntaxError: Unexpected token <
When I look at the source in the Chrome browser, I see that the js in interpreted as an HTML file.
I am having a problem with implementing Highcharts in my Angular/Node/Express app. Using the highcharts-ng directive https://github.com/pablojim/highcharts-ng
I keep getting the following error in my console:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=stocksApp&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A20%3A390)
I have this in the head of my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--link custom CSS file -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/app.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
My template file:
<div class="container">
<highchart id="chart1" config="chartConfig"></highchart>
</div>
My Angular JS config:
angular.module("stocksApp", ['ngRoute', 'highcharts-ng'])
.config(function($routeProvider){
$routeProvider
.when("/", {
templateUrl: "stocks.html",
controller: "mainController",
});
})
Can anyone help me what this error is about?
I presume that you have installed the highcharts-ng.js from the Node and it seems you have not included the same in your <script> block. You can find it under your node_modules directory.
Also as Steve Pitis pointed out, You need move your <script src="https://code.highcharts.com/highcharts.js"></script> before your app.js script inclusion.
Hope this helps!
I hosted my angular App on Amazon Web Services S3. It is working like a charm in Firefox and IE but not in Chrome. In console I keep receiving :
(index):1 Uncaught SyntaxError: Unexpected token <
(index):1 Uncaught SyntaxError: Unexpected token <
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Application</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link href="lib/angular-material/angular-material.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- js libs -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- angular material requirements -->
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-aria/angular-aria.min.js"></script>
<script src="lib/angular-messages/angular-messages.min.js"></script>
<!-- angular material -->
<script src="lib/angular-material/angular-material.min.js"></script>
<!-- your app's js -->
<script src="modules/Add/add.js"></script>
<script src="js/all.min.js"></script>
</head>
<body ng-app="Application">
<div class="ng-main" ui-view ng-cloak></div>
</body>
</html>
CORS are activated! Do you have any idea? Any help would be appreciated!
PS : Locally, with npm start, it is also working on chrome without any problem!
All I had to do is CTRL+MAJ+R on Chrome and it is working like a charm! Solved
What is wrong with my code below?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoSystem - SBM ITB Jakarta</title>
<!-- Core CSS - Include with every page -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- Page-Level Plugin CSS - Dashboard -->
<link href="../css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
<link href="../css/plugins/timeline/timeline.css" rel="stylesheet">
<!-- SB Admin CSS - Include with every page -->
<link href="../css/sb-admin.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- Core Scripts - Include with every page -->
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- Page-Level Plugin Scripts - Dashboard -->
<script src="../js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="../js/plugins/morris/morris.js"></script>
<!-- SB Admin Scripts - Include with every page -->
<script src="../js/sb-admin.js"></script>
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script src="../js/demo/dashboard-demo.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
My bootstrap modal dialog is not working when I use SbAdmin template. But, when I use general template from bootstrap, my modal dialog is working properly.
Hahaha.. how stupid I am...
Just remove this code :
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script src="../js/demo/dashboard-demo.js"></script>
I'm using javascript to control a modal for a log in and registration page.
However I cant seem to get the javascript to fire.
Here is the header for my page:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site </title>
<link rel="icon" href="myfavicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Landing Page CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery - UI CSS - Both v 1.11 and 2.1 -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- Starts all the Javascript-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<!-- Javascript for the admin page -->
<script src="js/sb-admin-2.js"></script>
<!-- jQuery - Both v 1.11 and 2.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Validator-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<!-- The Validator for the forms-->
<script src="js/validator.js"></script>
<!-- My Custom Javascript functions-->
<script src="js/mymain.js"></script>
My Login Function are held within the /js/mymain.js script. I also have the following call to the login function in a document.ready() within the <head> of this page.
$('#loginBtn').click(function(e){
alert('cliked');
e.preventDefault();
login();
});
The problem is that the alert given above is not firing, which suggests that there is something broken in the javascript, but I cant work out what it is.
All the Modals are as per the Bootstrap site, and are ID'd appropriately. Its just a problem with the Javascript/Jquery.