1

我正在尝试让 angular-chart.js 在 rails 项目中工作。按照https://github.com/jtblin/angular-chart.js上的安装说明

1) npm install --save angular-chart.js 到目前为止一切顺利。/vendor/assets/javascripts/node_modules/angular-chart.js/（文件）

2）“将源代码添加到您的代码中”好吧，我可以<script>在一个简单的 index.html 和 app.js 页面中使用几个标签并取得巨大成功，但我正在使用 rails 项目，所以我想加载application.js 清单中的源。

3) angular.module("app", ["chart.js"])

我的 dashboard.js.coffee 有

appName = 'dashboardApp';
angular.module(appName,['ngResource', 'ui.router', 'ui.bootstrap','chart.js']);

我的 application.js 是

//= require jquery2
//= require jquery_ujs
//= require jquery.turbolinks
//= require select2
//= require turbolinks
//= require d3
//= require bootstrap-sass-official
//= require moment
//= require requirejs
//= require angular
//= require angular-bootstrap
//= require angular-resource
//= require angular-ui-router
//= require angular-animate
//= require angular-aria
//= require angular-material
//= require angular-websocket
//= require underscore
//= require gmaps/google
//= require slider-pro/jquery.sliderPro.js
//= require websocket_rails/main
//= require app/dashboard/Chart.bundle.js
//= require app/dashboard/angular-chart.js
//= require_tree .

为了减少变量，我已将 Chart.bundle.js 和 angular-chart.js 复制到应用程序 javascript 文件夹中

.../app/assets/javascripts/app/dashboard
|-- angular-chart.js
|-- app.js
|-- Chart.bundle.js
|-- Chart.bundle.min.js
|-- _chart.html.erb
|-- dashboard.html.erb
|-- dashboard.js.coffee.erb
|-- data.html.erb.bk
|-- details.html.erb
|-- _search.html.erb
`-- test.html.erb

但我想从 .../vendor/assets/ 文件夹中使用它们。（我在使用该路径时遇到了同样的问题）

我想我遇到了某种加载顺序错误。我不知道哪里出了问题。Angualrjs 正在返回此错误

 Uncaught Error: [$injector:modulerr] Failed to instantiate module dashboardApp 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.
http://errors.angularjs.org/1.6.1/$injector/nomod?p0=chart.js
    at http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:69:12
    at http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:2184:17
    at ensure (http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:2108:38)
    at module (http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:2182:14)
    at http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:4737:22
    at forEach (http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:358:20)
    at loadModules (http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:4721:5)
    at http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:4738:40
    at forEach (http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:358:20)
    at loadModules (http://localhost:3000/assets/angular/angular.self-bfd6c8dff7a273aef9f5716cbbd0f6cb8837cf59dd5c54eb4d9adc360007e639.js?body=1:4721:5)

我是 rails 和 angularjs 的新手，所以我确信我缺少一些基本的东西。任何帮助，将不胜感激。我已经阅读了关于这个主题的另一个问题，但他们并没有给出明确的答案

编辑： 这么长的加载时间可能相关吗？ 编辑：（不）

Edit2：我尝试将以下内容放入 /app/views/layout/application.html.erb 文件中

<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js' %>
<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js' %>
<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js' %>
<%= javascript_include_tag 'https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

这样做我不再收到喷油器错误。

所以这似乎是关于我如何在 rails 资产管道中使用 angular-chart.js 和 chart.js。

4

0 回答 0