Modal popup is working on my local but same is not working on production server (AWS)

Question

I have build for popup on a page (Inspirations page in this case). This page is a directive included in main 'product_chat.html' which is connected to 'product_chat.js'. All these files are initiated from index.html

index.html

<!DOCTYPE html>

<html ng-app="myApp" lang="en" class="no-js" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head data-ng-app="app">
    <meta charset="utf-8">
    <meta name="verify-admitad" content="ed499e6bac"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="wot-verification" content="591de88d2ae5d58564c7"/>

    <title ng-bind="title">"Online shopping site | Women fashion | Personal styling - Selekt"</title>
    <link rel="icon" href="/pics/favicon.png">
    <meta name="description" content="{{meta_desc}}">
    <meta itemprop="description" content="Application wide description for Schema.org (Google+ uses this)">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700,200,300' rel='stylesheet' type='text/css'>
<link rel="canonical" href="{{canonical_url}}">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="bower_components/dist/angular-typewrite.css"/>
    <link rel="stylesheet" href="css/isteven-multi-select.css"/>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/select-css.css">
    <link rel="stylesheet" href="css/style_find.css">
    <link rel="stylesheet" href="css/select-css-compact.css">
    <link rel="stylesheet" href="css/searchSelect.css">
    <link rel="stylesheet" href="css/style_load.css">
    <link rel="stylesheet" href="css/popup.css">

    <!--<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.css">
    <link rel="stylesheet" href="bower_components/ngModal/ng-model.css">

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-92766347-1', 'auto');
  ga('send', 'pageview');

</script>


    <style>
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }

        .main_banner {
            background-image: url('pics/banner.png');
            background-repeat: no-repeat;
            min-height: 100vh;
            display: block;
            overflow-x: hidden;
            background-size: 1600px 900px;

        }
    </style>
    <base href="/"/>
</head>
<body class="main_banner">


<div  class="">
    <div ng-view>

    </div>
</div>


<!--In production use:-->
<!--
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
-->

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>

<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="node_modules/socket.io/socket.io.js"></script>
<!--<script src="bower_components/socket.io-client/socket.io.js"></script>-->
<!--<script src="bower_components/angular-socket-io/socket.js"></script>-->


<script src="js/angular-searchAndSelect.js"></script>


<script src="product-app-services/app-services.js"></script>
<script src="publish/wedding-dresses-for-women/product-chat.js"></script>
<script src="publish/home/product-chat.js"></script>
<script src="publish/search/product-chat.js"></script>
<script src="publish/find/product-chat.js"></script>


<script src="app-services/app.module.js"></script>
<script src="app.js"></script>
<script src="bower_components/angular-typewrite/dist/angular-typewrite.js"></script>
<!--//custom dialog-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootbox/bootbox.js"></script>
<script src="bower_components/ngBootbox/dist/ngBootbox.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</body>
</html>

product_chat.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Private Chat Application with Node.js, Socket.IO and AngularJS</title>
    <meta name="generator" content="Bootply">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/style_find.css">
</head>

<body cz-shortcut-listen="true" style="background: white">

<div id="main_page" ng-show="show_page" scroll >
    <nav_header></nav_header>
    <div>
        <div>
            <inspirations ng-if="inspirations_dir"; ng-init="myDialog()"></inspirations>
        </div>
    </div>


</div>
</body>
</html>

in the above code, I am calling popup function in 'inspirations' tag

Here is my product_chat.js file (Only relevant part of the code is attached)

var app = angular.module("WeddingDressesForWomen", ['ui.bootstrap']);
app.controller("WeddingDressesForWomen", ["$http","$rootScope", '$scope', '$window', 'socket', "$location", "$anchorScroll", "$timeout", '$routeParams', 'title', 'userService', '$filter', '$document', '$localStorage','$uibModal',
    function ($http,$rootScope, $scope, $window, socket, $location, $anchorScroll, $timeout, $routeParams, title, userService, $filter, $document, $localStorage,$uibModal) {
        $scope.myDialog = function () {
    $uibModal.open({
       templateUrl: 'template/popup.html',
       backdrop: 'static',
       windowClass: 'modal',
       size: 'lg',
       controller: function ($scope, $uibModalInstance) {
            $scope.cancel = function () {
               $uibModalInstance.dismiss();
            };
          }
    });
}; 
}]);

popup.html template

<div class="modal-header">
    <h3 class="modal-title">Note</h3>
   </div>
    <div class="modal-body">
    Selekt will be functionally live with Women's Fashion by 10th May and Men's Fashion by 30th May. It is currently in Beta phase. 
    </div>
    <div class="modal-footer">
    <button class="btn btn-warning" type="button" style="background-color:#337ab7; border-color:#2e6da4"
    ng-click="cancel()">Okay</button>
    </div>

@Leguest, These are the steps I followed (only for this case) 1) Downloaded the production (whole project) -- Made a backup in my system 2) Made copy of the above project and edited the files 3) Tested it on local 4) Uploaded this whole project again (replacing all in production) Generally I upload only edited files after testing — Prashanth Sai, May 02 '17 at 13:46
@Pete, This code is being done by two interns, they were new to angular. Now we are (little experienced) completely re writing and optimizing the code. This present version that is LIVE is our old code. I exactly do not know where 'myApp' is being used but all data and operations are being done from 'app'. This is the very reason that I need to place a popup on this page stating ' Hey this is beta version' (Or not even beta) — Prashanth Sai, May 02 '17 at 14:24
@Pete I think the problem might be the code in server is not able to access ui-bootstrap javascript file with modalprovider where as it working fine in my local. How can I check this? — Prashanth Sai, May 02 '17 at 14:28
@Leguest, I think the problem might be the code in server is not able to access ui-bootstrap javascript file with modalprovider where as it working fine in my local. How can I check this? — Prashanth Sai, May 02 '17 at 14:29
`ui-bootstrap-tpls.min.js` is added from the bower_components. Do you see any error in developer console in accessing that file? — Master Po, May 03 '17 at 16:38

score 1 · Answer 1 · answered May 02 '17 at 14:27

I can't comment on this because of my reputation! But do you minify the javascript? I can see you've used implicit dependency injection for $uibModalInstance in the controller - you should be using the property annotation as well, when you declare the controllers dependencies for $uibModalInstance otherwise the code will be broken when the javascript is minified.

Also for the bootstrap library. You can log the service to the console.. i.e console.log($nameOfService)... Are you not able to download the bootstrap javascript and add it to the project?

Except for ng-storage and jquery js files, all other js files have been downloaded and then included from local. I have not minified my javascript. Yes I have used dependency injection $uibModal otherwise $uibModalInstance will not be functional — Prashanth Sai, May 02 '17 at 17:08

Modal popup is working on my local but same is not working on production server (AWS)

1 Answers1