Angular Universal Node.js - System is not defined

636 views Asked by At

I created an Angular 2 / Angular Universal app with lazy-loading routes like so:

{
    path: 'home',
    loadChildren: './+app/+home/home.module#HomeModule'
},
{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
}

When I navigate to localhost in the browser, it redirects to /home and everything works properly. But whenever I enter localhost/home in the browser with a hard reload, my Node.js terminal throws an error:

EXCEPTION: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined at 
SystemJsNgModuleLoader.loadAndCompile (...@angular/core/bundles/core.umd.js:7151:20)

It seems to render the view correctly though.

When I change my route to use the non-lazy-load way, the error goes away:

{
    path: 'home',
    component: HomeComponent
}

But I want to use lazy-loading in my app. In my HTML, I use SystemJS to import the client app:

<script>
    System.import('./client.js')
        .then(function(m) {
            console.log("Welcome");
        });
</script>

My Dependencies:

"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/router": "3.1.2",
"@angularclass/bootloader": "1.0.1",
"angular2-express-engine": "2.1.0-rc.1",
"angular2-template-loader": "0.6.0",
"angular2-universal": "2.1.0-rc.1",
"angular2-universal-polyfills": "2.1.0-rc.1"

How do I resolve this issue?

0

There are 0 answers