Error loading /boot.js

Question

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:


  
    App Name

    
    
    
    
    
    
    
    

  
  
    Loading...

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: `
    {{title}}
    Test!
    Blah
    
      
    
      
  `
  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);
    }
}

RonZ · Accepted Answer

look at this: Evaluating http://localhost:3001/node_modules/ng2-ui-auth/src/auth, it tries to get the ng2-ui-auth/src/auth without the .js extention, in your config file you've put packages: { app: { format: 'register', defaultExtension: 'js' } }, which means the default extension only exists within the 'app' folder, try adding default extension to the entire system or specifically to ng2-ui-auth. If you wish add this issue to my github and I'll just add all js extensions explicitly.
--- edit ---
Tried adding js extenstions, doesn't work well with typescript. concating everything to a single file may work but typescript supports only 'amd' and 'system' module types and people really like the commonjs one. If someone has a good solution for this he is welcome to make a pull request (it will probably be a gulpfile which handles it)
--- second edit ---
In version 1.1.0 all files are merged so this shouldn't be a problem.

Error loading /boot.js

Answers (2)

Related Questions