（SystemJS）XHR错误（404未找到）加载-cutom服务

Question

你好，作为角2学习项目的一部分，我正在创建一个测试应用程序。

我试图急切地加载一个名为LoginModule的模块，但是，出现以下错误：

错误：（SystemJS）XHR错误（404未找到）加载http://localhost:3000/app/core.js错误：XHR错误（未找到404）加载http://localhost:3000/app/core.js在XMLHttpRequest。wrapFn[as _onreadystatechange](http://localhost:3000/node_modules/zone.js/dist/zone.js:1039:29)[]在区域。运行任务(http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ =

我试图参考其他问题，错误信息类似于上述，但没有什么帮助我。

如果有人能帮我解决这个问题就太好了。

我的目录结构如下：

登录路由。单元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看起来像这样

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();
    }
}

用户配置文件。服务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

多亏了@peeskillet，我找到了这个问题的答案。

我使用桶来减少从一堆功能模块导入各种组件所需的导入语句的数量。正如peeskillet在上面的评论中提到的，SystemJS自然不支持桶。它需要在系统中进行配置。配置。在使用import语句时，必须提供桶文件的名称，例如在login中。服务我已经换了

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

到

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

瞧，问题中提到的错误突然消失了：）