Question

我将我的Angular应用程序从gulp移植到Webpack和ES6。我使用auth0进行身份验证，并遵循auth0的教程：

https://auth0.com/docs/quickstart/spa/angularjs

我的版本是：

棱角1.5.8
angular-lock 1.0.1
auth0-lock 10.2.2

当我加载我的应用时，我遇到的错误是：

Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module auth0.lock due to:
Error: Auth0Lock must be loaded.

我有一个libraries.js文件，我导入了所有依赖项：

import 'auth0-lock';
import 'angular-lock';
import 'angular-jwt';

在我的index.js中我有以下设置：

＆＃13;

import './libraries';
import './app/home/home-component';
import './app/shared/security/authService';

module.exports = angular
    .module('app',
        ['ui.router', 'ui.bootstrap', 'auth0.lock', 'angular-jwt', 'app.homeModule', 'shared.authModule'])
    .config(configFunction)
    .run(runFunction);

＆＃13;

我尝试在我的webpack.config.js中添加此插件但没有运气：

＆＃13;

new webpack.ProvidePlugin({
  Auth0Lock: "auth0-lock",
}),

＆＃13;

关于如何在角锁加载之前加载Auth0Lock的任何想法？我认为这将会发生，因为我首先重视它，但显然不是。

非常感谢任何帮助。

Answer 1

我相信auth0-angular在窗口对象中查找Auth0Lock。尝试通过更改为：

来更改全局变量的名称

new webpack.ProvidePlugin({
    "window.Auth0Lock": "auth0-lock"
}),

Answer 2

如果查看 angular-lock.js 的源代码，则导出为：

exports.default = Auth0Lock;

因此，解决方案是在webpack.config中的ProvidePlugin中添加＆＃39;默认＆＃39; ：

plugins: [          
    new webpack.ProvidePlugin({

        Auth0Lock: ['auth0-lock','default'],
    })
],

我已经测试了这种方法，它按预期工作。

使用Angular 1.5.8和Webpack进行Auth0锁定

2 个答案: