Auth0 lock with Angular 1.5.8 and Webpack

问题

I'm porting my Angular app from gulp over to Webpack and ES6. I'm using auth0 for authentication, and following the tutorial from auth0 here:

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

My versions are:

angular 1.5.8
angular-lock 1.0.1
auth0-lock 10.2.2

What I'm strugling with is this error I get when I'm loading up my app:

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

I have a libraries.js file where I import all my dependencies:

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

and in my index.js I have the following setup:

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);

I have tried adding this plugin in my webpack.config.js with no luck:

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

Any ideas of how I can make my Auth0Lock be loaded before the angular-lock loads? I thought that was going to happen since I important it first, but apperantly not.

Any help is much appreciated.

回答1:

I believe auth0-angular looks for Auth0Lock in the window object. Try changing the name of the global variable by changing to:

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

回答2:

If you look at the source code for angular-lock.js the exports are given as:

exports.default = Auth0Lock;

Hence the solution is to add a 'default' to the ProvidePlugin in your webpack.config:

plugins: [          
    new webpack.ProvidePlugin({

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

I have tested this approach and it works as expected.

来源：https://stackoverflow.com/questions/39300263/auth0-lock-with-angular-1-5-8-and-webpack

标签

angularjs

Webpack

auth0