Hey there, I've encountered a strange problem that didn't occur when I was using Angular 5.
Let me explain the situation:
In my App routing module, I have:
{
path: 'moduleA',
pathMatch: 'full',
loadChildren: './modules/moduleA.module#moduleA'
},
{
path: 'moduleB',
pathMatch: 'full',
loadChildren: './modules/moduleB.module#moduleB'
},
Additionally, I have a Shared module that contains a single component for rating. It is declared and exported as follows:
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RatingComponent } from './components/rating/rating.component';
import { RatingService } from './services/rating.service';
@NgModule({
imports: [
CommonModule
],
declarations: [
RatingComponent
],
exports: [
RatingComponent
],
providers: [
RatingService
]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [
RatingService
]
};
}
}
The Shared module is imported in both modules. When running `ng serve --aot`, everything works fine. However, if I make changes to the code of Shared, ModuleA, or ModuleB, the CLI compiles successfully but an error occurs in the browser:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined at __webpack_require__ (bootstrap:81)
To resolve this issue, I have to stop the CLI and run it again. This behavior only happens on version 6 (tested with 6.0.7 and 6.1.0). In comparison, there are no issues when using version 5. If I exclude the SharedModule from ModuleA or B, the app works fine, but then the module is not truly shared.
If anyone has insights into what might be causing this issue, your help would be greatly appreciated.
Thank you!