使用 Angular 1.5.8 和 Webpack 进行 Auth0 锁定答案

【问题标题】：Auth0 lock with Angular 1.5.8 and Webpack使用 Angular 1.5.8 和 Webpack 进行 Auth0 锁定
【发布时间】：2017-01-11 00:49:09
【问题描述】：

我正在将我的 Angular 应用程序从 gulp 移植到 Webpack 和 ES6。我正在使用 auth0 进行身份验证，并按照此处的 auth0 教程进行操作：

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

我的版本是：

角1.5.8
角锁 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.

我有一个 library.js 文件，我在其中导入了所有依赖项：

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

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

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);

我尝试在我的 webpack.config.js 中添加这个插件，但没有成功：

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

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

非常感谢任何帮助。

【问题讨论】：

标签： angularjs webpack auth0

【解决方案1】：

我相信 auth0-angular 在窗口对象中寻找 Auth0Lock。尝试通过更改为来更改全局变量的名称：

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

【讨论】：

【解决方案2】：

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

exports.default = Auth0Lock;

因此解决方案是将 'default' 添加到 webpack.config 中的 ProvidePlugin：

plugins: [          
    new webpack.ProvidePlugin({

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

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

【讨论】：