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?