Angular 18独立组件中配置ngx-logger的方法求助

问题背景 #

我有一个基于独立组件构建的Angular 18应用，想要用ngx-logger把错误、警告和信息日志发送到服务器。查了很多模块化模式下的ngx-logger教程，但没找到独立组件的使用方法。

尝试在组件imports里添加LoggerModule.forRoot(...)时编译报错，注释掉该部分后运行出现以下错误：

R3InjectorError(Standalone[_AppComponent])[NGXLogger -> NGXLogger -> TOKEN_LOGGER_CONFIG -> TOKEN_LOGGER_CONFIG]:
NullInjectorError: No provider for TOKEN_LOGGER_CONFIG!
...（省略堆栈信息）

原代码如下：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LoggerModule, NGXLogger } from 'ngx-logger';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    LoggerModule
    // .forRoot({
    //   serverLoggingUrl: '/api/logs',
    //   level: NgxLoggerLevel.DEBUG,
    //   serverLogLevel: NgxLoggerLevel.ERROR
    // })
  ],
  providers: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Hello';

  constructor(private logger: NGXLogger) {
    this.logger.debug("Debug message");
    this.logger.info("Info message");
    this.logger.log("Default log message");
    this.logger.warn("Warning message");
    this.logger.error("Error message");
  }
}

核心问题 #

独立组件的imports数组仅支持独立组件/指令/管道，或普通NgModule，无法直接使用模块的.forRoot()方法（该方法返回的是模块配置对象，而非模块本身）。注释.forRoot()后，未提供ngx-logger的必要配置，导致NGXLogger找不到TOKEN_LOGGER_CONFIG依赖，从而触发注入错误。

正确实现步骤 #

1. 导入配置工具：从ngx-logger导入provideLogger和NgxLoggerLevel，替代原有的LoggerModule导入。
2. 在providers中配置日志：在组件的providers数组里通过provideLogger传入日志配置，替代LoggerModule.forRoot()的作用。
3. 移除不必要的模块导入：无需再在imports中添加LoggerModule。

修改后的完整代码 #

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NGXLogger, provideLogger, NgxLoggerLevel } from 'ngx-logger';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  providers: [
    provideLogger({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR
    })
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Hello';

  constructor(private logger: NGXLogger) {
    this.logger.debug("Debug message");
    this.logger.info("Info message");
    this.logger.log("Default log message");
    this.logger.warn("Warning message");
    this.logger.error("Error message");
  }
}

关键说明 #

• provideLogger是ngx-logger为独立组件/standalone应用提供的配置函数，会自动注册NGXLogger服务及所需的配置依赖（包括TOKEN_LOGGER_CONFIG）。
• 配置中的serverLogLevel: NgxLoggerLevel.ERROR表示仅错误级别及以上的日志会发送到服务器，level: NgxLoggerLevel.DEBUG表示本地控制台会输出所有DEBUG及以上级别的日志。
• 若需在整个应用中共享日志配置，建议在bootstrapApplication的providers里添加provideLogger，而非每个组件单独配置。

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