I'm trying to drop some authentication into my Angular2 app using this bit of code that was mentioned in the Angular2 gitter channel: https://github.com/ronzeidman/ng2-ui-auth and I think I may not be understanding something completely.
I get the following errors in the console:
Uncaught SyntaxError: Unexpected token < in (program):1
and
Uncaught SyntaxError: Unexpected token < in angular2-polyfills.js:138
But in the body of that second error, it says the following:
Evaluating http://localhost:3001/node_modules/ng2-ui-auth/src/auth
Error loading http://localhost:3001/app/boot.js
Relevant code:
app/boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {AuthHttp} from 'angular2-jwt';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Config, SATELLIZER_PROVIDERS, Auth} from 'ng2-ui-auth';
import 'rxjs/add/operator/map'
bootstrap(AppComponent, [
HTTP_PROVIDERS,
SATELLIZER_PROVIDERS({providers: {google: {clientId: GOOGLE_CLIENT_ID}}}),
provide(AuthHttp, {
useFactory: (auth: Auth, config: Config) => {
return new AuthHttp({
tokenName: config.tokenName,
tokenGetter: () => auth.getToken(),
});
},
deps: [Auth, Config],
}),
]);
index.html:
<html>
<head>
<title>App Name</title>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script>System.import('app/boot').then(null, console.error.bind(console));</script>
</head>
<body>
<cw-api-app>Loading...<cw-api-app>
</body>
</html>
config.js:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
'browser': 'node_modules/angular2/platform/browser.js',
'ng2-ui-auth': 'node_modules/ng2-ui-auth/export.js',
'auth': 'node_modules/ng2-ui-auth/export.js'
}
});
app/app.component.ts:
import {Component} from 'angular2/core';
import {UserService} from './services/user.service';
import {LoginComponent} from './login.component';
import {UserDashboardComponent} from './user-dashboard.component';
@Component({
selector: 'cw-api-app',
template: `
<h1>{{title}}</h1>
<div><p>Test!</p></div>
<ul><li (click)="userFetch(event)">Blah</li></ul>
<div class="user-info">
<cw-user-dashboard [user]="user"></cw-user-dashboard>
</div>
<app-login></app-login>
`
directives: [UserDashboardComponent, LoginComponent],
providers: [UserService]
})
export class AppComponent {
public title = "App Name";
public user: Object;
constructor(private _userService: UserService) { }
userFetch() {
console.log("wtf");
this._userService.getUserDashboard().subscribe(res => this.user = res);
}
}
app/login.component.ts:
import {Component, AfterContentInit, ElementRef, Renderer} from 'angular2/core';
import {Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {FormBuilder, ControlGroup, Validators} from 'angular2/common';
import {Auth} from 'ng2-ui-auth';
//import {NgMessages} from '../formComponents/ngMessages';
//import {CustomValidators} from '../formComponents/customValidators';
//import {DefaultHandlers} from '../httpDefaults';
/**
* Created by Ron on 18/12/2015.
*/
@Component({
selector: 'app-login',
// templateUrl: '../templates/login_form.html',
directives: [NgMessages, ROUTER_DIRECTIVES],
})
export class Login implements AfterContentInit {
form: ControlGroup;
user = { email: '', password: '' };
userControlsConfig = {
email: ['', Validators.compose([Validators.required, CustomValidators.email])],
password: ['', Validators.required],
};
login() {
this.auth.login(this.user)
.subscribe(
() => this.goToMain(),
this.handlers.error
);
}
authenticate(provider: string) {
this.auth.authenticate(provider)
.subscribe(
() => this.goToMain(),
this.handlers.error
);
}
goToMain() {
this.router.navigate(['Main']);
}
ngAfterContentInit() {
this.renderer.setElementClass(this.element, 'app', true);
if (this.auth.isAuthenticated()) {
this.goToMain();
}
}
constructor(private auth: Auth,
private fb: FormBuilder,
private router: Router,
private element: ElementRef,
private renderer: Renderer,
private handlers: DefaultHandlers) {
this.form = fb.group(this.userControlsConfig);
}
}
