I am getting NullInjectorError error when I am trying to use a service in my angular app. Below are my app.module.ts, admin.service.ts, angular.json(I have made a few changes to the default configs here) and package.json
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularEditorModule } from '@kolkov/angular-editor';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminCrudComponent } from './components/admin-crud/admin-crud.component';
import { FormInputComponent } from './components/form-input/form-input.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
AdminCrudComponent,
FormInputComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
AngularEditorModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
admin.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { URLConfig } from '../config/url.config';
import { environment } from '../../environments/environment';
@Injectable({ providedIn: 'root' })
export class AdminService {
constructor(private httpclient:HttpClient, private urlConfig: URLConfig) { }
createItem(item: any) {
const service = this.urlConfig.getConfig(environment.env);
const url = service.myApi+ 'items';
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
return this.httpclient.post(url, item, {headers: headers});
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"client": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]
},
"configurations": {
"prod": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"uat": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.ts"
}
],
"outputHashing": "all"
}
},
"defaultConfiguration": "prod"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"prod": {
"browserTarget": "client:build:prod"
},
"uat": {
"browserTarget": "client:build:uat"
}
},
"defaultConfiguration": "uat"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "client:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "client"
}
package.json
{
"name": "client",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"start:uat": "ng serve --configuration=uat",
"start:prod": "ng serve --configuration=prod",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"@kolkov/angular-editor": "^3.0.0-beta.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^5.3.3",
"ngx-editor": "^13.0.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.0",
"@angular/cli": "~13.2.0",
"@angular/compiler-cli": "~13.2.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}
Since I have made few config changes in angular.json that might be one of the reasons It is breaking.
The code looks fine, try removing the URLConfig from the component, which might fix the error.
Else without removing you can define the URL config like so.
The provided in root, will ensure, the service is accessible by DI throughout the application.
@Injectable({ providedIn: 'root' })
export class URLConfig {
getConfig() { ... }
}