javascript - Auth0 与 Angular 1.5.8 和 webpack

标签 javascript angularjs webpack auth0

我正在尝试将 Auth0 集成到我与 webpack 捆绑的 Angular 项目中。当我启动应用程序时,出现错误:

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

我的 Config.js 看起来像:

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

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import loginController from 'components/login/login.controller';
import authService from 'shared/auth/auth.service';


const app = angular.module('app',[uiRouter, 'auth0.lock', 'angular-jwt']);

app.config(($stateProvider, lockProvider, $urlRouterProvider, $locationProvider) => {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('login',{
            url:'/login',
            template: require('components/login/login.view.html'),
            controller: loginController,
            controllerAs: 'vm'
        })

    lockProvider.init({
        clientID: 'xxx',
        domain: 'xxx'
    });

    $locationProvider.html5Mode(true);
});

app.service('authService',authService);

export default app;

我的index.js是

import angular from 'angular';
import appModule from './config';
angular.bootstrap(document, [appModule.name]);

run.$inject = ['$rootScope', 'authService', 'lock'];

function run($rootScope, authService, lock) {
    // Put the authService on $rootScope so its methods
    // can be accessed from the nav bar
    $rootScope.authService = authService;

    // Register the authentication listener that is
    // set up in auth.service.js
    authService.registerAuthenticationListener();

    // Register the synchronous hash parser
    lock.interceptHash();

    console.log('success');
}

我在一些地方读到在 webpack 配置中设置 window.Auth0Lock 可以修复它,但仍然没有运气。

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

我的问题和this question一模一样,但可惜它仍然没有答案。我会提供任何帮助。

编辑:下面的解决方案似乎没有解决我的问题,我仍然陷入困境。我相信我需要所有必需的依赖项。

最佳答案

所以我确实需要 lock.min.js,当我尝试在我的配置文件中要求它时,webpack 会抛出错误。我还尝试下载并要求可分发,但这也给我带来了问题。我放弃了,现在我直接在我的index.html 上引用CDN。我认为你也可以使用 webpack script-loader。

    <script type="text/javascript" src="https://cdn.auth0.com/js/lock/10.5/lock.min.js"></script>
    <script src="bundle.js"></script>

希望这有帮助。

关于javascript - Auth0 与 Angular 1.5.8 和 webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40353237/

相关文章:

javascript - 在 d3js 中生成箭头

angularjs - 在 AngularJS 服务之间共享数据

javascript - 为什么对我的指令使用 ng-repeat 会对我的绑定(bind)产生影响?

javascript - 如何让 webpack 使用文件

webpack - 如何在 quasar js 框架中启用 webpack 实验选项?

javascript - 为什么在 webpack 中需要 html 文件时会得到位置字符串?

javascript - 限制文本区域中单行的行数和字母数

javascript - 卡在未定义的 "Cannot read property ' props' 处”

cordova - 从相机加载图像内容到文件

javascript jquery 上传前预览图像