How to avoid/fix "Auth0Lock is not defined" exception

Question

I am trying to use the Auth0 for social login but I keep getting an exception of an undefined reference.

This is the authentication service

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 injected the services and configured providers. Everything is wired correctly, but it just won't find Auth0Lock even though defined. Each time it reaches lock = new Auth0Lock('ID', 'DOMAIN', {}); it bombs out.

Answer 1

I replaced declare var Auth0Lock: any; with const Auth0Lock = require('auth0-lock').default; and that fixed the problem.

Answer 2

The accepted answer is good. I did get a Cannot find name 'require' error. Rather than using 'declare const require', I imported like so:

import Auth0Lock from 'auth0-lock';