deploying angularjs app on Heroku: module angular not found

Question

I m trying to deploy my angularjs app on heroku. I followed the steps given by heroku. But when I m looking at the log I have this :

/app/app/scripts/app.js:3 2014-03-05T11:05:09.262151+00:00 app[web.1]: angular.module('angularuiprojectApp', [ 2014-03-05T11:05:09.262151+00:00 app[web.1]: ^ 2014-03-05T11:05:09.266533+00:00 app[web.1]: ReferenceError: angular is not defined 2014-03-05T11:05:09.266533+00:00 app[web.1]: at Object. (/app/app/scripts/app.js:3:1) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at Module._compile (module.js:456:26) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at Object.Module._extensions..js (module.js:474:10) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at Module.load (module.js:356:32) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at Function.Module._load (module.js:312:12) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at Function.Module.runMain (module.js:497:10) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at startup (node.js:119:16) 2014-03-05T11:05:09.266533+00:00 app[web.1]: at node.js:902:3 2014-03-05T11:05:09.742460+00:00 app[web.1]: /app/app/scripts/app.js:3

I don't understand why Heroku doesn't know about angular.

Here's the code of my app.js :

angular.module('angularuiprojectApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute','ui.bootstrap'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

My procfile content is :

web: node app/scripts/app.js

If you have any idea... Thank you in advance.

nknj · Accepted Answer · 2014-05-14 18:12:13Z

2

app.js is a file that configures AngularJS. It's not a web server like express. You need a web server to serve your Angular app. To do this create a new web.js file that starts a webserver serving your app or your dist directory.

You will need to install express and gzippo using npm to make this work.

Here is an example of web.js serving the app folder:

'use strict';

var gzippo = require('gzippo');
var express = require('express');
var nodeApp = express();

nodeApp.use(express.logger('dev'));
nodeApp.use(gzippo.staticGzip('' + __dirname + '/app'));
nodeApp.listen(process.env.PORT || 5000);

By the way, serving the app folder is not recommended, you should be serving the dist folder that is generated using the grunt command. Check out this buildpack I wrote to deploy angular apps on heroku, it will handle everything for you if you are using grunt and bower to build your app.

answered May 14, 2014 at 18:12

nknj

2,4765 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leon Over a year ago

great buildpack nknj! :)

vich · Accepted Answer · 2017-05-18 14:52:52Z

2

Heroku has a problem reading CDN's with http in the address. So in your project, remove http from all your CDN urls.

For example:

If you have:

<pre>http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></pre>

Replace it with:

<pre>//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></pre>

edited May 18, 2017 at 14:52

vich

11.9k13 gold badges52 silver badges67 bronze badges

answered May 18, 2017 at 14:35

user6816560

Comments

Domenic Bove · Accepted Answer · 2016-01-13 23:41:35Z

0

I had a node.js app working fine locally, but the angular wouldn't work on Heroku. I had to change this line in my index.html for heroku to load angular. I replaced

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>

with

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

And it worked!

Update: It looks like the issue is with the 'http:' part of the src, not the initial link. Not sure why heroku cannot handle the http there, but just get rid of it.

edited Jan 13, 2016 at 23:41

answered Jan 13, 2016 at 22:24

Domenic Bove

5065 silver badges5 bronze badges

Comments

Winson Liao · Accepted Answer · 2016-09-22 11:56:07Z

0

if you remove the http part of the link, you allow the server to choose between http or https. This works for all CDN in general.

In general, I recommend this method ok link start with //whatever.com rather than http://whatever.combecause you never know when links will change to https or vice versa.

answered Sep 22, 2016 at 11:56

Winson Liao

1032 silver badges8 bronze badges

Comments

Aman Kumar Gupta · Accepted Answer · 2017-09-08 08:33:11Z

0

while hosting your angular js web application on heroku, the problem comes up with the CDN. Heroku has a problem to read the CDN with http

So, remove the http from your angular CDN and write it as

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

answered Sep 8, 2017 at 8:33

Aman Kumar Gupta

3,07726 silver badges23 bronze badges

Collectives™ on Stack Overflow

deploying angularjs app on Heroku: module angular not found

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related