使用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配置中的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>
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- Webpack开发服务器和React服务器端渲染
- 让Webpack管理Quirky AMD定义的最佳方式
- 什么'在webpack外部设置中,reactDom和reactDom不同
- webpack代码拆分了handlerbs文件——结果是文件很大
- 将webpack和babel与父项目目录中的文件一起使用
- React, Webpack: bundle.js is not generated
- Webpack UglifyJS仍在发出警告消息
- 将require('..')与变量一起使用与在webpack中使用字符串相比
- webpack开发模式和生产构建模式之间有什么区别
- index.html使用webpack开发服务器未重新加载
- 如何在Webpack中从导出中排除供应商模块peerDependencies
- 如何在使用webpack时不解决需求
- 通过Webpack导入模块中的图像
- 使用提取文本webpack插件时出现意外字符
- 如何在不使用require语句的情况下使用webpack加载目录中的所有文件
- 如何使用webpack将全局JS文件包含到我的React项目中
- 使用Angular 1.5.8和webpack的Auth0
- Auth0-js with Angular 2 (RC5), Webpack and CLI