Angular2 - when changing route I get a systemJs error for load children route

Question

I'm using Angular2 with typescript and systemjs.

Issue:

• I have a path that I loadChildren for called "login".
• When I visit the url e.g. login the address bar doesnt change to login.
• It should of shown a login form and changed address bar to /login.
• This works fine when serving locally with npm run start.
• Issue occurs when I bundle using npm run serve.prod for production release using SystemJS.
• Loads homepage fine. When visit login page I get the below console error.
• This issue only occurs when I use lazy loading of routes.

This is the console error message I get:

This is my login component:

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']);
          }               
      });   
  }
}

This is my login Module:

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 { }

This is my login Route:

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 { }

This is my app route for login:

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

Let me know if you need any more files.

Answer 1

Usually that error (unexpected token <) while trying to evaluate a JS file means that you served an html file (probably your index.html) in response to the JS file request. Ie, /app/components/login/login.module.js was not found but it served your index.html or not found html page.

You can verify this by opening the URL directly (right-click, "open in new tab"). Figure out why login.module.js is not found and you'll likely have solved the problem. Compare to the file's location in your web server's serving directory - likely the path is incorrect.