(SystemJS) XHR error (404 Not Found) loading - cutom service

Question

Hello as part of Angular 2 learning project I am creating a test app.

I am trying to eagerly load one of the Module called LoginModule, however, I get the following error:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/core.js Error: XHR error (404 Not Found) loading http://localhost:3000/app/core.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1039:29) [] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) [] Error loading http://localhost:3000/app/core.js as "../core" from http://localhost:3000/app/login/login.service.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1039:29) [] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) [] Error loading http://localhost:3000/app/core.js as "../core" from http://localhost:3000/app/login/login.service.js at addToError (http://localhost:3000/node_modules/systemjs/dist/system.src.js:122:78) [] at linkSetFailed (http://localhost:3000/node_modules/systemjs/dist/system.src.js:695:21) [] at http://localhost:3000/node_modules/systemjs/dist/system.src.js:495:9 [] at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:113:43) [ => ] at http://localhost:3000/node_modules/zone.js/dist/zone.js:535:57 [] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ] at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:35) [] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:349:25) []

I tried to refer other questions where error message is similar to above however nothing has helped me yet.

It would be great if someone could help me solve the issue.

My directory structure is as follows:

login-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login.component';

const routes: Routes = [
    { path: 'login', component: LoginComponent }
];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ],
})
export class LoginRoutingModule{ }

export const loginRoutableComponents = [
    LoginComponent
];

login.module.ts looks like this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { UserProfileService } from './user-profile.service';
import { LoginService } from './login.service';
import { LoginRoutingModule, loginRoutableComponents } from './login-routing.module';



@NgModule({
    imports: [ CommonModule,
            LoginRoutingModule ],
    declarations: [ loginRoutableComponents ],
    providers: [ LoginService, UserProfileService ]
})
export class LoginModule{ }

login.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

import { SpinnerService } from '../core';
import { UserProfileService } from './user-profile.service';

@Injectable()
export class LoginService {
    constructor(
        private userProfileService: UserProfileService,
        private spinnerService: SpinnerService){}

    login(){
        return Observable.of(true)
                .do(_ => this.spinnerService.show())
                .delay(1000)
                .do(this.toggleLoginState.bind(this));
    }

    logout(){
        this.toggleLoginState(false);
    }

    private toggleLoginState(val: boolean){
        this.userProfileService.isLoggedIn = val;
        this.spinnerService.hide();
    }
}

user-profile.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserProfileService{
    isLoggedIn: boolean = false;
}

login.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';
import { Subscription } from 'rxjs/Subscription';

import { LoginService } from './login.service';
import { UserProfileService } from './user-profile.service';
import { ToastService } from '../core';

@Component({
    moduleId: module.id,
    // selector: 'login',
    // templateUrl: 'login.component.html'
    template: `
                <div>  
                    <h5>Login component</h5>
                    <div>
                        <button id='login-button' *ngIf='!isLoggedIn' (click)='login()'>Login</button>
                        <button id='logout-button' *ngIf='isLoggedIn' (click)='logout()'>Logout</button>
                    </div>
                </div>
                `
})
export class LoginComponent implements OnInit, OnDestroy { 
    loginSub: Subscription;

    public get isLoggedIn(){
        return this.userProfileService.isLoggedIn;
    }

    constructor(
        private loginService: LoginService,
        private toastService: ToastService,
        private userProfileService: UserProfileService,
        private route: ActivatedRoute,
        private router: Router
    ){}
    ngOnInit() {
    }
    ngOnDestroy() {
        this.loginSub.unsubscribe();
    }

    login(){
        this.loginSub = this.loginService
                            .login()
                            .mergeMap( (loginResult) => this.route.queryParams )
                            .map(qp => qp['redirectTo'])
                            .subscribe(redirectTo => {
                                this.toastService.activate('Logged in sucessessfully.');
                                let url = redirectTo? redirectTo : ['characters'];
                                this.router.navigate(url);
                            });
    }
    logout(){
        this.loginService.logout();        
    }
}

Answer 1

Thanks to @peeskillet I found answer to this problem.

I am using barrels to reduce no of import statements required to import various components from a bunch of feature modules. As mentioned by peeskillet in his comment above, barrels are not naturally supported by SystemJS. It needs to be either configured in System.config.js or while using import statements one has to provide name of the barrel file for example in login.service.ts I have replaced

import { SpinnerService } from '../core';

to

import { SpinnerService } from '../core/index';

and voila suddenly the error mentioned in question disappeared :)