I am upgrading my rails 4.2.0 app to 5.1.2 which is going fine. I had used Angular 1.x to enhance my rails app pages selectively. My rails views are in HAML. Here is a snippet of a page which loads fine in 4.2.0, but not in 5.1.2:
.well{"ng-app" => "billing", "ng-controller" => "BillableCtrl"}
= simple_form_for @billable do |f|
.row
.col-md-4
This loads angular fine in this view. However, I get the following stack trace in my javascript console when I try to load this in Rails 5.1.2.
Uncaught SyntaxError: Unexpected token & angular.self-26d045c60a96c782aa8ef9f5709b1b4fd1ec8578bc37ec2c6c2b9c4370f4bac0.js?body=1:64 Uncaught Error: [$injector:modulerr] Failed to instantiate module billing due to: Error: [$injector:nomod] Module 'billing' 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.
I am using ngannotate-rails version 1.2.2 in rails 5.1.2 upgrade. The version of ngannotate-rails used in rails 4.2.0 version was 0.15.4.
Has anyone else run into this issue? What are some options to investigate?
It turned out NOT to be an angular problem but a Rails to Javascript messaging problem. Take a look at the following line code in one of my javascript functions:
$scope.billable_item = #{@billable.to_json};
Up until Rails 4.2.0 in my experience, this was the standard way to pass the Rails data into javascript. However, for some reason that I do not understand yet, it is broken. That was causing Angular to throw very confusing messages. I have been using the 'Gon' gem to pass data from Rails to Javascript for some time and I switched to that which worked fine. I will now switch my entire Rails to Javascript communication to the Gon gem.