个人中心
gpt4 book ai didi

javascript - Uncaught Error : [$injector:modulerr] when using Angular JS with planet 9

转载 作者：行者123 更新时间：2023-11-29 23:18:26 26 4
gpt4 key购买 nike

我收到以下错误，一旦我在 planet 9 中使用 Angularjs。
Planet 9 是一个构建在 sap ui5 之上的工具，它包括拖放以及我们还可以包括 html、css、js .
因此，对于一个应用程序，我需要 ng-repeat 之类的东西。所以我想到了使用 AngularJS。我可以在哪里使用该工具的路由。我不会使用来自 angular js 的路由。所以，没有必要加载 ngRoute。我检查了SO中的解决方案是否存在上述错误。几乎每个答案都说使用 ngRoute。即使在添加 ngRoute 之后，也不走运。
我的感觉是， Angular 应用程序试图在加载 Angular js 脚本之前进行初始化。但我不确定这是问题所在。但是我看不到任何与 angular js 相关的功能在起作用。但有时取决于互联网速度，它会起作用。
甚至我都想过手动引导 Angular 应用程序。但是该工具已经默认添加了 ng-app="angularApp" 。是什么导致了以下错误，如果手动引导是解决此问题的方法，那么如何删除第一个 ng-app 自动引导，然后在加载必要的 Angular js 后执行手动引导。

这是模块的样子

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');
    };
}

问题是，如果我使用 Angular 版本 1.6.9，应用程序将不会自行加载。如果我使用 1.5.7。它有时会加载，有时不会这是我有时遇到的错误。

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)

我在使用未压缩的 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

注意:还有一个信息，当我没有打开开发人员工具窗口时，应用程序将加载而不会出现此错误。如果开发者工具窗口打开并尝试加载，应用程序将每 4 次加载一次。其他三次它会给出上述错误

这是运行应用程序后页面源代码的样子注意:我已经删除了这个问题不需要的 Controller 代码

<!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>

谁能帮帮我

最佳答案

尝试将您的 Angular 应用程序定义移动到一个新文件中，然后像这样加载它

<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>

还有一些事情

  • 在这里，您应该像这样将模块存储在 angularApp 变量中 angularApp = angular.module('angularApp', ['ui.bootstrap']);

  • 看来您在 MainController

    中有不明确的依赖项注入(inject)

    MainController.$inject = ['$scope','$rootScope','$http','mainService']; 和MainController.$inject = ['$scope','$rootScope','$http'];

关于javascript - Uncaught Error : [$injector:modulerr] when using Angular JS with planet 9，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51771241/

26 4 0
文章推荐： php - 子查询和主查询中的日期之前
文章推荐： android - SMS Retriever API - 永久监听器
文章推荐： php - mysql转储命令与 'waiting for table lock property'
文章推荐： java - 从火力地堡检索数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com