（SystemJS）XHR错误（404 Not Found）loading - cutom服务

作为Angular 2学习项目的一部分，我正在创建一个测试应用程序。（SystemJS）XHR错误（404 Not Found）loading - cutom服务

我想急切地加载模块称为LoginModule的之一，但是我得到以下错误

我试图指其中错误消息类似于上面但是什么也帮我又一些其它的问题。

如果有人能够帮助我解决问题，那将会很棒。

我的目录结构如下

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 
];

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{ }

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

用户profile.service.ts

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

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

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

来源

2017-03-08 Hiren Gondhiya

看起来像你的系统配置JS的一个问题。问题是因为你正在尝试使用桶（索引）。桶不是自然支持SystemJS。你需要配置你正在使用的桶，或者只需使用'from'../ core/index''来指定桶。见https://github.com/angular/angular.io/issues/1301 –

@peeskillet谢谢。这件事从未在我正在经历的课程中讨论过。谢谢指点我讨论。 –

感谢@peeskillet 我发现回答了这个问题。

我使用barrels来减少从一堆feature modules中导入各种组件所需的导入语句的数量。正如Peeskillet在他上面的评论中提到的，桶不是由SystemJS自然支持的。它需要在System.config.js中配置，或者在使用导入语句时必须在login.service中提供桶文件的名称。TS我已经取代

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

到

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

瞧突然在问题中提到的错误消失了:)

来源

2017-03-12 23:49:09

（SystemJS）XHR错误（404 Not Found）loading - cutom服务

回答

相关问题