角为1.5.8和Webpack的Auth0锁

Question

我正在将我的角度应用程序从gulp移植到Webpack和ES6。我使用auth0进行身份验证，下面是来自auth0的教程：

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

我的版本是：

• 角1.5.8
• 角锁1.0.1
• 自编-锁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中，我有以下设置：

​

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有什么想法吗？我以为这会发生，因为我首先重视它，但最重要的不是。

任何帮助都是非常感谢的。

Answer 1

我相信Auth0Lock在窗口对象中具有0角的外观。尝试更改全局变量的名称，方法是：

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

Answer 2

如果您查看角锁.as的源代码，则导出如下：

exports.default = Auth0Lock;

因此，解决方案是在ProvidePlugin中添加一个“默认”的webpack.config：

plugins: [          
    new webpack.ProvidePlugin({

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

我已经测试过这个方法，它的工作就像预期的那样。