Directive/Factory Not Working in Production

Question

I have a directive that prints out flash messages for users. Everything works fine on my localhost but as soon as I test it out on Heroku, the flash message does not appear. Here is the controller.

angular.module("alerts")

.controller("AlertsController", alertController)

alertController.$inject = ['Flash']

function alertController(Flash) {
  var vm = this;

  vm.flash = Flash;
}

The directive...

angular.module("alerts")

.directive('flash', flash);

flash.$inject = ['$timeout'];

function flash ($timeout){
  return {
     restrict: 'E',
     replace: true,
     scope: {
         text: '=',
         type: '='
     },
     template: '<div id="flash_message" class="notification" ng-class="type"> {{text}} hello </div>',
     link: function(scope, element, attrs){
         $timeout(function(){
             element.remove();
         }, 5000);
     }
  }
}

And the factory that handles storing the flash messages.

angular.module("alerts")

.factory("Flash", flash)

function flash() {

  var messages = [];

  var results = {
    messages: messages,
    printMessage: printMessage,
    addMessage: addMessage
  }

  return results;

  function printMessage() {
    return results.messages
  }

  function addMessage(message) {
    results.messages.push(message);
  }
}

My html code...

<div ng-controller="AlertsController as alerts">
  <div ng-repeat="message in alerts.flash.messages">
    <flash type="message.type" text="message.text"></flash>
  </div>
</div>

No error appears on the console. The funny thing is the flash message is presented in the html doesn't load.

This is what is shown in localhost.

<div ng-repeat="message in alerts.flash.messages" class="ng-scope">
  <div id="flash_message" class="notification ng-binding ng-isolate-scope success" ng-class="type" type="message.type" text="message.text"> Your link has been copied! hello </div>
</div>

But on heroku production

<div ng-repeat="message in alerts.flash.messages" class="ng-scope"></div>

I'm creating the flash in my code via..

Flash.addMessage({type: "success", text: "Your link has been copied!"});

My question is, why does this not appear on my production code but it appears on my localhost and how do I fix it?

Answer 1

Of course, renaming the file name must have solved your problem. But the question is, why was it working earlier on localhost? I think on localhost all your javascript files loaded instantly and the function 'flash' of respective factory and directive got registered correctly.

But running on heroku or any other remote server, you will encounter problem as the controller or directive may register different 'flash' function than what they must register.

A plausible reason could be that angularjs's library file (from your server or cdn) was loaded into DOM a bit later than your files like controller.js, service.js or directive.js. Thats why the DOM didn't recognised the angular syntax of .controller() or .service(), etc at start. And consequently one of your global 'flash' function(of directive or factory) was overridden.

First of all I would suggest you to rename, which you have already done, and secondly, do not use global functions inside directive or factory.

I hope this explains.

Answer 2

Renaming my file name and the internal function inside my directive solved the problem.