Question

我收到错误：

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

NodeInvocationException：Uncaught（在promise中）：错误：没有提供者   VehicleService！错误：没有VehicleService的提供商！在   injectionError   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：12066：90）   at noProviderError   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：12104：12）   在ReflectiveInjector_.module.exports.ReflectiveInjector _。 throwOrNull   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：13546：19）   在   ReflectiveInjector .module.exports.ReflectiveInjector _ getByKeyDefault   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：13585：25）   在ReflectiveInjector .module.exports.ReflectiveInjector _。 getByKey   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：13517：25）   在ReflectiveInjector .module.exports.ReflectiveInjector_.get   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：13386：21）   在resolveNgModuleDep   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：20430：25）   在NgModuleRef_.module.exports.NgModuleRef_.get   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：21512：16）   在resolveDep   （C：\ Users \用户andrewkp \源\回购\ Complexus.Inventory.UI \ Complexus.Inventory.UI \ ClientApp \ DIST \ vendor.js：22015：45）   在createClass   （C：\ Users \用户andrewkp \源\回购\ 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);
    }
}

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

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

如果它属于同一模块，则将提供商下的组件添加为

@NgModule({
  declarations: [AppComponent]
})

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

修改

正如我上面提到的，您需要在 Shared.Module.ts
内的声明和导出下添加AppComponent
@NgModule({ imports: [ CommonModule ], declarations: [AppComponent], exports: [AppComponent] })

没有提供服务的'VehicleService'

1 个答案: