javascript - Angular 2 - Auth0 -

i trying implement log in , sign auth0. followed these steps auth0 website:

https://auth0.com/docs/quickstart/spa/angular2/01-login

i using angular 2 rc5

this how files looks like:

app.component.html

 <div class="navbar-header">  <a class="navbar-brand" href="#">auth0 - angular 2</a> <button class="btn btn-primary btn-margin" (click)="auth.login()" *ngif="!auth.authenticated()">log in</button> <button class="btn btn-primary btn-margin" (click)="auth.logout()" *ngif="auth.authenticated()">log out</button> </div> 

app.component.ts

import { component } '@angular/core'; import {auth} "./auth.service";

@component({ selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css'], }) export class appcomponent { constructor(private auth: auth) {} } 

auth.service.ts

import { injectable }      '@angular/core'; import { tokennotexpired } 'angular2-jwt';  // avoid name not found warnings declare var auth0lock: any;  @injectable() export class auth {   // configure auth0   lock = new auth0lock('my_client_id', 'my_domain.auth0.com', {});    constructor() {     // add callback lock `authenticated` event     this.lock.on("authenticated", (authresult) => {       localstorage.setitem('id_token', authresult.idtoken);     });   }    public login() {     // call show method display widget.     this.lock.show();   };    public authenticated() {     // check if there's unexpired jwt     // searches item in localstorage key == 'id_token'     return tokennotexpired();   };    public logout() {     // remove token localstorage     localstorage.removeitem('id_token');   }; } 

but getting these errors in chrome developer javascript console:

exception: error in ./appcomponent class appcomponent_host - inline template:0:0 exception: error in ./appcomponent class appcomponent_host - inline template:0:0 original exception: no provider auth! original stacktrace: error: di exception     @ noprovidererror.baseexception [as constructor] (exceptions.js:27)     @ noprovidererror.abstractprovidererror [as constructor] (reflective_exceptions.js:43)     @ new noprovidererror (reflective_exceptions.js:80)     @ reflectiveinjector_._throwornull (reflective_injector.js:786)     @ reflectiveinjector_._getbykeydefault (reflective_injector.js:814)     @ reflectiveinjector_._getbykey (reflective_injector.js:777)     @ reflectiveinjector_.get (reflective_injector.js:586)     @ ngmoduleinjector.get (ng_module_factory.js:98)     @ debugappview._view_appcomponent_host0.createinternal (appcomponent.ngfactory.js:16)     @ debugappview.appview.create (view.js:101) error context: debugcontext {_view: _view_appcomponent_host0, _nodeindex: 0, _tplrow: 0, _tplcol: 0}_nodeindex: 0_staticnodeinfo: (...)_tplcol: 0_tplrow: 0_view: _view_appcomponent_host0component: (...)componentrenderelement: (...)context: (...)injector: (...)providertokens: (...)references: (...)rendernode: (...)source: (...)__proto__: object unhandled promise rejection: exception: error in ./appcomponent class appcomponent_host - inline template:0:0 original exception: no provider auth! original stacktrace: error: di exception     @ noprovidererror.baseexception [as constructor] (http://localhost:4200/main.bundle.js:1867:23)     @ noprovidererror.abstractprovidererror [as constructor] (http://localhost:4200/main.bundle.js:29230:16)     @ new noprovidererror (http://localhost:4200/main.bundle.js:29267:16)     @ reflectiveinjector_._throwornull (http://localhost:4200/main.bundle.js:58584:19)     @ reflectiveinjector_._getbykeydefault (http://localhost:4200/main.bundle.js:58612:25)     @ reflectiveinjector_._getbykey (http://localhost:4200/main.bundle.js:58575:25)     @ reflectiveinjector_.get (http://localhost:4200/main.bundle.js:58384:21)     @ ngmoduleinjector.get (http://localhost:4200/main.bundle.js:42059:52)     @ debugappview._view_appcomponent_host0.createinternal (appcomponent.ngfactory.js:16:70)     @ debugappview.appview.create (http://localhost:4200/main.bundle.js:59148:21) error context: [object object] ; zone: <root> ; task: promise.then ; value: viewwrappedexception {_wrappermessage: "error in ./appcomponent class appcomponent_host - inline template:0:0", _originalexception: noprovidererror, _originalstack: "error: di exception↵    @ noprovidererror.baseexc…e (http://localhost:4200/main.bundle.js:59148:21)", _context: debugcontext, _wrapperstack: "error: error in ./appcomponent class appcomponent_… @ http://localhost:4200/main.bundle.js:27889:27"} error: uncaught (in promise): exception: error in ./appcomponent class appcomponent_host - inline template:0:0(…) 

and webpage blank. nothing appears.

any appreciated.

cheers,

this how implemented , working fine code geek

app.module.ts

 import { auth_providers } 'angular2-jwt';  import { auth } './services/auth0.service';       @ngmodule({       declarations: [         appcomponent       ],       imports: [         browsermodule,         formsmodule,         httpmodule       ],       providers: [auth_providers, auth],       bootstrap: [appcomponent]     })     export class appmodule { } 

index.html

<!doctype html> <html> <head>   <meta charset="utf-8">   <title>angular2auth0</title>   <base href="/">    <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="icon" type="image/x-icon" href="favicon.ico">   <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script> </head> <body>   <app-root>loading...</app-root> </body> </html> 

app.component.ts

import { component } '@angular/core'; import { auth } './services/auth0.service';  @component({   selector: 'app-root',   templateurl: './app.component.html',   styleurls: ['./app.component.css'] })  export class appcomponent {    constructor(private auth: auth) {     console.log(auth);   }   }