Gracefully xử lý AngularJS Lỗi: $ injector: Module nomod Unavailable

Question

ứng dụng góc của tôi phụ thuộc vào một dịch vụ góc bên thứ ba:

var app = angular.module("ninjaModule", ['angular-google-analytics']); 

Các ứng dụng tải lên tốt, miễn là plugin chặn quảng cáo của tôi đang tắt . Tuy nhiên, với trình chặn quảng cáo trên góc ném một lỗi $injector:nomod, không tải toàn bộ ứng dụng.

Tôi đang tìm cách xử lý các lỗi này một cách duyên dáng và do đó có thể tải ứng dụng bất kể trình chặn quảng cáo. Nếu góc-google-analytics sẽ không có ở đó - tốt, nó không quan trọng, tôi có thể giải quyết nó hoặc thiết lập một số dự phòng. Nhưng một tình huống mà toàn bộ ứng dụng bị treo không phải là một lựa chọn cho tôi. Bất kỳ ý tưởng?

Để chính xác - Tôi không muốn làm việc xung quanh trình chặn quảng cáo, ví dụ: bằng cách đổi tên tệp tập lệnh của tôi. Tôi mong đợi một mẹo ma thuật cố gắng bắt mắt.

Plunker: http://plnkr.co/edit/sbEG6vclPidPSNGV5Bsa

Answer 1

Cuối cùng tôi đã làm việc. Các giải pháp đòi hỏi một vài hacks, mặc dù:

1. kiểm tra nếu góc-google-phân tích được nạp
2. chuẩn bị danh sách phụ thuộc (deps) cho các mô-đun chính khi đang bay
3. sử dụng $injector thay vì Analytics một cách rõ ràng

Tuy nhiên, tôi cần định cấu hình AnalyticsProvider, nhưng cần tương đối dễ dàng với $injector.

---

var deps = []; 

try { 
    angular.module("angular-google-analytics"); // this throws if GA script is not loaded 
    deps.push('angular-google-analytics'); 
} catch(e){ console.error("GA not available", e); } 

angular.module('mainApp', deps) 
.run(function($rootScope, $injector) { 
    try { 
    Analytics = $injector.get('Analytics'); 
    $rootScope.trackPage = function() { 
     console.log('Analytics in action!'); 
     Analytics.trackPage(); 
    } 
    } catch(e) { 
    $rootScope.trackPage = function(key, label) { 
     console.log("Fallback in action!") 
    } 
    } 
}) 
.controller('MyCtrl', function($rootScope, $scope) { 
    $scope.message = 'Hello World!'; 
    $rootScope.trackPage(); 
}); 

plunker Cập nhật: http://plnkr.co/edit/Zo4RgKOybzhvJQdW2nQZ?p=preview

Answer 2

Kể từ angular-google-analytics đòi hỏi một khối config để thiết lập tài khoản, đặt cược tốt nhất của bạn là để tách phân tích google báo cáo thành tiểu mô-đun riêng biệt của ứng dụng của bạn:

//create separate module for analytics reporting 
var reportingModule = angular.module('mainApp.reporting', [ 
    'angular-google-analytics' 
]) 
.config(function(AnalyticsProvider) { 
    AnalyticsProvider.setAccount('UA-HELLO-GA'); 
}) 
.run(function(Analytics) { 
    console.log('mmm.. analytics is good for you'); 
}); 

Và sau đó tiêm mô-đun phụ này vào mô-đun chính của bạn một cách không đồng bộ qua mảng module.requires để nó chạy sau khi mô đun chính đã hoàn thành quá trình khởi động:

var mainApp = angular.module('mainApp', [ 

]) 
.controller('MyCtrl', function($scope) { 
    $scope.message = 'Hello World!'; 
}); 

//set the dependency after app finished bootstrapping 
setTimeout(function() { 
    angular.module('mainApp').requires.push('myapp.reporting'); 
}, 1); 

Bằng cách này, mô-đun chính kết thúc quá trình khởi động mà không gặp lỗi mô-đun phụ báo cáo ảnh hưởng đến nó.

Đây là phiên bản chia đôi của người bạn: http://plnkr.co/edit/lgNZOz4MZx0FGoCOGRC9

Answer 3

Câu trả lời được chấp nhận phá vỡ gulp dependency injection vì vậy tôi lặp khi nó để tìm ra một khép kín phương pháp hơn (bạn vẫn sẽ cần phải tiêm thẻ script của module này bằng tay mặc dù nếu bạn đang dựa vào gulp-inject).

Bạn có thể thêm phụ thuộc dynamically và bạn có thể tránh sử dụng hoàn toàn $injector.

angular.module('app', [ 
    'your', 
    'regular', 
    'dependencies' 
]) 
    .config(function(...) { 
     /*your normal code*/ 
    }) 
    .run(function(...) { 
     /*with no concern for analytics*/ 
    }) 
    //mimicking your answer for equivalence 
    .controller('MyCtrl', function($rootScope) { 
     if ($rootScope.Analytics) 
      $rootScope.Analytics.trackPage(); 
    }) 
; 


//protect against adblockers 
try { 
    //throws if not available 
    angular.module('angular-google-analytics'); 

    //dynamically add the dependency 
    angular.module('app').requires.push('angular-google-analytics'); 

    //set it up 
    angular.module('app') 
     .config(function (AnalyticsProvider) { 
      AnalyticsProvider.setAccount('UA-00000000-0'); 
     }) 
     //so we dont need to use $injector 
     .run(function(Analytics, $rootScope) { 
      $rootScope.Analytics = Analytics; 
     }) 
    ; 
} catch(e) { console.error('GA not available'); }