大きな angular.js アプリ (1.5.9) を最新バージョンの Angular にアップグレードしようとしています。
私はアプリをハイブリッド AngularJs/Angular アプリに変換する過程にあり、ガイドのこのステップに到達しました:
https://angular.io/guide/upgrade#bootstrapping-hybrid-applications
これまでのところ、gulp の使用から webpack 4 に変更しましたが、アプリは以前と同じように動作しています。
私が抱えている問題は、index.html での ng-app ディレクティブの使用から Javascript でのブートストラップに切り替えると、アプリの起動に失敗し、次のエラーがスローされることです。
キャッチされないエラー: [$injector:unpr] 不明なプロバイダー: StateServiceProvider <- StateService
これは、次のような 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
}
})();
ガイドの指示に従って、index.html から ng-app="app-engine" を削除し、代わりに JavaScript に追加しています。app.modules.js ファイルの一番下に追加しました。
angular.bootstrap(document.body, ['app-engine']);
この変更の後、不明なプロバイダー エラーがスローされます。ソースが app.js の startUp 関数であることを確認しました。アプリのすべてのモジュールを「app-engine」requires配列に含めてみましたが、何も変更されませんでした。サービスも使用しているにもかかわらず、bestInterceptor 関数がエラーをスローしていないのは興味深いことです (StateBootstrappingService は StateService と同じ方法でセットアップされています)。
私が間違っていることは明らかですか?または、これを解決する方法を知っている人はいますか?