I am getting the below error, Once I used Angularjs in planet 9.
Planet 9 is a tool build on top of sap ui5, which includes drag and drop along with we can also include html, css, js.
Hence for an application I had a need of ng-repeat kind of thing. So I thought of using AngularJS. where I can use the routing from that tool. I will not use the route from angular js. So, not necessary to load ngRoute. I checked the solution in SO for the above error. almost every answer was saying to use ngRoute. Even after adding ngRoute, no luck.
What I feel is, angular application is trying to initialize before angular js script loaded. But i am not sure that is the issue. But i am not able to see any angular js related functionality working. But sometimes depends on the internet speed, it will work.
Even i thought of bootstrapping the angular application manually. But that tool has already added ng-app="angularApp" by default. What is causing the below error, If the manual bootstrapping is the solution for this, how to remove that first ng-app auto bootstrap then do manual bootstrap once the necessary angular js is loaded.
This is the module looks like
var angularApp = angular.module('angularApp', ['ui.bootstrap']); //and one of the controller look like this angular.module('angularApp').controller('MainController', MainController); MainController.$inject = ['$scope','$rootScope','$http']; function MainController($scope, $rootScope,$http) { $scope.goToNW = function(){ oApp.to('networkVisibility'); angular.element('#Home-inner').removeClass(); }; $scope.goToBO = function(){ oApp.to('backorderDiagnostics'); angular.element('#HomeBtn-inner').removeClass(); $scope.$broadcast('boController'); }; $scope.goToCM = function(){ oApp.to('connectedMetrics'); angular.element('#cmHome-inner').removeClass(); $scope.$broadcast('connectedMetrics'); }; } and the problem is, if i use angular version 1.6.9 the application will not load itself. If i use 1.5.7. it will load sometimes and sometimes not this is the error I am getting sometimes.
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=angularApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.6%2F%24injector%2Fnomod%3Fp0%3DangularApp%0A%20%20%20%20at%20http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at%20http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A25%3A235%0A%20%20%20%20at%20b%20(http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A24%3A282)%0A%20%20%20%20at%20http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A25%3A20%0A%20%20%20%20at%20http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A39%3A374%0A%20%20%20%20at%20q%20(http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20db%20(http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A21%3A19)%0A%20%20%20%20at%20Ac%20(http%3A%2F%2F10.37.142.201%3A8080%2Fmedia%2Froot%2Fhurricane%2Fjs%2Fangular.min.js%3A21%3A332) at angular.min.js:6 at angular.min.js:40 at q (angular.min.js:7) at g (angular.min.js:39) at db (angular.min.js:43) at c (angular.min.js:21) at Ac (angular.min.js:21) at fe (angular.min.js:20) at HTMLDocument.<anonymous> (angular.min.js:315) at p (sap-ui-core.js:127) Error which i got when used Uncompressed angular js
Uncaught Error: [$injector:modulerr] Failed to instantiate module angularApp due to: Error: [$injector:nomod] Module 'angularApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.5.7/$injector/nomod?p0=angularApp Note: one more information, the application will load without this error when i haven't opened the developer tools window. If the developer tools window opened and try to load, once in 4 time the application will load.other three times it will give the above error
This is how the page source code look like after running application Note: I have removed the controllers code which is not necessary for this issue
<!DOCTYPE html>
<title></title> <script src="/public/neptune/p9library.js"></script> <script id="sap-ui-bootstrap" type="text/javascript" src="/public/openui5/1.52/sap-ui-core.js" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-noDuplicateIds="false" data-sap-ui-preload="async" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.ui.layout,sap.ui.unified,sap.ui.table,sap.m"></script> <script src="/media/root/abcdef/js/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/allmighty-autocomplete/1.0.140706/autocomplete.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="/media/root/abcdef/js/jquery.simplePagination.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script> <script src="/public/highsuite/highcharts.js"></script> <script src="/public/highsuite/highcharts-more.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> <link rel="stylesheet" href="/media/root/abcdef/css/simplePagination.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/allmighty-autocomplete/1.0.140706/autocomplete.min.css"> <link href="/public/application/abcdef11/app.css" class="nepGen" type="text/css" rel="stylesheet" /> </head> <body class="sapUiBody" role="application" id="body" ng-app="angularApp"> <script> var localAppID = "abcdef"; sap.ui.getCore().attachInit(function(data) { var oShell = new sap.m.Shell("oShell",{appWidthLimited:false}); var oApp = new sap.m.App("oApp",{}); var home = new sap.m.Page("home",{title:"Full Screen",showNavButton:true,showFooter:false,navButtonPress:function(oEvent){ }}); var homeHeader = new sap.m.Bar("homeHeader",{}); var homeLabel = new sap.m.Label("homeLabel",{text:"Supply Chain Visibility and Connected Metrics"}); var homeReload = new sap.m.Button("homeReload",{icon:"sap-icon://refresh",press:function(oEvent){ cacheReload(); }}); var homeHtml = new sap.ui.core.HTML("homeHtml",{}); homeHtml.setDOMContent("<section id='myHome' class='home-page' ng-controller='MainController'> <div class='row m-0 details-row d-flex justify-content-center'> <div class='closed-card' ng-click='goToNW()'> <div class='card card-chart pointer-cursor' title='Visualize Customer Demand, Inventory and Lead Times in one Place for entire network: At a segment, product group or SKU Level'> <button class='card-panel card-header green darken-1 d-flex align-items-center justify-content-center' style='text-align: center;padding: 12px 0;transition: all 0.3s ease;font-size: 80px;'> <i class='fa fa-sitemap rotate-90' aria-hidden='true'></i> </button> <div class='card-body'> <h4 class='card-title text-center'>Network Visibility</h4> </div> </div> <p class='text-center px-4'></p> </div> <div class='closed-card' ng-controller='BOController' ng-click='goToBO()'> <div class='card card-chart pointer-cursor' title='Dive deeper for SKUs on Backorder to find out 'where is the product' up-stream and use this to expedite BO Relief'> <button class='card-header card-panel deep-orange accent-2 d-flex align-items-center justify-content-center' style='text-align: center;padding: 12px 0;transition: all 0.3s ease;font-size: 80px;'> <i class='fa fa-search' aria-hidden='true'></i> </button> <div class='card-body'> <h4 class='card-title text-center'>Backorder Diagnostics</h4> </div> </div> </div> <div class='closed-card' ng-controller='CMController' ng-click='goToCM()'> <div class='card card-chart' title='A Rear View mirror that connects lines on Backorder to up-stream performance to help detect trends and create actions'> <button class='card-header card-panel purple-bg d-flex align-items-center justify-content-center' style='text-align: center;padding: 12px 0;transition: all 0.3s ease;font-size: 80px;'> <i class='fa fa-line-chart' aria-hidden='true'></i> </button> <div class='card-body'> <h4 class='card-title text-center'>Connected Metrics</h4> </div> </div> </div> <div class='closed-card'> <div class='card card-chart' title='A work bench for Planners to get access to a set of canned reports plus curated files from ERP and Planning Systems for analysis'> <button class='card-header card-panel amber darken-2 d-flex align-items-center justify-content-center' style='text-align: center;padding: 12px 0;transition: all 0.3s ease;font-size: 80px;'> <i class='fa fa-heart' aria-hidden='true'></i> </button> <div class='card-body'> <h4 class='card-title text-center'>I Love Data</h4> </div> </div> </div> </div> <div class='scbanner'> <img src='/media/root/abcdef/images/sc_image.png' /> </div></section>"); var homeFooter = new sap.m.Bar("homeFooter",{visible:false}); var backorderDiagnostics = new sap.m.Page("backorderDiagnostics",{title:"Full Screen",showNavButton:true,showFooter:false,navButtonPress:function(oEvent){ window.location.href("https://www.w3schools.com") }}); var bdHeader = new sap.m.Bar("bdHeader",{}); var bdHome = new sap.m.Button("bdHome",{width:"100%",text:"Supply Chain Visibility and Connected Metrics",press:function(oEvent){ oApp.to(home) }}) var bdHtml = new sap.ui.core.HTML("bdHtml",{}); bdHtml.setDOMContent("<div class='main-content backorder' id='boPage' ng-controller='BOController' > <section class='filter-section px-4'> <ul class='collapsible'> <li> <div class='collapsible-header'> <h6 class='m-0'>Filter</h6> <span class='text-center w-100'>Click here to filter</span> </div> <div class='collapsible-body p-3'> <div class='row m-0'> <div class='switch col-sm-4 p-0'> <label> <input type='checkbox' ng-model='filter.excludeOnHold'> <span class='lever'></span> Exclude On-hold </label> </div> <div class='switch col-sm-4 p-0'> <label> <input type='checkbox' ng-model='filter.excludeMan'> <span class='lever'></span> Exclude Manual Allocation </label> </div> </div> <div class='row m-0'> <div class='input-field col-sm-4 m-0 pl-0'> <!--<autocomplete ng-model='filter.material' attr-placeholder='Material' no-auto-sort data='searchedMaterials' on-type='getMaterialSuggestion'></autocomplete>--> <input type='text' ng-model='filter.material' typeahead-wait-ms='600' placeholder='Material' uib-typeahead='item for item in searchedMaterials' ng-change='getMaterialSuggestion()' typeahead-loading='Loading' typeahead-no-results='noResults' class='autocomplete-input form-control'> <!--<div ng-show='noResults' class='no-results'>--> <!-- No Results Found--> <!--</div>--> </div> <div class='input-field col-sm-4 m-0 pl-0'> <select ng-model='filter.franchise'> <option disabled selected>Franchise</option> <option ng-repeat='item in franchises' value='{{item}}'> {{item}}</option> </select> </div> <div class='input-field col-sm-4 m-0 pl-0'> <input type='text' ng-model='filter.sellingDC' typeahead-wait-ms='600' placeholder='Selling DC' uib-typeahead='item for item in searchedDC' ng-change='getSellingDCSuggestion()' typeahead-loading='Loading' typeahead-no-results='noResults' class='autocomplete-input form-control'> <!--<div ng-show='noResults' class='no-results'>--> <!-- No Results Found--> <!--</div>--> <!--<autocomplete ng-model='filter.sellingDC' attr-placeholder='Selling DC' data='searchedDC' on-type='getSellingDCSuggestion'></autocomplete>--> </div> </div> <div class='row m-0'> <div class='input-field col-sm-5 m-0 pl-0'> <input type='text' ng-model='filter.productHierarchy' typeahead-wait-ms='600' placeholder='Product Hierarchy' uib-typeahead='item for item in searchedProductHierarchy' ng-change='getProductHierarchySuggestion()' typeahead-loading='Loading' typeahead-no-results='noResults' class='autocomplete-input form-control'> <!--<autocomplete ng-model='filter.productHierarchy' attr-placeholder='Product Hierarchy' data='searchedProductHierarchy' on-type='getProductHierarchySuggestion'></autocomplete>--> </div> <div class='input-field col-sm-5 m-0 pl-0'> <input type='text' ng-model='filter.planner' typeahead-wait-ms='600' placeholder='Planner' uib-typeahead='item for item in searchedPlanner' ng-change='getPlannerSuggestion()' typeahead-loading='Loading' typeahead-no-results='noResults' class='autocomplete-input form-control'> <!--<autocomplete ng-model='filter.planner' attr-placeholder='Planner' data='searchedPlanner' on-type='getPlannerSuggestion'></autocomplete>--> </div> <div style='z-index:0;'> <a class='waves-effect waves-light btn blue lighten-5' ng-click='clearFilters();'>Clear</a> <a class='waves-effect blue waves-light btn white-text' ng-click='getStockDetails(null,null)'>Filter</a> </div> </div> </div> </li> </ul> </section> <div class='container-fluid' ><!-- ng-init='accessToken()'--> <div class='row m-0' > <div class='col-sm-12 card-panel bocard p-3' id='hideDc'> <!--<h6>Backordered DCs</h6>--> <div id='BackorderedDC'></div> <div class='row'> <div class='col-sm-8'></div> <div class='col-sm-4 float-right'> <button type='submit' ng-click='changeLimit(10)' style='background:#337ab7;color:white' class='btn btn-warning'>Show Top 10</button> <button type='submit' ng-click='changeLimit(20)' style='background:#d9534f;color:white' class='btn btn-info'>Show Top 20</button> <button type='submit' ng-click='changeLimit(50)' style='background:#5cb85c;color:white' class='btn btn-info'>Show Top 50</button> </div> </div> </div> </div> <div class='row m-0' > <div class='col-sm-12 card-panel bocard p-3' id='hideMaterial'> <!--<h6>Backordered Materials</h6>--> <div id='Backordered'></div> <div class='row'> <div class='col-sm-8'></div> <div class='col-sm-4 float-right'> <button type='submit' ng-click='changeLimit(10)' style='background:#337ab7;color:white' class='btn btn-warning'>Show Top 10</button> <button type='submit' ng-click='changeLimit(20)' style='background:#d9534f;color:white' class='btn btn-info'>Show Top 20</button> <button type='submit' ng-click='changeLimit(50)' style='background:#5cb85c;color:white' class='btn btn-info'>Show Top 50</button> </div> </div> </div> </div> </div></div>"); var oPanel = new sap.m.Panel("oPanel",{}); var oTable = new sap.ui.table.Table("oTable",{selectionMode:"None"}); var Planttype = new sap.ui.table.Column("Planttype",{label:"Plant Type"}); var oText5 = new sap.m.Text("oText5",{text:"{plantType}",validateFieldGroup:function(oEvent){ }}); var cmReload = new sap.m.Button("cmReload",{tooltip:"Refresh",icon:"sap-icon://refresh",press:function(oEvent){ cacheReload(); }}); var angularApp=angular.module('angularApp', ['ui.bootstrap']); angular.module('angularApp').controller('BOController', BOController); BOController.$inject = ['$scope','$rootScope','$http','mainService']; function BOController($scope,$rootScope, $http, mainService) { } //# sourceURL=abcdef11.js </script> </body> </html> Could anyone please help me.
3 Answers
Answers 1
Try moving your angular app definitions inside a new file and then load it like this
<script src="/public/neptune/p9library.js"></script> <script id="sap-ui-bootstrap" type="text/javascript" src="/public/openui5/1.52/sap-ui-core.js" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-noDuplicateIds="false" data-sap-ui-preload="async" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.ui.layout,sap.ui.unified,sap.ui.table,sap.m"></script> <script src="/media/root/abcdef/js/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/allmighty-autocomplete/1.0.140706/autocomplete.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="/media/root/abcdef/js/jquery.simplePagination.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script> <script src="/public/highsuite/highcharts.js"></script> <script src="/public/highsuite/highcharts-more.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> <!-- Load your angular app here --> <script src="angularApp.js"></script> A few things more
- Over here you should have stored your module in the
angularAppvariable like thisangularApp = angular.module('angularApp', ['ui.bootstrap']); It seems so that you have ambiguous dependency injections inside the
MainControllerMainController.$inject = ['$scope','$rootScope','$http','mainService'];andMainController.$inject = ['$scope','$rootScope','$http'];
Answers 2
First off, I would suggest moving anything that requires Angular to be set after angular. That will ensure that Angular has loaded and things requiring it will not fail to load.
<html> <title></title> <head> <!-- If p9library requires AngularJS, then move it below --> <!-- Non AngularJS required imports --> <script src="/public/neptune/p9library.js"></script> <!-- AngularJS --> <script src="/media/root/abcdef/js/angular.js"></script> <!-- AngujarJS required imports --> <!-- Links --> </head> <body class="sapUiBody" role="application" id="body" ng-app="angularApp"> <script> //Stripped this stuff out for smaller example set var angularApp = angular.module('angularApp', ['ui.bootstrap']); //Changed how this is accessed. angularApp.controller('BOController', BOController); function BOController($scope,$rootScope, $http, mainService) { //Doing controller stuff } //Best practice to do this after function definition BOController.$inject = ['$scope','$rootScope','$http','mainService']; //# sourceURL=abcdef11.js </script> </body> </html> Secondly, I would suggest moving the script code into its own file and use <script></script> to get it compiled. This will help narrow down and make things easier to debug in the long run. As it stands, it is not required to do this, however it is good practice.
Third, you had the <html> and <head> open tags missing. I am assuming that you had copied the code from your source, so double check that.
Give this a try. If it does not work, then leave me a comment and I will look into it further.
Answers 3
I believe if you are using planet 9, you should not place any content in the DOM element.Most UX framework overwrite the content inside the tag
<body class="sapUiBody" role="application" id="body" ng-app="angularApp"> I believe this would lead to overwriting of DOM content inside body and remove you angular code leading to the error.
0 comments:
Post a Comment