CODEWITHSUNDEEP
angular
Rijo
Rijo

Reputation: 3043

NullInjectorError: R3InjectorError(AppModule) After adding providers

After adding provider also getting the NullInjectorError in Angular 14

Code shown below

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

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

Upvotes: 1

Views: 2177

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27343

In providers array you were passing config object instead of dependency, that is why you getting NullInjection error.

One way to fix is you can create new injection token and pass value using useValue method, then pass CONFIG dependency to LogService deps

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 {}

Upvotes: 5

Related Questions