Angular2-更改路线时，我得到了负载孩子路线的systemJs错误

Question

我正在将Angular2与typescript和systemjs一起使用。

问题：

• 我有一个loadChildren称为“登录”的路径。
• 当我访问URL时，例如登录，地址栏不会更改为登录。
• 它应该显示一个登录表单，并将地址栏更改为/ login。
• 使用npm run start在本地提供服务时，此方法效果很好。
• 当我使用npm捆绑运行run.prod以使用SystemJS进行生产发行时，会发生问题。
• 加载主页很好。 当访问登录页面时，出现以下控制台错误。
• 仅当我使用路由的延迟加载时，才会发生此问题。

这是我收到的控制台错误消息：

这是我的登录组件：

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服务器的服务目录中的位置-路径可能不正确。