Angular多共享模块导致console.log失效问题求助

问题场景 #

Angular 应用采用懒加载路由，现有通用 SharedModule 存放全局共用组件。为在两个懒加载模块中复用部分组件，新增 OtherSharedModule，但出现以下问题：

• 组件的数据加载、HTML 渲染、指令功能均正常
• OtherSharedModule 中组件的 console.log（通过自定义 LoggerService 输出）完全不显示
• 应用其他区域（包括 SharedModule 组件）的日志输出正常

模块结构 #

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then(
        (m) => m.HomeModule,
      ),
  },
  // 其他懒加载路由
];

shared.module.ts

@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent,
    ToastsContainer,
    LangSwitchComponent,
    ValidationMessagesComponent,
    ConfirmModalComponent,
    ErrorIconComponent,
    ValidationMessagesComponent,
  ],
  imports: [
    CommonModule,
    NgbModule,
    NgbTooltipModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    RouterModule,
    TranslateModule,
  ],
  exports: [
    HeaderComponent,
    FooterComponent,
    ToastsContainer,
    LangSwitchComponent,
    ValidationMessagesComponent,
    ConfirmModalComponent,
    ErrorIconComponent,
    ValidationMessagesComponent,
    CommonModule,
    NgbModule,
    NgbTooltipModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    TranslateModule,
  ],
})
export class SharedModule {}

other-shared.module.ts

@NgModule({
  declarations: [
    Component1,
    Component2,
    // 其他复用组件
  ],
  imports: [SharedModule, DragDropModule],
  exports: [
    SharedModule,
    Component1,
    Component2,
    // 其他复用组件
  ],
})
export class OtherSharedModule {}

正常的懒加载模块（some-lazy-loaded-page-module.ts）

const routes: Routes = [{ path: '', component: Page1MainComponent }];
@NgModule({
  declarations: [Page1MainComponent],
  imports: [SharedModule, RouterModule.forChild(routes)],
})
export class LazyLoadedPageModule {}

出现问题的懒加载模块（lazy-loaded-page-where-I-use-my-other-shared-module.ts）

const routes: Routes = [{ path: '', component: MainComponent }];

@NgModule({
  declarations: [
    MainComponent,
    SubComponent1,
    SubComponent2,
    // 其他页面组件
  ],
  imports: [
    OtherSharedModule,
    RouterModule.forChild(routes),
  ],
})
export class LazyLoadedPageWithIssueModule {}

排查结果 #

• 将 OtherSharedModule 中的组件移至单个页面模块并禁用第二个懒加载页面，日志输出正常
• 仅在一个懒加载模块中导入 OtherSharedModule，日志输出正常
• 同时在两个懒加载模块中导入 OtherSharedModule，日志失效
• 将组件移回 SharedModule，日志恢复正常

补充背景 #

应用中多数组件继承 BaseComponent 复用通用服务，SharedModule 组件未继承，OtherSharedModule 组件均继承该基类：

base.component.ts

export class BaseComponent {
  protected toastService: ToastService;
  protected translateService: TranslateService;
  protected loggerService: LoggerService;
  protected validatorService: ValidatorService;

  constructor() {
    this.toastService = AppInjector.injector.get(ToastService);
    this.translateService = AppInjector.injector.get(TranslateService);
    this.loggerService = AppInjector.injector.get(LoggerService);
    this.validatorService = AppInjector.injector.get(ValidatorService);
  }
  // 其他通用方法
}

为避免子类重复注入服务，使用 AppInjector 直接获取根注入器实例。

logger.service.ts

@Injectable({
  providedIn: 'root',
})
export class LoggerService {
  level: LogLevel = LogLevel.Info;
  logWithDate: boolean = true;

  constructor() {
    this.level = environment.logLevel;
  }

  public get debug(): LogFunction {
    if (!this.shouldLog(LogLevel.Debug)) return () => null;
    const now = new Date();
    const time = `[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}]`;
    const type = `Type: ${LogLevel[LogLevel.Debug]};`;
    const style =
      'color:' +
      LogColor.Default +
      ';font-weight:bold; background-color: ' +
      LogColor.Debug +
      ';';

    return console.log.bind(
      window.console,
      `%c ${time} ${type} Message: %s`,
      style,
    );
  }

  // 其他日志级别方法（info、error等）
  private shouldLog(level: LogLevel): boolean {
    return level >= this.level;
  }
}

问题原因分析 #

1. 懒加载模块的模块实例隔离：Angular 中未被根模块导入的模块，会被每个导入它的懒加载模块创建独立实例。OtherSharedModule 被两个懒加载模块分别导入，导致模块内组件被多次实例化，BaseComponent 构造函数重复调用。
2. LoggerService 的 getter 绑定问题：debug 是 getter 属性，每次访问会创建一个绑定了 console.log 的新函数。当第二个懒加载模块加载时，可能因 shouldLog 判断逻辑（或环境变量读取时机问题）返回空函数 () => null，导致日志无法输出。
3. AppInjector 的潜在风险：使用 AppInjector 绕过 Angular 依赖注入系统，可能在懒加载模块上下文出现服务获取异常（尽管 LoggerService 是根单例，但多次获取可能触发未预期的状态）。

解决方案 #

方案1：修改 LoggerService，将 getter 改为方法 #

将 debug 从 getter 属性改为普通方法，每次调用时重新计算日志参数，避免提前绑定导致的状态异常：

@Injectable({
  providedIn: 'root',
})
export class LoggerService {
  level: LogLevel = LogLevel.Info;
  logWithDate: boolean = true;

  constructor() {
    this.level = environment.logLevel;
  }

  public debug(message: any): void {
    if (!this.shouldLog(LogLevel.Debug)) return;
    const now = new Date();
    const time = `[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}]`;
    const type = `Type: ${LogLevel[LogLevel.Debug]};`;
    const style =
      'color:' +
      LogColor.Default +
      ';font-weight:bold; background-color: ' +
      LogColor.Debug +
      ';';

    console.log(`%c ${time} ${type} Message: %s`, style, message);
  }

  // 其他日志级别方法同步修改
  private shouldLog(level: LogLevel): boolean {
    return level >= this.level;
  }
}

调用方式同步修改为：this.loggerService.debug('日志内容')

方案2：将 OtherSharedModule 设为根模块导入的单例模块 #

在 AppModule 中导入 OtherSharedModule，确保模块仅被实例化一次，避免懒加载模块重复创建实例：

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    OtherSharedModule, // 根模块导入，确保单例
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

之后懒加载模块仍可正常导入 OtherSharedModule，Angular 会复用根模块的实例。

方案3：遵循 Angular 依赖注入规范，移除 AppInjector #

修改 BaseComponent 采用构造函数注入服务，子类通过 super 传递依赖：

// base.component.ts
export class BaseComponent {
  constructor(
    protected toastService: ToastService,
    protected translateService: TranslateService,
    protected loggerService: LoggerService,
    protected validatorService: ValidatorService
  ) {}
  // 其他通用方法
}

// Component1.ts
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
})
export class Component1 extends BaseComponent {
  constructor(
    toastService: ToastService,
    translateService: TranslateService,
    loggerService: LoggerService,
    validatorService: ValidatorService
  ) {
    super(toastService, translateService, loggerService, validatorService);
  }
}

此方案完全符合 Angular 依赖注入机制，从根源避免上下文异常问题。

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