providedIn: LazyModule fails with no provider error

Question

I would like to refer the providedIn option to an Angular module providing both declarables and dependencies. I created an additional module SharedModule to serve as a sub-module of the lazy module LazyModule so that it may be used as an “anchor” for the lazy service I want to provide (CounterService in my case). I've been following this guide to achieve it but obviously doing something wrong. Also, I made a little scheme but please take a look at the StackBlitz to see the full example.

 Eager Part                                        Lazy Loaded Module

 +----------------------------------------------+  +--------------------------------------+
 |Routes:                                       |  | @NgModule({                          |
 |                                              |  |   imports: [SharedModule]            |
 |{                                             |  | }                                    |
 |  path: 'lazy',                               |  | export class LazyModule {}           |
 |  loadChildren: './lazy/lazy.module#LazyModule|  |                                      |
 |}                                             |  |                                      |
 +----------------------------------------------+  | SharedModule                         |
                                                   | +----------------------------------+ |
                                                   | |@NgModule({                       | |
                                                   | |  declarations: [SharedComponent],| |
                                                   | |  exports: [SharedComponent]      | |
                                                   | |})                                | |
                                                   | |export class SharedModule {}      | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   |                                      |
                                                   | LazyService                          |
                                                   | +----------------------------------+ |
                                                   | |@Injectable({                     | |
                                                   | |  providedIn: SharedModule        | |
                                                   | |})                                | |
                                                   | |export class CounterService {     | |
                                                   | |  counter = 0;                    | |
                                                   | |}                                 | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   +--------------------------------------+

score 1 · Accepted Answer · answered Feb 09 '20 at 19:00

As the article that you cited mentions that you will need to define service in its own module to avoid circular dependency issue.

counter.module.ts

import { NgModule, ModuleWithProviders } from "@angular/core";


@NgModule({
})
export class CounterModule {}

counter.service.ts

import { Injectable } from '@angular/core';
import { CounterModule } from "./counter.module";

@Injectable({
  providedIn: CounterModule
})
export class CounterService {
  counter = 0;
}

Import the counter module in shared module. shared.module.ts

@NgModule({
  imports: [
      CounterModule
  ],
  declarations: [SharedComponent],
  exports: [SharedComponent]
})
export class SharedModule {}

Here is working stack blitz: https://stackblitz.com/edit/providedin-module-wglojs

providedIn: LazyModule fails with no provider error

1 Answers1