使用 Angular 1.5.8 和 webpack 的 Auth0
Auth0 with Angular 1.5.8 and webpack
我正在尝试将 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 type="text/javascript" src="https://cdn.auth0.com/js/lock/10.5/lock.min.js"></script>
<script src="bundle.js"></script>
希望对您有所帮助。
我正在尝试将 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 type="text/javascript" src="https://cdn.auth0.com/js/lock/10.5/lock.min.js"></script>
<script src="bundle.js"></script>
希望对您有所帮助。