使用Angular 1.5.8和webpack的Auth0

Auth0 with Angular 1.5.8 and webpack

本文关键字:webpack Auth0 Angular 使用      更新时间:2023-09-26

我正在尝试将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配置中的Auth0Lock可以解决这个问题,但仍然没有运气。

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

我的问题和这个问题完全一样,但是遗憾的是它仍然没有答案。我将感激任何帮助。

编辑:下面的解决方案似乎不能解决我的问题,我仍然卡住了。我相信我需要所有必需的依赖项

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

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