Issue with Deploying Angular on Rails App to Heroku

Report
Question

Please briefly explain why you feel this question should be reported .

Report Cancel

I am trying to deploy an app onto Heroku but I keep running into issues with it.

When I first created the app, it was initially made by forking a frontend template that used grunt to serve the page. I have since added a Rails backend to it, so all I’ve needed to do to test locally is run rails s. Thus I have removed the files associated with grunt (Gruntfile.js, package.json, server.js, and Procfile) hoping that that would clear up the problem.

When I try to launch https://fatebook-app.herokuapp.com/ however, the console gives me the following errors:

application-1459d66….js:31 Uncaught ReferenceError: require is not defined
app-bc72f785913a82b58cf1f4097f27b32051bb9581614c2e88a9432ffa1fe821d2.js:1 Uncaught ReferenceError: angular is not defined
fatebook-app.herokuapp.com/:25 Mixed Content: The page at 'https://fatebook-app.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300'. This request has been blocked; the content must be served over HTTPS.
fatebook-app.herokuapp.com/:26 Mixed Content: The page at 'https://fatebook-app.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'. This request has been blocked; the content must be served over HTTPS.
angular-cookies.js:24 Uncaught TypeError: Cannot read property 'module' of undefined
angular-ui-router.js:18 Uncaught TypeError: Cannot read property 'isDefined' of undefined
ui-bootstrap-tpls.js:7 Uncaught ReferenceError: angular is not defined
angular-sanitize.js:19 Uncaught TypeError: Cannot read property '$$minErr' of undefined
StorySrv-c9340eeb037c5ba619dbc1474e827950c142de70c2ff57bb699691c3ac069ca3.js:1 Uncaught ReferenceError: angular is not defined
PageSrv-de35e8c1f77ae94dae9d6a87aaf83a088ff447ebba95bbc7d5319f5a3f557d42.js:1 Uncaught ReferenceError: angular is not defined
BranchSrv-583f5c3c6c751b0976700c3b2afa0fa7cc5cbca245091ec216bb581245684559.js:1 Uncaught ReferenceError: angular is not defined
SessionSrv-1fcb5ce9e9165d79163481fd5255c4a64e1a15ce6f17292326fe0ca792e7d45e.js:1 Uncaught ReferenceError: angular is not defined
UserSrv-814a4576169d4edd3fe1e387c4ed293902912c862e880e494713e74cfa856891.js:1 Uncaught ReferenceError: angular is not defined
StoryNavCtrl-537a56ea1040a15d4ac044374b74472104471d533258d265aee060f6e859a7c1.js:1 Uncaught ReferenceError: angular is not defined
StoryCreateCtrl-ca019e74f613967a237e0f56a3b371bf6c28ecfa9bb07fe285948666ffee8594.js:1 Uncaught ReferenceError: angular is not defined
StoryEditCtrl-66c60331bb26f32bfda5b4344d238ed2b58f22765712ba53cf9f0ecbcf954b5c.js:1 Uncaught ReferenceError: angular is not defined
PageEditCtrl-c576c895007189d8561fd4e53f441b6a2e643ff103acbe407660ae1fab9d8e18.js:1 Uncaught ReferenceError: angular is not defined
LoginCtrl-deb60f6662c84fbe558afe4c9c173f6db5711f68268233debd1245c1b8cde47b.js:1 Uncaught ReferenceError: angular is not defined
SideNavCtrl-559afed6b75f693bfaca050892695339912d286ecc1ce3f9689c0b2fc1fdca5a.js:1 Uncaught ReferenceError: angular is not defined
UserStoriesCtrl-b3003d4256918a1fad27a54bef1b05b33dec2de107b99bda9e5d26cbb972f355.js:1 Uncaught ReferenceError: angular is not defined
StoryPreviewCtrl-c9213c64c8c35182f7e14340f54eb523d29b0b54dff795b997e622ffcb7cef3b.js:1 Uncaught ReferenceError: angular is not defined

Since this is the first time I’ve tried to deploy an Angular on Rails project, before, I’m not sure what files are most pertinent here. This is the content of my application.html.erb file:

<!DOCTYPE html>
<html>
<head>
  <title>Fatebook</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag    'login' %>
  <%= stylesheet_link_tag    'navbars' %>
  <%= stylesheet_link_tag    'authoring_tools' %>
  <%= stylesheet_link_tag    'play_adventure' %>
  <%= stylesheet_link_tag    'stories' %>
  <%= stylesheet_link_tag    'normalize' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'app' %>
  <%= csrf_meta_tags %>
</head>
<body ng-app='fatebook'>
  <div ng-include="'top_nav.html'"> </div>
  <div ng-include="'side-nav.html'"></div>

  <div class='container'>
    <ui-view></ui-view>
  </div>

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.js"></script>
  <script src="https://cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>

  <script src="https://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>

  <!--    Services-->
  <%= javascript_include_tag 'ng-app/services/StorySrv' %>
  <%= javascript_include_tag 'ng-app/services/PageSrv' %>
  <%= javascript_include_tag 'ng-app/services/BranchSrv' %>
  <%= javascript_include_tag 'ng-app/services/SessionSrv' %>
  <%= javascript_include_tag 'ng-app/services/UserSrv' %>

  <!--    Controllers-->
  <%= javascript_include_tag 'ng-app/controllers/StoryNavCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/StoryCreateCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/StoryEditCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/PageEditCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/LoginCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/SideNavCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/UserStoriesCtrl' %>
  <%= javascript_include_tag 'ng-app/controllers/StoryPreviewCtrl' %>

</body>
</html>

This is my first time trying to deploy and Angular on Rails app to Heroku, so bear with me. I’d be happy to provide additional details to get to the bottom of this.

Thanks in advance!

0
0 Answer 9 views 0