Блог

Я пытаюсь обновить большой angular.js приложение (1.5.9) до последней версии Angular.

Я нахожусь в процессе превращения приложения в гибридное приложение AngularJS/Angular и достиг этого шага в руководстве:

https://angular.io/guide/upgrade#bootstrapping-hybrid-applications

До сих пор я перешел с использования gulp на webpack 4, и приложение работает так же, как и раньше.

Проблема, с которой я сталкиваюсь, заключается в том, что я переключаюсь с использования директивы ng-app в своем index.html для начальной загрузки в Javascript приложение не запускается, что приводит к этой ошибке:

Неперехваченная ошибка: [$инжектор:unpr] Неизвестный поставщик: Поставщик государственных услуг

Это исходит от моего app.js файл, который выглядит следующим образом:

 angular.module('app-engine', [
    'app-engine.state',
    'app-engine.api',
    // other modules
])
.factory('bestInterceptor', bestInterceptor)
// other configs which aren't throwing Unknown provider errors
.run(startUp);

bestInterceptor.$inject = ['StateBootstrappingService'];

function bestInterceptor(StateBootstrappingService) {
    return {
        request: config => {
            if (!StateBootstrappingService.isBestSsoOn()) {
                config.headers['x-impersonated-user'] = StateBootstrappingService.getUserName();
            }
            return config;
        }
    };
}

startUp.$inject = ['$rootScope', '$state', '$timeout', 'StateService']

function startUp($rootScope, $state, $timeout, StateService) {
    // start up code
}
 

Существует отдельный app.modules.js файл, который определяет другие модули в приложении.

Включая:

 angular.module('app-engine.state', ['rx', 'app-engine.api']);
 

Услуга, упомянутая в ошибке Неизвестного поставщика, выглядит следующим образом:

 (function() {
    'use strict';
    angular
        .module('app-engine.state')
        .factory('StateService', StateService);

    StateService.$inject = [
        '$state',
        '$log',
        'rx',
        // a few other services that exist in the app
    ];

    function StateService(
         // all the above in $inject
    ) {
         // service code
    }
})();
 

Как указано в руководстве, я удаляю ng-app=»app-engine» из своего index.html и вместо этого добавляю его в JavaScript. Я добавил его внизу на своем app.modules.js файл.

 angular.bootstrap(document.body, ['app-engine']);
 

После этого изменения возникает ошибка неизвестного поставщика. Я подтвердил, что источником является моя функция запуска в app.js. Я попытался включить все модули в приложение в массив «app-engine», который ничего не изменил. Интересно, что функция bestInterceptor не выдает никаких ошибок, несмотря на то, что также использует службу (служба загрузки состояния настраивается так же, как и служба состояния).

Есть ли что-то очевидное, что я делаю неправильно? Или у кого-нибудь есть какие-либо идеи, как это решить?

Попробуйте это:

 angular.element(document).ready(function () {
  angular.bootstrap(document.body, ['app-engine'])
})
 

Для меня это было необходимо, потому что другие субкомпоненты (поставщики и службы) еще не были добавлены в модуль. Запуск it в «document.ready()» дает этим элементам возможность прикрепиться перед попыткой загрузки вручную (поскольку они не могут быть добавлены позже при загрузке вручную).

Мне не нравится использование document.ready() , поэтому я все еще ищу более официальный способ сделать это