Question

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

我正急切地加载一个名为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
];

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

用户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中配置或者在使用import语句时必须提供桶文件的名称，例如在login.service.ts中我已经替换了

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

到

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

瞧，突然之间提到的错误消失了：）

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

1 个答案: