Error: Uncaught (in promise): ReferenceError: System is not defined (Lazy Loading And routing)


#1

Hi All,

I am planning modular structure with lazy loading for my NativeScript app. But I have run into some issues.
I run into the error below whenever I try to navigate through my route

_ERROR Error: Uncaught (in promise): ReferenceError: System is not defined_
_[1] JS: ReferenceError: System is not defined_
_[1] JS:     at SystemJsNgModuleLoader.loadAndCompile (file:///data/data/com.yourdomain.nativescript/files/app/tns_modules/@angular/core/bundles/core.um_
_d.js:5906:16)_
_[1] JS:     at SystemJsNgModuleLoader.load (file:///data/data/com.yourdomain.nativescript/files/app/tns_modules/@angular/core/bundles/core.umd.js:5894:_
_60)_
_[1] JS:     at RouterConfigLoader.loadModuleFactory (file:///data/data/com.yourdomain.nativescript/files/app/tns_modules/@angular/router/bundles/router_
_.umd.js:3323:72)_
_[1] JS:     at RouterConfigLoader.load (file:///data/data/com.yourdomain.nativescript/files/app/tns_modules/@angular/router/bundles/router.umd.js:3307:_
_52)_
_[1] JS:     at MergeMapSubscriber.project (file:///data/data/com.yourdomain.nativescript/files/app/tns_modules/@angular/router/bundles/router.umd.js:15_
_54:74)_
_[1] JS:     at MergeMapSubscriber._tryNext (file:///data/data/com.yourdomain.nativescript/files/app/tns_modules/rxjs/operator/mergeMap.js:120:27)_
_....._

My routes look like this

export const HomeRoutes: Array<any> = [
  {
    path: '',
    redirectTo: '/home/welcome',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      { path: 'welcome', component: WelcomeComponent },
      { path: 'signInSignUp',loadChildren: './signInSignUp/signInSignUp.module#SignInSignUpModule'},

When i try to run the following code I get the error above
this.routerExtensions.navigate(['/home/signInSignUp'], { clearHistory: true });

In my module I have two files

  1. Module file
import { NgModule } from '@angular/core';
import { SignInSignUpComponent } from './signInSignUp.component';
import { CommonModule } from '@angular/common';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { routes } from "./signInSignUp-routing.module";

@NgModule({
  imports: [CommonModule, NativeScriptFormsModule, NativeScriptModule,
    NativeScriptRouterModule, NativeScriptRouterModule.forChild(routes)],
  declarations: [SignInSignUpComponent]

})
export class SignInSignupModule { }
  1. Routes file
import { SignInSignUpComponent } from './signInSignUp.component';

export const routes = [
    {
        path: "",
        component: SignInSignUpComponent
    }
];

The code works if I do not use lazy loading of children.
Would be grateful if anyone could point out if i am missing something.
Thanks