CODEWITHSUNDEEP
angularjsherokudeployment
user1260928
user1260928

Reputation: 3429

deploying angularjs app on Heroku: module angular not found

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.

Upvotes: 4

Views: 2936

Answers (5)

Aman Kumar Gupta
Aman Kumar Gupta

Reputation: 3011

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>

Upvotes: 0

user6816560
user6816560

Reputation:

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>

Upvotes: 2

Winson Liao
Winson Liao

Reputation: 103

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.

Upvotes: 0

Domenic Bove
Domenic Bove

Reputation: 506

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.

Upvotes: 0

nknj
nknj

Reputation: 2486

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.

Upvotes: 2

Related Questions