没有“车辆服务”服务提供商

Question

我收到错误：

处理请求时发生未处理的异常。

NodeInvocationException：未捕获（承诺）：错误：没有提供程序 车辆服务！错误：没有 VehicleService 的提供者！在 注入错误 (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\source\repos\Complexus.Inventory.UI\Complexus.Inventory.UI\ClientApp\dist\vendor.js:13386:21) 在 resolveNgModuleDep (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) 在 resolveDep (C:\Users\andrewkp\source\repos\Complexus.Inventory.UI\Complexus.Inventory.UI\ClientApp\dist\vendor.js:22015:45) 在创建类 (C:\Users\andrewkp\source\repos\Complexus.Inventory.UI\Complexus.Inventory.UI\ClientApp\dist\vendor.js:21868:35) 错误：未捕获（承诺）：错误：没有 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);
    }
}

我的车辆服务：

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

还有我的 app.browser.module.ts 文件：

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 中的声明下注册

如果属于同一个模块，将providers下的组件添加为，

@NgModule({
  declarations: [AppComponent]
})

如果它来自不同的模块，也将它添加到声明和导出下。也使用 HttpClientModule 代替 Http

编辑

如上所述，您需要在 Shared.Module.ts

内的声明和导出下添加 AppComponent

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