Почему проблема NullInjectionError не решена путем добавления ProvideHttpClient() в файл app.config Angular 18
Я пытаюсь получить данные из серверной части моего приложения. Извлечение данных хорошо работает при сочетании функций обещания и выборки. Но когда я попытался реализовать это с помощью службы HttpClient, это выдало ошибку. Я проверил предыдущий ответ на этой платформе, но не смог решить проблему.
app.config.ts
import {ApplicationConfig} from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [provideHttpClient()],
};
Housing.service.ts
export class HousingService {
url = "http://localhost:5150"
protected homeLocationList2: HomeLocation[] = [];
constructor(private http:HttpClient) {
}
getAllProduct(): Observable<HomeLocation[]>{
const response = this.http.get<HomeLocation[]>(`${this.url}/Home/AllProduct`)
return response
}
}
Главная.Component.ts
export class HomeComponent {
productList:HomeLocation[] = [];
housingService: HousingService = inject(HousingService)
constructor(){
this.housingService.getAllProduct().subscribe(data=>{
this.productList = data;
})
}
}
Это ссылка на исходный код на github.
https://github.com/ishanuzzal/angular_full_stack
Ошибка, которую я получаю
ERROR NullInjectorError: NullInjectorError: No provider for _HttpClient!
at NullInjector.get (core.mjs:1632:21)
at R3Injector.get (core.mjs:3014:27)
at R3Injector.get (core.mjs:3014:27)
at injectInjectorOnly (core.mjs:1095:36)
at Module.ɵɵinject (core.mjs:1101:40)
at Object.HousingService_Factory [as factory] (housing.service.ts:8:28)
at core.mjs:3132:35
at runInInjectorProfilerContext (core.mjs:866:5)
at R3Injector.hydrate (core.mjs:3131:11)
at R3Injector.get (core.mjs:3005:23)
У вас есть app.module.ts? В этом случае к provideHttpClient() необходимо добавить AppModule.
Пожалуйста, будьте внимательны при добавлении тегов; angularjs используется для Angular v1 на https//angularjs.org/, который уже не существует уже 2 года. Angular v18 отмечен тегом angular.
У меня нет app.module.ts
@SAFIQULISLAMUZZAL203-15-144, пожалуйста, поделитесь репозиторием на GitHub для проверки, требуйте более подробную информацию.
Я подозреваю, что на вашем bootstrapApplication() подтвердите, что вам предоставили appConfig. Можете ли вы поделиться этим?
Ответы 2
Вы не используете app.config.ts (удалено), вместо этого добавьте provideHttpClient в массив поставщиков main.ts.
import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import routeConfig from './app/route';
bootstrapApplication(AppComponent, {providers: [
provideProtractorTestingSupport(),
provideRouter(routeConfig),
provideHttpClient(), // <- changed here!
]
}).catch((err) =>
console.error(err),
);
Разветвленный репозиторий Github
Кажется, вы создали app.config.ts, но не используете его. Импортируйте его в src/main.ts:
import { appConfig } from './app/app.config';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);
Также обязательно добавьте конфигурацию, которая у вас была ранее в main.ts, в app.config.ts:
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideProtractorTestingSupport(),
provideRouter(routeConfig),
],
};
Это выглядит правильно. Вы уверены, что ошибка нулевого инжектора связана с
HttpClient? Можете ли вы создать и связать StackBlitz, воспроизводящий ошибку?