如何避免/修复"Auth0Lock is not defined"异常

Question

我正在尝试将Auth0使用用于社交登录，但我一直在获得不确定的参考。

这是身份验证服务

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
// Avoid name not found warnings
declare var Auth0Lock: any;
@Injectable()
export class AuthService {
// Configure Auth0
lock = new Auth0Lock('I have set the ID correctly here', 'and the domain as well', {});
constructor() {
// Add callback for lock `authenticated` event
  this.lock.on("authenticated", (authResult) => {
  localStorage.setItem('id_token', authResult.idToken);
  });
}
public login() {
// Call the show method to display the widget.
  this.lock.show();
};
public authenticated() {
  // Check if there's an unexpired JWT
  // This searches for an item in localStorage with key == 'id_token'
  return tokenNotExpired();
};
public logout() {
   // Remove token from localStorage
    localStorage.removeItem('id_token');
  };
}

i注入了服务和配置的提供商。一切都正确地有线，但是即使定义也不会找到Auth0Lock。每次到达lock = new Auth0Lock('ID', 'DOMAIN', {});时，都会炸弹。

Answer 1

我用const Auth0Lock = require('auth0-lock').default;替换declare var Auth0Lock: any;并解决了问题。

Answer 2

接受的答案很好。我确实得到了找不到名称'require'错误。我没有使用"声明const requient"，而是这样的导入：

import Auth0Lock from 'auth0-lock';

Answer 3

我需要添加到 index.html：

<script src="https://cdn.auth0.com/js/lock/10.8/lock.min.js"></script>

通过https://github.com/auth0/lock/issues/588