Error: [$injector:nomod] Module 'chart.js' is not available! Rails application.js

Question

I am trying to get angular-chart.js to work in a rails project. Following the install instructions on https://github.com/jtblin/angular-chart.js

1) npm install --save angular-chart.js so far so good. /vendor/assets/javascripts/node_modules/angular-chart.js/(the files)

2)"add the sources to your code" Okay I can do that with a couple of <script> tags in a simple index.html and app.js page with great success, but I am working in a rails project, so I want to load the sources in the application.js manifest.

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

My dashboard.js.coffee has

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

My application.js is

//= 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 .

to reduce variables I have copied the Chart.bundle.js and angular-chart.js to the app javascript folder

.../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

but I would like to use them from the .../vendor/assets/ folder. (I had the same problem using that path)

I think I am having some kind of load order error. I can't figure out where things are going wrong. Angualrjs is returning this error

 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)

I am new to rails and angularjs so I am sure I am missing something basic. Any help would be appreciated. I've read the other question on this topic, but they don't really give a clear answer

edit: could this long load time be related? edit:(nope)

Edit2: I have tried putting the following in the /app/views/layout/application.html.erb file

<%= 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 %>

doing so I no longer get the injector error.

so it seems to be something about how I am using angular-chart.js and chart.js in the rails asset pipeline.

Error: [$injector:nomod] Module 'chart.js' is not available! Rails application.js

0 Answers0