2015-10-28 89 views
0

我一直在我的應用程序中使用angular-chart.js,我沒有遇到問題。但是,當我在Heroku上部署應用程序時,我的頁面因爲Chart.js未正確部署而中斷。Chart.js在Heroku上沒有正確部署

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

enter image description here

的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

我很遺憾,當我的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>我覺得角chart.js之不

+0

是的,我其實在此之前有不同的SRC路徑,將其指向另一角-chart.js文件。這似乎不是問題,因爲它在我的本地服務器上運行良好。只是不在Heroku上。 –

1

我找到了一個替代的解決這個問題的文件夾的名稱是什麼。我爲Chart.js提供了一個CDN,並且工作。看來,chart.js之與我的應用程序由於某種原因,部署,所以我決定從CDN來源,並實現該訣竅

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>