(SystemJS) XHR 错误 (404 Not Found) 加载 - 自定义服务

Question

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

我正在尝试加载名为 LoginModule 的模块之一，但是，我收到以下错误：

错误：（SystemJS）XHR 错误（404 未找到）正在加载 http://localhost:3000/app/core.js 错误：XHR 错误（404 未找到）在 XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1039:29) [] 在区域加载 http://localhost:3000/app/core.js。 runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [=>] 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) [] 在 XMLHttpRequest.wrapFn [as _onreadystatechange] (@987654328) 从http://localhost:3000/app/login/login.service.js 将http://localhost:3000/app/core.js 加载为“../core”时出错@) [] 在 Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ] 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) [] 在 addToError (@ 987654333@) [] 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 [] 在 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 [] 在 Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [= > ] 在 drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:35) [] 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:349:25) []

我尝试参考其他问题，其中错误消息与上述类似，但没有任何帮助。

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

我的目录结构如下：

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 看起来像这样

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

感谢@peeskillet 我找到了这个问题的答案。

我正在使用barrels 来减少从一堆feature modules 中导入各种组件所需的导入语句。正如 peeskillet 在上面的评论中提到的那样，SystemJS 并不自然地支持桶。它需要在 System.config.js 中进行配置，或者在使用导入语句时必须提供桶文件的名称，例如在 login.service.ts 我已替换

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

到

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

瞧，上面提到的错误突然消失了:)