Angular not working when serving over SSL

[rhansma]

I have some issues with serving MeanJS over SSL. I used the generate--ssl-certs.sh file for generating my SSL-certificates, the app itself is generated with yeoman. So I followed the recommended path, but when I try to run the app over SSL it shows me a blank screen. Example can be found here: https://104.155.79.171/ and here http://104.155.79.171/

I am sure nodejs is working, because the route: https://104.155.79.171/metadata, which is a node route is working. The angular app isn't loading for some reason and it also doesn't throw any errors in the console. The terminal also doesn't show any loaded files.

I couldn't find any information on this problem and I am also not sure whether this is a bug or some kind of misconfiguration. This is tried with a clean installation of MEANJS.

[ilanbiala]

Check the console of Chrome and of Terminal to see what is not working.

[rhansma]

As said, the console isn't showing anything. Only the angular and bootstrap files are loaded, after that it stops and just shows a blank screen. None of the configuration files, or controllers etc are loaded. I've developped AngularJS apps before, but never had a problem like this before. Normally if there is some issue with Angular it indeed shows an error message in the console. So I'm guessing it has something to do with NodeJS backend using SSL, but what exactly I don't know.

Terminal isn't showing anything either.

I saw my server had stopped, I restarted it so you can check it out now if you want.

[ppotoplyak]

Do you have a public/dist/application.min.js file ? If not, try 'grunt build' .

application.min.js is used to deliver the Angular code in the secure env:

cat config/env/secure.js | grep application.min.js
        js: 'public/dist/application.min.js'

Here is a working site followed by your site, notice how the file is present in the working site:

$ curl https://streetspin.com | grep application.min.js
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed

100  4732  100  4732    0     0   9817  <script type="text/javascript" src="lib/raygun4js/dist/raygun.min.js"></script><script type="text/javascript" src="lib/angular/angular.min.js"></script><script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script><script type="text/javascript" src="lib/angular-cookies/angular-cookies.min.js"></script><script type="text/javascript" src="lib/angular-animate/angular-animate.min.js"></script><script type="text/javascript" src="lib/angular-touch/angular-touch.js"></script><script type="text/javascript" src="lib/angular-sanitize/angular-sanitize.js"></script><script type="text/javascript" src="lib/angular-ui-router/release/angular-ui-router.min.js"></script><script type="text/javascript" src="lib/angular-ui-utils/ui-utils.min.js"></script><script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script><script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script><script type="text/javascript" src="lib/lod  ash/dist/lodash.underscore.js"></script><script type="text/javascript" src="lib/angular-google-maps/dist/angular-google-maps.js"></script><script type="text/javascript" src="dist/application.min.js"></script>
   0 --:--:-- --:--:-- --:--:--  9837

$ curl https://104.155.79.171 --insecure | grep application.min.js
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2659  100  2659    0     0   4129      0 --:--:-- --:--:-- --:--:--  4128

[rhansma]

Thanks Pavel and Ilan for your help. You were right Pavel about the missing application.min.js, grunt build didn't fix my problems however. Commenting the assets part of the secure config file did the trick.

It turns out the grunt wasn't properly concatenating all of the angular files, I'm not sure what went wrong exactly, but I will look into it later on and let you know when I find out what is going wrong.

[rhansma]

It has to do with the following files:

'public/lib/angular-sanitize/angular-sanitize.min.js', 'public/lib/angular-touch/angular-touch.min.js', 'public/lib/angular-cookies/angular-cookies.min.js',

Those files are missing from the secure-configuration. If you add them it will work.

The full /config/env/secure.js file will be:

'use strict';

module.exports = {
  port: 443,
  db: process.env.MONGOHQ_URL || process.env.MONGOLAB_URI || 'mongodb://localhost/goalsetting',
  assets: {
    lib: {
      css: [
        'public/lib/bootstrap/dist/css/bootstrap.min.css',
        'public/lib/bootstrap/dist/css/bootstrap-theme.min.css',
      ],
      js: [
        'public/lib/angular/angular.min.js',
        'public/lib/angular-resource/angular-resource.min.js',
        'public/lib/angular-cookies/angular-cookies.min.js',
        'public/lib/angular-animate/angular-animate.min.js',
        'public/lib/angular-touch/angular-touch.min.js',
        'public/lib/angular-sanitize/angular-sanitize.min.js',
        'public/lib/angular-ui-router/release/angular-ui-router.min.js',
        'public/lib/angular-ui-utils/ui-utils.min.js',
        'public/lib/angular-bootstrap/ui-bootstrap-tpls.min.js'
      ]
    },
    css: 'public/dist/application.min.css',
    js: 'public/dist/application.min.js'
  },
  facebook: {
    clientID: process.env.FACEBOOK_ID || 'APP_ID',
    clientSecret: process.env.FACEBOOK_SECRET || 'APP_SECRET',
    callbackURL: 'https://localhost:443/auth/facebook/callback'
  },
  twitter: {
    clientID: process.env.TWITTER_KEY || 'CONSUMER_KEY',
    clientSecret: process.env.TWITTER_SECRET || 'CONSUMER_SECRET',
    callbackURL: 'https://localhost:443/auth/twitter/callback'
  },
  google: {
    clientID: process.env.GOOGLE_ID || 'APP_ID',
    clientSecret: process.env.GOOGLE_SECRET || 'APP_SECRET',
    callbackURL: 'https://localhost:443/auth/google/callback'
  },
  linkedin: {
    clientID: process.env.LINKEDIN_ID || 'APP_ID',
    clientSecret: process.env.LINKEDIN_SECRET || 'APP_SECRET',
    callbackURL: 'https://localhost:443/auth/linkedin/callback'
  },
  github: {
    clientID: process.env.GITHUB_ID || 'APP_ID',
    clientSecret: process.env.GITHUB_SECRET || 'APP_SECRET',
    callbackURL: 'https://localhost:443/auth/github/callback'
  },
  mailer: {
    from: process.env.MAILER_FROM || 'MAILER_FROM',
    options: {
      service: process.env.MAILER_SERVICE_PROVIDER || 'MAILER_SERVICE_PROVIDER',
      auth: {
        user: process.env.MAILER_EMAIL_ID || 'MAILER_EMAIL_ID',
        pass: process.env.MAILER_PASSWORD || 'MAILER_PASSWORD'
      }
    }
  }
};

[ilanbiala]

@rhansma can you submit a PR with the fix?

[rhansma]

@ilanbiala Sorry for my response being late, I was a bit busy the last couple of days.

I tried to reproduce the same error on this repo, but I wasn't able to reproduce. It seems only to happen with the yeoman generated version. I will look into this later this week, when I have some more time. I will let you know.