0

我一直在本地使用 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 中的资源下看到的内容

在此处输入图像描述

索引.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>

应用程序.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');
  });
4

3 回答 3

1

我找到了这个问题的替代解决方案。我为 Chart.js 采购了一个 CDN，并且成功了。似乎 Chart.js 出于某种原因正在与我的应用程序一起部署，所以我决定从 cdn 获取它，这样就成功了

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
于 2015-10-28T06:13:37.693 回答
0

当我的库的 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 不是文件夹的名称

于 2015-10-28T00:46:00.417 回答
0

检查您的 angular.json 文件中的 Chart.min.js 并将两个实例都更改为全部小写。Heroku 区分大小写。

使用 Angular 13 为我工作。

于 2022-01-26T03:47:43.527 回答