Currently, I am facing a challenge with lazy-loaded modules and services that are provided in these modules. My folder structure looks like this:
app
-> featureModule1 (lazy loaded)
-> featureModule2 (lazy loaded)
-->services
--->service1.ts
I want service1.ts to be exclusively available in featureModule2. So, I included @Injectable
// service.ts
@Injectable({
providedIn: featureModule2
})
export class service1 { /* some logic */ }
When trying to route to this lazy-loaded module, a console error occurs:
// console
ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'featureModule2' before initialization
ReferenceError: Cannot access 'featureModule2' before initialization
My current lazy load route is as follows:
// app-routing.module.ts
const routes: Routes = [
{path: '', redirectTo: '', pathMatch: 'full'},
{ path: 'feature1', loadChildren: () => import('./feature1/feature1.module').then(m => m.featureModule1) },
{ path: 'feature2', loadChildren: () => import('./feature2/feature2.module').then(m => m.featureModule2) }
];
I attempted to provide it in the module:
// featureModule1
@NgModule({
declarations: [
featureComponent
],
imports: [
...
],
providers: [
service1
]
})
However, that approach did not work.
I also tried importing service1.ts directly into a component (featureComponent).
// featureComponent
import { service1 } from '../featureModule2/services/service1.service';
@Component({
...
})
export class featureComponent {
constructor(private service1: service1) { }
ngOnInit(): void {
this.service1.init();
}
}
This method resulted in the same error message.
At present, the only solution to bypass this issue is to create a "wrapper" module that imports all other modules with @Injectable services.
Is there an alternative way to address this problem? The services in each module should not be injected in root or any, as they should only be accessible in each featureModule.