Angular2 - ルートを変更すると、子プロセスのロードでsystemJsエラーが発生する

Question

私はtypescriptとsystemjsでAngular2を使用しています。

問題：

• 私はと呼ばれる "ログイン" のためのI loadChildrenパスを持っています。
• 私がURLを訪問すると、ログインすると、アドレスバーがログインに変わることはありません。
• ログインフォームを表示し、アドレスバーを/ loginに変更する必要があります。
• これは、npm run startを使用してローカルで処理する場合に問題ありません。
• SystemJSを使用してプロダクションリリースにnpm run serve.prodを使用してバンドルすると問題が発生します。
• ホームページを正常に読み込みます。私は以下のコンソールエラーを取得するログインページを訪問する。
• この問題は、ルートの遅延読み込みを使用する場合にのみ発生します。

これは私が取得するコンソールエラーメッセージです：これは私のログイン・コンポーネントである

：

import {Component, OnInit} from '@angular/core'; 
import {Router} from '@angular/router'; 

import {AuthService} from '../../services/authService/authService'; 
import {SocialService} from '../../services/socialService/socialService'; 
import {EmailService} from '../../services/emailService/emailService'; 
import {Environment} from '../../models/environment/environment'; 
import {User} from '../../models/user/user'; 

@Component({ 
    moduleId: module.id, 
    selector: 'LoginComponent', 
    templateUrl: 'login.component.html' 
}) 

export class LoginComponent implements OnInit { 
    router: Router; 
    authService:AuthService; 
    socialService: SocialService; 
    user: User; 
    error: string = null; 

    ngOnInit(): void { 
    window.scrollTo(0, 0); 
    } 

    constructor(router: Router, authService: AuthService, _socialService: SocialService, user: User){ 
     this.authService = authService; 
     this.socialService = _socialService; 
     this.user = user; 
     this.router = router; 
    } 

    logIn =() => { 
     this.authService.logIn(this.user).then((response) => { 
      if (response === false) { 
      this.error = "Incorrect login details"; 
      window.setTimeout(() => this.error = null, 4000); 
      } else { 
      this.router.navigate(['/dashboard']); 
      }    
     }); 
    } 
} 

これは私のログインモジュールです：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { FormsModule} from '@angular/forms'; 

import { LoginComponent } from './login.component'; 
import { LoginRoutingModule } from './login.routes'; 
import { AuthService } from '../../services/authService/authService'; 
import { SocialService } from '../../services/socialService/socialService'; 
import { EmailService } from '../../services/emailService/emailService'; 
import { Environment } from '../../models/environment/environment'; 
import { User } from '../../models/user/user'; 

@NgModule({ 
    imports: [CommonModule, LoginRoutingModule, RouterModule, FormsModule], 
    declarations: [LoginComponent], 
    exports: [LoginComponent], 
    providers: [AuthService, User, SocialService, EmailService, Environment] 
}) 
export class LoginModule { } 

これは私のログインルートです：

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { LoginComponent } from './login.component'; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { 
     path: '', 
     component: LoginComponent, 
     data : { 
      metadata : { 
      title : 'Sign In', 
      override : true, 
      description : "Sign into your Pool Cover account using the email address or social media account you used to register. If you are having difficulties signing in, please navigate to the forgotten password page.", 
      keywords: "Sign in, login, access, sign in form, form" 
      } 
     } 
     } 
    ]) 
    ], 
    exports: [RouterModule] 
}) 
export class LoginRoutingModule { } 

これは、ログインのための私のアプリのルートです：

{path: 'login', loadChildren: 'app/components/login/login.module#LoginModule'}, 

あなたは、それ以上のファイルが必要なら、私に教えてください。

Answer 1

JSファイルを評価しようとすると、通常そのエラー（予期しないトークン<）は、JSファイル要求に応じてhtmlファイル（おそらくあなたのindex.html）を提供したことを意味します。つまり、/app/components/login/login.module.jsは見つかりませんでしたが、あなたのindex.htmlを提供していたか、htmlページが見つかりませんでした。

URLを直接開くことで確認できます（右クリックし、「新しいタブで開く」）。なぜlogin.module.jsが見つからないのかを解明して、問題を解決した可能性が高いでしょう。 Webサーバーの配信ディレクトリ内のファイルの場所と比較します。パスが正しくない可能性があります。