Angular lazy loading component and service

Question

May you explain me some fact? I have this code

sharedservice.ts


@Injectable({
  providedIn: 'root'
})
export class SharedService {
  id = (new Date()).getTime();
}

main.ts

export const ROUTES: Route[] = [
  {
      path: 'lazycomp',
      loadComponent: () =>
          import('./lazycomp.component').then(
              (mod) => mod.LazycompComponent
          ),
  },
];

@Component({
  selector: 'app-root',
  standalone: true,
  template: `

    {{serv.id}}

    @if(!(loaded$ | async)) {
      <button (click)="load()">
          Load advanced settings
      </button>
    }
    <ng-container *ngComponentOutlet="comp" />
  `,
  imports:[CommonModule],
  providers: []
})
export class App {
  loaded$ = new BehaviorSubject<boolean>(false);
  comp: any;

  readonly serv = inject(SharedService);

  async load() {
    this.comp = await import('./lazycomp.component').then((mod) => mod.LazycompComponent);
    console.log(this.comp);
    this.loaded$.next(true);
  }
}

bootstrapApplication(App);

lazycomp.component

@Component({
  selector: 'app-lazycomp',
  standalone: true,
  imports: [LazycompimpComponent],
  template: `
    lazy  =  {{serv.id}}
  `,
  styles: ``,
  providers: []
})
export class LazycompComponent {
  readonly serv = inject(SharedService);
}

lazycompimp.component

@Component({
  selector: 'app-lazycompimp',
  standalone: true,
  imports: [],
  template: ``,
  styles: ``,
  providers: [SharedService]
})
export class LazycompimpComponent {

}

I press button, load lazycomp and get 1717188440363 lazy = 1717188440363.

Ok. service instance is singleton and on root injector.

After that I add providers: [SharedService] to lazycomp and get 1717189116834 lazy = 1717189194305

How it work? Why imports: [LazycompimpComponent] in lazycomp does not put SharedService to providers?

I thought that lazy loaded module (standalone component module too?) create own root injector.

Lazy loaded modules don't create their own root injector. There is one root injector, and lazily loaded modules create their own injector that is a child of the application root injector. — Alex
– Alex, Commented May 31, 2024 at 21:47

Matthieu Riegler · Accepted Answer · 2024-05-31 22:35:30Z

0

Every eagerly loading module, will setup providers in the Root Injector. This includes nested imports in nested modules.

Lazy loaded module will create their own injector (as you can't add providers to an exisiting injector).

answered May 31, 2024 at 22:35

Matthieu Riegler

59.9k27 gold badges158 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular lazy loading component and service

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related