javascript - Angular2 - 更改路线时我收到加载子路线的systemJs错误

Question

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

问题:

• 我有一个名为“登录”的 loadChildren 路径。
• 当我访问网址时，例如登录地址栏不会更改为登录。
• 它应该显示一个登录表单并将地址栏更改为/login。
• 这在使用 npm run start 在本地服务时工作正常。
• 当我使用 npm run serve.prod bundle 使用 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 文件时出现的错误(意外标记 <)意味着您提供了一个 html 文件(可能是您的 index.html)来响应 JS 文件请求。即，/app/components/login/login.module.js 未找到，但它服务于您的 index.html 或未找到 html 页面。

您可以通过直接打开 URL(右键单击“在新标签页中打开”)来验证这一点。弄清楚为什么找不到 login.module.js，您可能已经解决了问题。与文件在您的网络服务器服务目录中的位置进行比较 - 路径可能不正确。