Angular5懒加载模块无法调用非懒加载模块Provider问题求助

Hey there, let's figure out why your lazy-loaded module can't access the NotificatorDataService from the notificator module. The core issue here is how Angular's injectors work with lazy-loaded modules—each lazy module gets its own independent injector, which doesn't automatically pull providers from other feature modules. Here are the cleanest, most recommended fixes:

方案1：将服务注册到根注入器（最推荐） #

Your Angular 5.2.3 version already supports the providedIn: 'root' syntax, which lets you register the service directly to the root injector. This makes the service a global singleton, accessible to any module (including lazy-loaded ones).

Modify your NotificatorDataService code:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Registers the service to the root injector
})
export class NotificatorDataService {
  // Your service logic here
}

After this change, you can remove NotificatorDataService from the providers array in notificator.module.ts—Angular will handle its registration automatically.

方案2：使用共享模块的forRoot()模式（适合多模块共享服务） #

If your notificator module is a shared module imported by multiple features, use the forRoot() pattern to ensure the service is registered only once in the root injector, avoiding duplicate instances.

First update notificator.module.ts:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { NotificatorDataService } from './path-to-your-service';

@NgModule({
  // Keep your existing declarations, exports, imports here
})
export class NotificatorModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: NotificatorModule,
      providers: [NotificatorDataService]
    };
  }
}

Then import NotificatorModule with forRoot() in your root AppModule:

import { NgModule } from '@angular/core';
import { NotificatorModule } from './path-to-notificator-module';

@NgModule({
  imports: [
    // Other modules...
    NotificatorModule.forRoot() // Register service in root injector
  ]
})
export class AppModule { }

For your lazy-loaded LazyModule, just import NotificatorModule without forRoot():

import { NgModule } from '@angular/core';
import { NotificatorModule } from './path-to-notificator-module';

@NgModule({
  imports: [
    // Other modules...
    NotificatorModule // Lazy module imports the module normally
  ]
})
export class LazyModule { }

This ensures a single service instance exists in the root injector, which the lazy module can access through the injector hierarchy.

方案3：直接在根模块注册服务（不推荐，耦合性高） #

As a fallback, you can add NotificatorDataService directly to the providers array of AppModule. This makes the service available globally, but it adds unnecessary coupling to the root module and makes your code less modular.

import { NgModule } from '@angular/core';
import { NotificatorDataService } from './path-to-your-service';

@NgModule({
  providers: [
    // Other providers...
    NotificatorDataService
  ]
})
export class AppModule { }

Critical Note #

Never add NotificatorDataService to the providers array of your lazy-loaded module. This will create a new instance of the service in the lazy module's injector, leading to inconsistent state and unexpected behavior.

内容的提问来源于stack exchange，提问作者TheLittleCat