1

我正在尝试将大型 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']);

Unknown provider 错误中提到的服务如下所示：

(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 中的启动函数。我已经尝试将应用程序中的所有模块包含在“app-engine”需要数组中，这并没有改变任何东西。有趣的是 bestInterceptor 函数没有抛出任何错误，尽管也使用了服务（StateBootstrappingService 的设置方式与 StateService 相同）。

有什么明显的我做错了吗？或者任何人有任何想法如何解决这个问题？

4

1 回答 1

0

尝试这个：

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

对我来说，这是必要的，因为尚未将其他子组件（提供程序和服务）添加到模块中。在“document.ready()”上运行它可以让这些项目有机会在尝试手动引导之前附加（因为以后手动引导时无法添加它们）

我不喜欢使用，document.ready()所以我仍在寻找一种更正式的方式来做到这一点

于 2022-01-19T20:51:47.493 回答