I recently created a new Angular CLI project to delve into server-side rendering with Angular Universal.
Everything was set up and running smoothly, until I decided to implement lazy-loading for a module named 'lazy'.
After implementing lazy-loading, the application worked fine when using ng serve, but encountered an error when accessing the lazy route and refreshing the page while Universal was running (with AOT). Even though the lazy component appeared in the browser, the following error occurred:
ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
at SystemJsNgModuleLoader.loadFactory (C:\Users\shachar\Desktop\universal\packages\core\src\linker\system_js_ng_module_factory_loader.ts:67:1)
// more error details...
In fact, I am not using SystemJS at all.
Here are some relevant code snippets:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// more imports...
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
// more module setup...
})
export class AppModule { }
// lazy.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// more imports...
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: LazyComponent }
])
],
declarations: [LazyComponent]
})
export class LazyModule { }
// AppServerModule in lazy.module.ts...
The implementation seems to work correctly with Angular Universal, but it's frustrating to encounter this error message on every page refresh.
If you have any insights or suggestions on how to resolve this issue, please let me know. Thank you!