Angular Stormpath Injector Unknown Provider答案

【问题标题】：Angular Stormpath Injection Unknown ProvidorAngular Stormpath Injector Unknown Provider
【发布时间】：2023-03-29 21:50:01
【问题描述】：

我正在尝试使用带有风暴路径的 Angular ui 路由器来获取 Angular，但我不断收到未知的提供程序错误。我的代码如下，

var angular = require("angular");

// app.js
var app = angular.module('app', [require('angular-ui-router'), require("stormpath-sdk-angularjs")]);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'partials/home.html'
    })
    .state('about', {
        url: '/about',
        templateUrl: 'partials/about.html'
    });
})
.run(function($stormpath){
  $stormpath.uiRouter({
    loginState: 'login',
    defaultPostLoginState: 'home'
  });
});

这是错误页面，Error: $injector:unpr Unknown Provider

【问题讨论】：

我会说问题就在这里~github.com/stormpath/stormpath-sdk-angularjs/blob/master/dist/…。他们在module.exports中使用了错误的名字

标签： angularjs angular-ui-router browserify commonjs stormpath

【解决方案1】：

这是 stormpath-sdk-angularjs 的一个错误，已在版本 0.8.2 中修复。

要让它与 browserify 一起工作，请将这些行添加到您的 package.json:

"browser": {
  "stormpath": "./node_modules/stormpath-sdk-angularjs/dist/stormpath-sdk-angularjs.js",
  "stormpath.templates": "./node_modules/stormpath-sdk-angularjs/dist/stormpath-sdk-angularjs.tpls.js"
}

然后像这样要求它：

var angular = require("angular");

var app = angular.module('app', [
  require('angular-ui-router'),
  require('stormpath'),
  require('stormpath.templates')
]);

【讨论】：

【解决方案2】：

Stormpath 在其 module.exports 中使用了错误的模块名称（我在这里提出了一个错误 ~ https://github.com/stormpath/stormpath-sdk-angularjs/issues/80）。

现在，你可以这样做

var angular = require("angular");
require('stormpath-sdk-angularjs');

// app.js
var app = angular.module('app', [
    require('angular-ui-router'), // this one is fine
    'stormpath',
    'stormpath.templates'
]);

【讨论】：

感谢您报告此错误 - 它已在最新版本中修复：github.com/stormpath/stormpath-sdk-angularjs/pull/81

【解决方案3】：

一般你不会以这种方式在角度依赖列表中使用require()。相反，您需要：

var app = angular.module('app', ['ui-router','stormpath']);

确保正确包含两个库。

【讨论】：

我正在使用 browserify，它只适用于 ui-router，所以我认为它是有效的。我还查看了stormpath 包，它包含一个index.js 文件，这让我假设它可以包含在内。我认为 run 函数的参数结构存在一些问题。
我明白了。尝试不使用stormpath的require，然后将'stormpath'作为模块依赖项，看看会发生什么。

【解决方案4】：

前面的答案可能是解决方案的一部分。也许您正在使用诸如 WebPack 之类的工具来编译您的应用程序？这些信息会很有用。请注意，Stormpath Angular SDK 在 Angular 命名空间中提供了两个模块，stormpath 和 stormpath.templates。如果使用browserify，可能需要使用require('dist/stormpath-sdk-angularjs.js')

附：我在 Stormpath 工作，如果您想私下与我们分享您的代码，请随时通过 support@stormpath.com 与我们联系。谢谢！

【讨论】：

为什么module.exports = 'ui.router' 中有dist/stormpath-sdk-angularjs.js？

【解决方案5】：

事实证明，stormpath sdk 将自身注入到 Angular 中。解决方法是在angular之后加载库。

var angular = require("angular");
var stormpath = require("stormpath-sdk-angularjs");

var app = angular.module('app', [require('angular-ui-router'), "stormpath", "stormpath.templates"]);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    //States Here
})
.run(function($stormpath){
    $stormpath.uiRouter({
        loginState: 'login',
        defaultPostLoginState: 'home'
    });
});

【讨论】：