Question

我正在使用带有typescript和systemjs的Angular2。

问题：

我有一个路径，我将loadChildren称为“login”。
当我访问网址时，例如登录地址栏不会改为登录。
应显示登录表单并将地址栏更改为/ 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文件时出现错误（意外标记＆lt;）意味着您提供了一个html文件（可能是您的index.html）以响应JS文件请求。即，找不到/app/components/login/login.module.js，但它已经为您的index.html或找不到的html页面提供了服务。

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

Angular2 - 当改变路由时，我得到一个systemJs错误，用于加载子路由

1 个答案: