NullInjectorError: R3InjectorError(AppModule) 添加提供程序后

Question

添加提供程序后，在 Angular 14 中也會出現 NullInjectorError

代碼如下所示

app.module.ts

import { LogService } from './services/log.service';
import { LogType, Config } from './interface/config';
import { loggerServiceFactory } from './logfactory';
export const config = {
  apiUrl: 'http://localhost:3000',
  logType: LogType.Default
}
 providers: [
    {provide: LogService, useFactory: loggerServiceFactory, deps:[config]}
  ],

loggerServiceFactory

import { AppConfig, LogType } from "./interface/config";
import { ClientService } from "./services/client.service";
import { LogService } from "./services/log.service";

export const loggerServiceFactory = (config: AppConfig) => {
    if(config.logType === LogType.Client) {
        return new ClientService();
    }
    return new LogService();
}

日志服務

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

@Injectable()
export class LogService {
  protected id = 0;
  constructor() {
    this.id = Math.random() * 100;
    console.log(`LoggerService ${this.id} created`)
   }
   log(message: string) {
    console.log(`LoggerService ${this.id} log: ${message}`);
   }
}

app.component.ts

constructor(private log: LogService){
    this.log.log('App component constructor');
}

Answer 1

在提供者數組中，您傳遞的是配置 object 而不是依賴項，這就是您收到 NullInjection 錯誤的原因。

一種解決方法是您可以創建新的注入令牌並使用 useValue 方法傳遞值，然后將 CONFIG 依賴項傳遞給 LogService 部門

import { InjectionToken, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { loggerServiceFactory, LogServiceToken } from './logfactory';
import { LogService } from './logservice';

export const config = {
  apiUrl: 'http://localhost:3000',
  logType: 'log',
};

export const CONFIG = new InjectionToken<typeof config>('CONFIG');

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  providers: [
    { provide: CONFIG, useValue: config },
    {
      provide: LogService,
      useFactory: (config) => {
        return loggerServiceFactory(config);
      },
      deps: [CONFIG],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}