Angular 应用程序在 Firefox 中中断

Posted 2023-03-06

技术标签:

【中文标题】Angular 应用程序在 Firefox 中中断【英文标题】：Angular App breaking in Firefox 【发布时间】：2017-01-08 16:12:08 【问题描述】：

编辑：此问题已修复。由于 Firefox 中的这个问题，我发现在 ui-router 中使用“watch”作为我的一个状态的名称存在问题https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Object/watch。

滚动到该问题的底部以查看 main.js 文件中的最终编辑。

所以我创建了一个 Angular 应用程序（版本 1.5.7） 您可以在此处查看项目文件和实时部署的链接 -> https://github.com/StephenGrable1/AngularJS-Single-Page

它在 Chrome 和 Safari 中完美运行。但是，在 Firefox 中，我收到错误 $injector:modulerr。

控制台中的错误提供了指向 Angular 文档的一部分的链接，其中显示：“无法实例化模块单页应用程序，原因是： queued.shift 不是一个函数”。我已经注入了我的依赖项以获得良好的实践，但这仍然不能解决 Firefox 中的问题。

以下是我的两个主要 Angular 文件。

这是我的控制器/contactCtrl.js

angular
.module('Single-Page-App')
.controller('contactCtrl', ['$scope', '$http', function($scope, $http)
    $scope.contact = name : '', email : '', subject : '', message : '';

var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);

...

这是我使用 ui-router 的 js/main.js

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", 
    url:"/home",
    views: 
        "main@": 
            templateUrl: "partials/home.html"
        
    
)
.state("listen", 
    url:"/listen",
    views: 
        "main@": 
            templateUrl: "partials/listen.html"
        
    
)
.state("watch", 
    url:"/watch",
    views: 
        "main@": 
            templateUrl: "partials/watch.html"
        
    
)
.state("contact", 
    url:"/contact",
    views: 
        "main@": 
            templateUrl: "partials/contact.html"
        
    

])

我想成为一名优秀的程序员并关注跨浏览器功能（我知道这令人印象深刻）所以我想了解如何为我自己和其他任何可能的人解决这个问题遇到这个问题。

更新：这是我的 index.html 底部的脚本顺序

<script src="js/angular-1.5.7/angular.js"></script>
<script src="js/angular-1.5.7/angular-ui-router.js"></script>
<script src="js/angular-1.5.7/angular-messages.js"></script>

<!-- Our Custom Javascripts -->
<script src="js/main.js"></script>
<script src="controllers/contactCtrl.js"></script>
<script src="js/footer.js"></script>

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="js/bootstrap.min.js"></script>

我修改了控制器以使用 var "app"，如下所示：

app.controller('contactCtrl', ['$scope', '$http', function($scope, $http)
        $scope.contact = name : '', email : '', subject : '', message : '';

但是 Firefox 中仍然存在错误：/

更新：当我在 ng-app 中删除名称时，应用程序会很好地显示在 Firefox 浏览器中，但路由不起作用，角度控制器也不起作用。下面是解决 Firefox 错误但破坏角度功能的代码。

<!DOCTYPE html>
<html lang="en" ng-app> <!-- When I rename to np-app="Single-Page-App" it breaks in Firefox. -->
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>AngularJS Single Page</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
   <div ng-include="'templates/header.html'"></div>
   <div ui-view="main"></div><!-- This is where the website content gets inserted -->
   <div ng-include="'templates/footer.html'"></div>

    <script src="js/angular-1.5.7/angular.js"></script>
    <script src="js/main.js"></script>
    <script src="js/angular-1.5.7/angular-ui-router.js"></script>
    <script src="js/angular-1.5.7/angular-messages.js"></script>

    <!-- Our Custom Javascripts -->
    <script src="js/main.js"></script>
    <script src="controllers/contactCtrl.js"></script>
    <script src="js/footer.js"></script>

    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="js/bootstrap.min.js"></script>


   </body>
</html>

更新：

问题已解决！！！

显然，我的一个状态的“watch”名称导致了错误，因此我将其切换为“watchHere”，它在 Firefox 中有效！此名称更改修复了错误！在未来，我希望这可以为一些可怜的流浪灵魂节省一些时间。

   var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
    $urlRouterProvider.otherwise('/home');
    var home = 
        name: 'home',
        url: '/home',
        views: 
                "main@": 
                    templateUrl: "partials/home.html"
                
            
      

      var listen = 
        name: 'listen',
        url: '/listen',
        views: 
                "main@": 
                    templateUrl: "partials/listen.html"
                
            
      

        var contact = 
        name: 'contact',
        url: '/contact',
        views: 
                "main@": 
                    templateUrl: "partials/contact.html"
                
            
      

        var watchHere = 
        name: 'watchHere',
        url: '/watch',
        views: 
                "main@": 
                    templateUrl: "partials/watch.html"
                
            
      

      $stateProvider.state(home);
      $stateProvider.state(listen);
      $stateProvider.state(contact);
      $stateProvider.state(watchHere);



])

angular.bootstrap(document, ['Single-Page-App']);

【问题讨论】：

【参考方案1】：

修改订单代码

MAIN.js

 // first LINE
    var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);
    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", 
    url:"/home",
    views: 
        "main@": 
            templateUrl: "partials/home.html"
        
    
)
.state("listen", 
    url:"/listen",
    views: 
        "main@": 
            templateUrl: "partials/listen.html"
        
    
)
.state("watch", 
    url:"/watch",
    views: 
        "main@": 
            templateUrl: "partials/watch.html"
        
    
)
.state("contact", 
    url:"/contact",
    views: 
        "main@": 
            templateUrl: "partials/contact.html"
        
    

])

var "app" 是你的模块

文件 CONTROLLER.JS

app.controller('contactCtrl', ['$scope', '$http', function($scope, $http)
    $scope.contact = name : '', email : '', subject : '', message : '';

和订单文件

1. <script src="angular.min.js">
2. <script src="main.js">
3. <script src="controller.js">

并在 MAIN 中使用此结构：

    app.config(['$stateProvider',function($stateProvider ) 

        var home = 
        name: 'home',
        url: '/home',
        views: 
                "main@": 
                    templateUrl: "partials/home.html"
                
            
      

      var contact = 
        name: 'contact',
        url: '/contact',
        views: 
                "main@": 
                    templateUrl: "partials/watch.html"
                
            
      

var example = 
    name: 'example',
    url: '/example',
    views: 
      "main@": 
        templateUrl: "partials/home.html"
      
    
  

var example2 = 
    name: 'example2',
    url: '/example2',
    views: 
      "main@": 
        templateUrl: "partials/home.html"
      
    
  

      $stateProvider.state(home);
      $stateProvider.state(contact);
      $stateProvider.state(example);
      $stateProvider.state(example2);

    ])

【讨论】：

感谢 Alfredo，我已经更新了控制器中的文件，但是我的 index.html 已经包含了您建议的脚本文件的顺序，并且错误仍然出现在 Firefox 中嗨，Alfredo，我非常感谢所有帮助，您建议的更改是清理代码的好方法，但不幸的是，在建议的编辑后问题仍然存在于 Firefox 中。我在 Firefox 中验证。我要在 github 上做 pull request。很奇怪，所以我尝试了您的解决方案，它适用于两条路线......但是一旦我添加第三条路线，应用程序就会再次中断......

以上是关于Angular 应用程序在 Firefox 中中断的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET MVC 表单身份验证域属性在 Firefox 中中断登录

Angular 10：使用浏览器的后退按钮从外部 URL 导航回来时，ngOnInit 未在 Firefox 中部署的应用程序版本中触发

在Firefox中切换浏览器选项卡时jquery动画中断

复选框点击事件会中断以运行代码，但$ .trigger（'click'）只会在Chrome中识别，而不会在Firefox中识别。为什么？

Angular 跨域请求在 Chrome 上有效，在 Firefox 和 IE 上失败

Angular 1.3 动画在 Firefox 中不起作用