我一直在我的应用程序本地使用angular-chart.js,我没有遇到任何问题。但是,当我在Heroku上部署我的应用程序时,我的页面中断了,因为Chart.js没有正确部署。
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
我在本地服务器上运行时没有收到这些错误。我正在正确地获取脚本并将我的依赖项包含在我的应用程序中。我不明白的是我的其他脚本已经加载没有问题。只是Chart.js给了我这个问题......
任何想法???
我在Chrome的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');
});
答案 0 :(得分:1)
我找到了解决这个问题的替代方案。我为Chart.js采购了一个CDN并且有效。由于某种原因,似乎Chart.js正在使用我的应用程序进行部署,因此我决定从cdn中获取它并且这样做了诀窍
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
答案 1 :(得分:0)
当我在我的libs的src属性上出错时,我发现了这个错误。
检查此行是否正常:
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
也许你拼错了src路径。
如果你更改为<script src="assets/libs/angular-chart/dist/angular-chart.min.js"></script>
怎么办?我认为angular-chart.js不是文件夹的名称