Нет поставщика услуг 'VehicleService'

Question

Я получаю сообщение об ошибке:

Произошло необработанное исключение при обработке запроса.

NodeInvocationException: Uncaught (в обещании): Ошибка: Нет поставщика для VehicleService!Ошибка: нет провайдера для VehicleService!при инъекции error (C: \ Users \ andrewkp \ source \ repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 12066: 90) в noProviderError (C: \ Users \ andrewkp \ source \repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 12104: 12) в ReflectiveInjector_.module.exports.ReflectiveInjector _. throwOrNull (C: \ Users \ andrewkp \ source \ repos\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 13546: 19) в ReflectiveInjector .module.exports.ReflectiveInjector _. getByKeyDefault (C: \ Users \ andrewkp \ source\ repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 13585: 25) в ReflectiveInjector .module.exports.ReflectiveInjector _. getByKey (C: \ Users \ andrewkp\ source \ repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 13517: 25) в ReflectiveInjector .module.exports.ReflectiveInjector_.get (C: \ Users \ andrewkp \источник \ Repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ расстояние\ vendor.js: 13386: 21) в resolNgModuleDep (C: \ Users \ andrewkp \ source \ repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 20430: 25) в NgModuleRef_.module.exports.NgModuleRef_.get (C: \ Users \ andrewkp \ source \ repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 21512: 16) в resolDep (C: \ Users\ andrewkp \ source \ repos \ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 22015: 45) в createClass (C: \ Users \ andrewkp \ source \ repos \ Complexus.Inventory.UI\ Complexus.Inventory.UI \ ClientApp \ dist \ vendor.js: 21868: 35) Ошибка: Uncaught (в обещании): Ошибка: Нет провайдера для VehicleService!Ошибка: нет службы для VehicleService!

Вот мой компонент, использующий VehicleService:

import { Component, Inject, Input } from '@angular/core';
import { VehicleService } from '../../Services/VehicleService';
import { Vehicle } from '../../Models/Vehicle';

@Component({
    selector: 'addVehicle',
    templateUrl: './add.component.html'
})
export class AddComponent {
    @Input() public vehicle: Vehicle;

    constructor(private vehicleService: VehicleService) {
        this.vehicle = new Vehicle();
    }

    public AddVehicle(): void {
        this.vehicleService.AddVehicle(this.vehicle);
    }
}

Мой VehcleService:

import { HttpModule, Http } from '@angular/http';
import { Injectable, Inject } from '@angular/core';
import { Vehicle } from '../Models/Vehicle';
import { ConfigService } from './ConfigService';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class VehicleService {

    constructor(private httpClient: Http, private configService: ConfigService) { }

    public AddVehicle(vehicle: Vehicle) {
        try {
            //do some manipulation: CylinderCapactiy = Enginesize / CylinderVariant
            vehicle.CylinderCapacity = vehicle.EngineCapacity / vehicle.CylinderVariant;
            var response = this.httpClient.post(this.configService.AddVehicleEndPoint, vehicle);
        }
        catch (err) {
            console.log(err);
        }
    }
}

И мое приложение.browser.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.shared.module';
import { AppComponent } from './components/app/app.component';
import { VehicleService } from './Services/VehicleService';
import { StatService } from './Services/StatService';
import { ConfigService } from './Services/ConfigService';
import { HttpModule, Http } from '@angular/http';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        AppModuleShared,
        HttpModule,
        Http
    ],
    providers: [
        StatService,
        ConfigService,
        VehicleService,
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

А вот и мой app.shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { AddComponent } from './components/Vehicle/add.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        AddComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'add-vehicle', component: AddComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

Почему я получаю эту ошибку?

Answer 1

Я не вижу, чтобы ваш компонент был зарегистрирован под декларациями в вашем app.browser.module.ts

, если он принадлежит тому же модулю, добавьте компонент под провайдерами как,

@NgModule({
  declarations: [AppComponent]
})

если это из другого модуля, добавьте его под объявлениями и экспортируйте тоже. Также используйте HttpClientModule вместо Http

EDIT

Как я уже говорил выше, вам нужно добавить AppComponent в декларации и экспортировать внутри Shared.Module.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [AppComponent],
  exports: [AppComponent]
})