如何在独立组件中配置 ngx-logger (Angular 18)

Question

我现在有一个基于独立组件概念构建的 Angular 18 应用程序。我想使用 ngx-logger 将错误、警告和 Inf 记录到服务器。我已经看过多篇关于模块化模式中的 ng-logger 的文章，但没有提及如何在独立组件中使用它们。

请指导我如何做到这一点。

当我添加 LoggerModule.forRoort({....}) 时，我编写的代码出现编译问题。

为了解决错误，我评论了 .forRoot({..}) 部分。

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");
  }
}

输出：

R3InjectorError(Standalone[_AppComponent])[NGXLogger -> NGXLogger -> TOKEN_LOGGER_CONFIG -> TOKEN_LOGGER_CONFIG]: 
  NullInjectorError: No provider for TOKEN_LOGGER_CONFIG!
    at NullInjector.get (eval at instantiateModule (file:///aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:13862:21)
    at R3Injector.get (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:14755:27)
    at R3Injector.get (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:14755:27)
    at injectInjectorOnly (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:13595:36)
    at Module.ɵɵinject (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:13601:59)
    at Object.NGXLogger_Factory [as factory] (eval at instantiateModule 

Answer 1

要在 Angular 18 中的独立组件中配置 ngx-logger，您需要执行以下步骤。由于 Angular 18 引入了不依赖 NgModule 的独立组件，因此设置略有不同，但仍然很简单。操作方法如下：

分步指南： 安装 ngx-logger：首先，如果尚未安装 ngx-logger 软件包，请安装。

npm install ngx-logger

在 main.ts 中配置 NgxLogger：独立组件不使用 AppModule，因此您将在

中的 bootstrapApplication 方法中配置全局提供程序

main.ts

文件。

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideNGXLogger, LoggerModule, NGXLoggerMonitor, NgxLoggerLevel } from 'ngx-logger';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    provideNGXLogger({
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR,
    })
  ]
}).catch(err => console.error(err));

将 NGXLogger 添加到您的独立组件：在您的独立组件中，注入 NGXLogger 来记录消息。您将直接在组件中导入并使用 NGXLogger。

import { Component } from '@angular/core';
import { NGXLogger } from 'ngx-logger';

@Component({
  standalone: true,
  selector: 'app-logger',
  template: `<h1>Standalone Component with NGX Logger</h1>`,
  providers: [NGXLogger]
})
export class LoggerComponent {

  constructor(private logger: NGXLogger) {
    this.logger.debug('LoggerComponent initialized');
  }

  logMessage() {
    this.logger.info('Standalone component logging info!');
  }
}

在特定组件中提供配置：如果您希望在特定独立组件中拥有不同的记录器配置，您可以使用提供程序在组件级别提供NGXLogger。

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

@Component({
  standalone: true,
  selector: 'app-another-logger',
  template: `<h1>Another Logger Standalone Component</h1>`,
  providers: [
    {
      provide: NGXLogger,
      useFactory: () => {
        const logger = new NGXLogger();
        logger.updateConfig({ level: NgxLoggerLevel.TRACE });
        return logger;
      }
    }
  ]
})
export class AnotherLoggerComponent {

  constructor(private logger: NGXLogger) {
    this.logger.trace('Trace level logging from AnotherLoggerComponent');
  }
}