（SystemJS）XHR錯誤（404 Not Found）loading - cutom服務

作爲Angular 2學習項目的一部分，我正在創建一個測試應用程序。（SystemJS）XHR錯誤（404 Not Found）loading - cutom服務

我想急切地加載模塊稱爲LoginModule的之一，但是我得到以下錯誤

我試圖指其中錯誤消息類似於上面但是什麼也幫我又一些其它的問題。

如果有人能夠幫助我解決問題，那將會很棒。

我的目錄結構如下

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

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

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

用戶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服務

回答

相關問題