Angular 8: нет провайдера для HttpClient в обслуживании

Чтобы перенести проект с Angular 5 на Angular 8, я создал пустой проект с Angular CLI и скопировал свои модули, компоненты и службы в свою новую структуру проекта. Проект строится, но при выполнении я получаю классическое сообщение «Нет провайдера для HttpClient в обслуживании»:

    ERROR NullInjectorError: StaticInjectorError(AppModule)[TimeService -> HttpClient]: 
  StaticInjectorError(Platform: core)[TimeService -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at NullInjector.get (http://localhost:4200/vendor.js:50573:27)
    at resolveToken (http://localhost:4200/vendor.js:52359:24)
    at tryResolveToken (http://localhost:4200/vendor.js:52285:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:52148:20)
    at resolveToken (http://localhost:4200/vendor.js:52359:24)
    at tryResolveToken (http://localhost:4200/vendor.js:52285:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:52148:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:76198:29)
    at _createClass (http://localhost:4200/vendor.js:76275:32)
    at _createProviderInstance (http://localhost:4200/vendor.js:76231:26)

Я считаю, что мой app.module.ts в порядке: я импортирую HttpClientModule и помещаю его в импорт @NgModule сразу после BrowserModule.

@NgModule({
    declarations: [AppComponent,DelegationsComponent],
    imports:      [BrowserModule,
                  HttpClientModule,
                  GlobalModule.forRoot(),
                  AuthenticationModule,
                   DelegationModule,
                   routing,
                   FormsModule,
                   ReactiveFormsModule,
                   BrowserAnimationsModule,
                   ButtonModule, TableModule, DialogModule, DropdownModule, ToastModule, TabViewModule, InputTextModule, AutoCompleteModule, TooltipModule, CheckboxModule, OverlayPanelModule, MultiSelectModule, CalendarModule ],
    providers:    [APP_ROUTER_PROVIDERS, {provide: APP_BASE_HREF, useValue: getBaseHref()}],
    bootstrap:    [AppComponent]
})

Похоже, ошибка в TimeService. В этой службе HttpClient импортируется и вводится в конструктор.

import {HttpClient} from "@angular/common/http";

@Injectable()
export class TimeService extends BaseService {
    constructor(private http: HttpClient)

Затем TimeService вводится в DelegationsComponent.

import {TimeService} from "utils/time.service";
@Component({
    moduleId: __moduleName,
    selector: 'delegations',
    templateUrl: './delegations.component.html'
})
export class DelegationsComponent implements OnInit, OnDestroy {
    constructor(private timeService: TimeService)

И вы можете увидеть DelegationsComponent в моих объявлениях app.module.ts.

Любая идея ? Спасибо

РЕДАКТИРОВАТЬ: Пытаясь воспроизвести проблему на небольшом примере, я нашел причину: time.service.ts находится не в моем приложении angular, а в папке снаружи, потому что я делюсь им. с двумя другими угловыми приложениями. Я включаю его благодаря package.json моих приложений:

"utils": "file:../../../../../utils"

Итак, time.service.ts заканчивается на node_modules / utils. Если я помещу его в каталог src / app, он работает. Есть идеи, почему это не работает, и как я могу поделиться сервисом между несколькими приложениями angular?


person Clément Picou    schedule 15.07.2019    source источник
comment
проверьте импорт {HttpClientModule} из '@ angular / common / http';   -  person Sajeetharan    schedule 15.07.2019
comment
Он у меня уже есть в app.module.ts. Это требуется где-то еще?   -  person Clément Picou    schedule 15.07.2019


Ответы (3)


Ошибка =>

ERROR NullInjectorError: StaticInjectorError(AppModule)[TimeService -> HttpClient]: 
      StaticInjectorError(Platform: core)[TimeService -> HttpClient]:

У меня работает решение ниже, и я использую Angular версии 9.

=> Необходимо добавить => import {HttpClientModule} из '@angular/common/http'; в app.module.ts, а также в массив [import].

person Adhi Venkatesh    schedule 31.05.2020

Вам необходимо предоставить свою службу в корне (или желаемых компонентах), чтобы внедрить ее в приложение. В противном случае импортированный HttpClientModule не будет импортирован для инъекционного препарата.

Для обеспечения в корне используйте свойство providedIn, как показано ниже:

@Injectable({
    providedIn: 'root'
})
export class TimeService extends BaseService {
    constructor(private http: HttpClient){}
}

Если вы хотите предоставить услугу в компоненте, вам необходимо установить ее в свойстве providers декоратора компонента, как показано ниже:

@Component({
    moduleId: __moduleName,
    selector: 'delegations',
    templateUrl: './delegations.component.html',
    providers: [
        TimeService
    ]
})
export class DelegationsComponent implements OnInit, OnDestroy {
    constructor(private timeService: TimeService){}
}

Затем импортируйте TimeService и HttpClientModule в app.module.ts (или в свой функциональный модуль).

Вы можете найти рабочий пример здесь: https://stackblitz.com/edit/angular-bzvgwn

person Harun Yilmaz    schedule 15.07.2019
comment
В моем случае он был бы предоставлен In: DelegationsComponent, но поскольку TimeService вводится в DelegationsComponent, он создает циклическую зависимость. Это не проблема ? - person Clément Picou; 15.07.2019
comment
Спасибо за ваш ответ. Это делает TimeService доступным в AppComponent (если я удалю поставщика в вашем примере, у меня будет NullInjectorError: нет поставщика для TimeService!). Но моя проблема в том, чтобы иметь HttpClient в TimeService (StaticInjectorError (Platform: core) [TimeService - ›HttpClient]: NullInjectorError: нет поставщика для HttpClient!). Если я добавлю импорт HttpClientModule в app.module и инъекцию HttpClient в time.service в вашем примере, я не воспроизведу свою проблему. - person Clément Picou; 15.07.2019
comment
Хорошо, я понял. Я обновил ответ, а также проект stackblitz. Вы можете проверить это снова. Вам необходимо указать TimeService и HttpClientModule в своем модуле (приложении или функциональном модуле). - person Harun Yilmaz; 15.07.2019
comment
Еще раз спасибо, но у меня все еще не работает. И я не могу воспроизвести свою проблему на примере проекта на stackblitz. Некоторые уточнения: мой TimeService расширяет базовую службу, но я не думаю, что это проблема. Я пробовал использовать этот BaseService в stackblitz, и он работает. - person Clément Picou; 15.07.2019
comment
Хорошо, я разобрался. Конечно, проблема в том, чего я не упомянул, и мне очень жаль. TimeService находится в каталоге за пределами моего приложения angular, потому что он разделяется между тремя приложениями. Я включаю его в свой json-пакет приложения следующим образом: utils: file: ../../../../../ utils. Итак, TimeService заканчивается на node_modules. Есть идеи, почему это не работает так и как я могу включить общую службу? Спасибо - person Clément Picou; 16.07.2019
comment
Действительно трудно сказать, в чем именно проблема, не видя всего соответствующего кода. Может быть, я смогу помочь, если вы сможете воспроизвести минимальный пример в stackblitz или где-нибудь еще. - person Harun Yilmaz; 17.07.2019
comment
Я посмотрю и проверю, могу ли я что-нибудь сделать. Сейчас это напряженное время, но я обязательно посмотрю, как только у меня будет возможность. - person Harun Yilmaz; 17.07.2019

импортируйте это в свой app.module.ts. Это будет работать

import { HttpModule } from "@angular/http";
person Dilshan    schedule 15.07.2019
comment
Целого пакета @ angular / http больше не существует. HttpClientModule заменил HttpModule: angular.io/guide/deprecations - person Clément Picou; 15.07.2019
comment
Вы смотрели официальную документацию: https://angular.io/guide/deprecations#angularhttp - person Harun Yilmaz; 15.07.2019