I know this is going to be a very simple error I am missing.
In my Angularj App, Error: Failed to instantiate module myApp due to: persists on showing. I know this down to the module not being loaded before being called by my own but I have been staring at my code trying to understand why it won't load i.e my own script loading before the module CDNs, spelling mistake etc.
My scripts are loaded like so:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<title>Angular</title>
</head>
And in my app.module.js I try to inject two modules chartjs and uirouter. I switch them about and which ever is first it still flags an error
var app = angular.module('myApp', ['chart.js', 'ui.router']);
Question
Why are the modules failing to load? Sorry for the simple question.
You are missing the reference for angular-chart.js and reorder the references as follows,
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
Related
This is my Html. I have given paths like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="app/components/root/root.css">
<link rel="stylesheet" type="text/css" href="app/components/imgComponent/imgComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/typesComponent/typesComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/sourceComponent/sourceComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/severitiesComponent/severitiesComponent.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body ng-app="appModule">
<app-root></app-root>
</body>
</html>
In my script I wrote:
'use strict';
const appModule = angular.module('appModule',["chart.js"]);
appModule.component('appSeveritiesComponent', {
templateUrl: '/app/components/severitiesComponent/severitiesComponent.html',
controller: severitiesComponentController,
bindings: {
}
});
severitiesComponentController.$inject = [];
function severitiesComponentController() {
}
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
You are missing reference for angular.js
add the reference for angular.js above
<script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>
The order of your scripts matter. If you look at the Installation section on angular-chart.js, you will see the following order:
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
Chart.js should come before angular-chart.js
Moreover, you also need angular.js script inserted before those two.
Im trying to include ng-material and at first I was getting the 'Failed to instantiate module' error, then I also npm installed angular-aria as thats apperently a dependency of ngmaterial and loaded it BEFORE loading ngmaterial. Now I m not getting the same error, not for ngmaterial anymore but for angular-aria:
ailed to instantiate module angular-aria due to:
Error: [$injector:nomod] Module 'angular-aria' 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.
I feel like Ive read every similar post but nothing really helps. Any ideas would be really appreciated!
Ps. if its important for anything, Im using gulp. Also could someone explain to me if there is a difference between npm installing and bower install?
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<title>Candles Shop</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Pacifico" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Rammetto+One" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Gloria+Hallelujah" />
<link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/materialize-css/bin/materialize.css">
<link rel="stylesheet" type="text/css" href="/angular-input-stars-directive/angular-input-stars.css">
<link rel="stylesheet" type="text/css" href="/style.css" />
<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
<script src="/lodash/index.js"></script>
<script src="/angular/angular.js"></script>
<script src="/angular-animate/angular-animate.js"></script>
<script src="/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/angular-ui-router-styles/ui-router-styles.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/angulike/angulike.js"></script>
<script src="/angular-password/angular-password.js"></script>
<script type="text/javascript" src="/materialize-css/bin/materialize.js"></script>
<script type="text/javascript" src="/angular-materialize/src/angular-materialize.min.js"></script>
<script type="text/javascript" src="/angular-input-stars-directive/angular-input-stars.js"></script>
<script src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="/angular-stripe/release/angular-stripe.js"></script>
<script src="/angular-aria/angular-aria.js"></script>
<script src="/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="/angular-sidebar/angular-sidebar.css"></script>
<script src="/socket.io-client/socket.io.js"></script>
<script src="/main.js"></script>
</head>
<body ng-app="candleShop" ng-class="{'home-page': $state.includes('home'), 'store-page' : $state.includes('store')}">
<navbar></navbar>
<div id="main" class="container" ui-view autoscroll='true'></div>
</body>
</html>
app.js:
'use strict';
window.app = angular.module('candlesApp', ['ng', 'angulike', 'fsaPreBuilt', 'ngPassword', 'ui.router', 'ui.bootstrap', 'ui.materialize', 'angular-input-stars','angular-stripe', 'ngAnimate', 'angular-aria', 'ngMaterial', 'angular-sidebar']);
If you look at the documentation for angular-aria here: https://docs.angularjs.org/api/ngAria
You will see this:
Finally, load the module in your application by adding it as a
dependent module:
angular.module('app', ['ngAria']);
It's often the case that the name of the file and the name of the module are not the same. Always check the documentation
I am not able to inject froala wysiwyg-editor dependency to my module.
It shows this error:
Failed to instantiate module froala due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.5.6/$injector/nomod?p0=froala
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:25:235
at b (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:24:282)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:25:20
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:374
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:391
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355
My module in app.js is:
var teacherDashboard = angular.module('teacherDashboard', ['froala','ngMaterial', 'ngMessages', 'ngRoute', 'angularCSS']);
and the main index.html head contains:
<head>
<title>
Teacher Dashboard
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-css/1.0.8/angular-css.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>
<!--floara editor-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/js/froala_editor.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!------>
<script src="./scripts/app.js"></script>
<script src="./scripts/services/service.js"></script>
<script src="./scripts/controllers/selectTopics.js"></script>
<script src="./scripts/controllers/selectTest.js"></script>
<script src="./scripts/controllers/assignQuestionNo.js"></script>
<script src="./scripts/controllers/assignTeachers.js"></script>
<script src="./scripts/controllers/reviewPanel.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/teacherDashboard.css">
<!-- <base href="/">-->
</head>
I am following this link for refernce LINK
Where am i possibly going wrong?
You are probably missing the "froala" angular module in your index.html
Here is the link of the module : angular-froala.js
I am trying to implement angular chart with my app. I bower installed angular-chart.js and have chart.js listed as a dependency. However when I load my page I get the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' 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.
My questions is this: How do I get this error to go away? I've verified that charts is being loaded before angular-chart but I'm not able to get this error to go away.
Here is my index.html:
<!--suppress ALL -->
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="utf-8">
<base href="/">
<!--[if IE]><link rel="shortcut icon" href="assets/img/favicon.ico"><![endif]-->
<link rel="apple-touch-icon-precomposed" href="assets/img/favicon.ico">
<link rel="icon" href="assets/img/favicon.ico">
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="description"
content="Convenient, affordable online CPA and EA self-study CPE. Complete CPE courses in your spare time, on the go.">
<meta name="author" content="Learning Suite Inc">
<meta name="google-site-verification" content="3QtiwaamWrLo-A9BAx0kTgVHagRJfe0xE60hMULF12M"/>
<meta name="fragment" content="!">
<title update-title>Prolaera</title>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/pricing/pricing_v6.css" media="screen" title="no title" charset="utf-8">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans"/>
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v2.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- <link rel="stylesheet" href="assets/css/headers/one.css" media="screen" title="no title" charset="utf-8"> -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="css/sweetalert2.css">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
<!-- Bootstrap core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap theme -->
<link href="lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
<!-- Angular CSP-->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/lib/html5shiv/html5shiv.min.js"></script>
<script src="/lib/respond/respond.min.js"></script>
<![endif]-->
<!-- must be before require.js -->
<script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.1.min.js"></script>
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/moment/moment.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="js/apigClient.js"></script>
<!--jquery/bootstrap needed here for calendar and collapse navbar toggle-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>
<!-- require -->
<script src="lib/require/require.js"></script>
<script type="text/javascript" src="lib/auth0-variables.js"></script>
<!-- angularjs -->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<script src="lib/angular/js/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-bootstrap-typeahead/ui-bootstrap-typeahead.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-bootstrap-toggle-switch/style/bootstrap3/angular-toggle-switch-bootstrap-3.css">
<script type="text/javascript" src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
<script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>
<script src="bower_components/angular-stripe-checkout/angular-stripe-checkout.js"></script>
<!
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="lib/angular/js/angular-animate.js"></script>
<script src="lib/angular/js/angular-ui-router.js"></script>
<script src="lib/angular/js/angular-ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-widget-5.js"></script>
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="lib/sweetalert/SweetAlert.js"></script>
<script src="lib/sweetalert/sweetalert2.min.js"></script>
<script src="lib/smarttable/smart-table.min.js"></script>
<script src="lib/angularsanitize/angular-sanitize.min.js"></script>
<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Uncomment for deployment and comment for dev -->
<script src="js/analytics.js"></script>
<script src="js/inspectlet.js"></script>
<!-- Unify styling -->
<link rel="stylesheet" href="assets/css/headers/header-v1.css">
<!-- CSS Page Style -->
<link rel="stylesheet" href="assets/css/pages/shortcode_timeline2.css">
<link rel="stylesheet" href="assets/css/pages/page_pricing.css">
<script src="js/app.js"></script>
<script src="js/navbar-directive.js"></script>
<script src="js/footer-directive.js"></script>
Here is beginning of my app.js:
(function() {
var app = angular.module('app', ['ngCookies', 'auth0', 'angular-jwt', 'angular-storage', 'ngFileUpload', 'ngSanitize', '19degrees.ngSweetAlert2', 'ui.router', 'ngAnimate', 'ui.bootstrap', 'angular-spinkit', 'angular.filter', 'stripe.checkout', 'ui.calendar', 'ui.bootstrap.typeahead', 'toggle-switch']);
define('app', [], function() {
return app;
});
You have to import chart.min.js - and if you want to use full version of Chart.js you have to import Chart.bundle.js which is downloadable from chart.js webpage.
I had the same issue, tried to point to a CDN and it worked fine,
Then tried to used node_modules instead of bower_components and it worked fine too !
So I believe something is wrong with the bower version ...
Hope this helps ! Let me know !
I am using underscore for check box selections in Angularjs, till now it is working fine but suddenly I am getting the following error.
GET http://localhost/dashboard2/js/d3angular/underscore-min.map 404 (Not Found) testDashboard.do:1
Uncaught TypeError: Cannot read property 'notify' of undefined fo.min.js?v=1_1_31:106(anonymous function) fo.min.js?v=1_1_31:106(anonymous function)
I have got reference to fix this at https://github.com/jashkenas/underscore/issues/1477. But even after changing to underscore.min.map, I am getting similar error . How can I fix this error?
GET http://localhost/dashboard2/js/d3angular/underscore.min.map 404 (Not Found)
The following are the directives that I have included in my angular js application :
var app = angular.module('myApp', [ 'nvd3', 'smartTable.table', 'snap', 'ui.tree', 'ui.bootstrap' ]);
The following are the relevant js and css files I have included :
<script src="/dashboard2/js/d3angular/angular.js"></script>
<script src="/dashboard2/js/d3angular/d3.min.js"></script>
<script src="/dashboard2/js/d3angular/nv.d3.min.js"></script>
<script src="/dashboard2/js/d3angular/angular-nvd3.js"></script>
<script src="/dashboard2/js/d3angular/Smart-Table.debug.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/dashboard2/js/d3angular/snap.js"></script>
<script src="/dashboard2/js/d3angular/angular-snap.js"></script>
<script type="text/javascript" src="/dashboard2/js/d3angular/angular-ui-tree.js"></script>
<script type="text/javascript" src="/dashboard2/js/d3angular/underscore-min.js"></script>
<script src="/dashboard2/js/app.js"></script>
<script src="/dashboard2/js/services.js"></script>
<script src="/dashboard2/js/controllers.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="/js/jquery-1.9.1.js"></SCRIPT>
<script src="/js/jquery-ui-1.10.2.custom.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/dashboard2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/nv.d3.min.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/angular-slider.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/d3styles.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/smartTable.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/angular-snap.css" />
<link rel="stylesheet" href="/dashboard2/css/angular-ui-tree.min.css">
<link href="/css/ms-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
In project find underscore.min.map file and rename to underscore-min.map or use link http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.map