Угловой v6.1.10 | ASP.Net Core v2.2.102
Я пытаюсь получить данные из своего API для заполнения раскрывающихся списков в моем приложении Angular.
Я получаю следующую ошибку и предупреждение на консоли:
Внимание
Соединение WebSocket с
Ошибка 'ws: // localhost: 5000 / sockjs-node / 050 / xwusnroj / websocket':
WebSocket закрывается до установления соединения.
WebSocketTransport.close @ sockjs.js: 2998
Error
Ошибка: ошибка (в обещании): ошибка:
StaticInjectorError (AppModule) [PortoService -> Http]:
StaticInjectorError (Платформа: ядро) [PortoService -> Http]:
NullInjectorError: Нет провайдера для Http!
Как показано на рисунке ниже:
При запуске Karma Debugger я получаю следующий список спецификаций:
CounterComponent должен отображать заголовок, должен начинаться с 0
затем увеличивается на 1 при нажатии FishFormComponent должен создать
PortoService должен быть создан
Я не уверен, почему я получаю эти ошибки. Любая помощь приветствуется!
Услуга
porto.services.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class PortoService {
constructor(private http: Http) { }
getPortos() {
return this.http.get('/api/portos')
.map(res => res.json());
}
}
App
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { FishFormComponent } from './fish-form/fish-form.component';
import { PortoService } from './services/porto.service';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
CounterComponent,
FetchDataComponent,
FishFormComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{path: 'fishes/new', component: FishFormComponent},
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
])
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin },
PortoService
],
bootstrap: [AppComponent]
})
export class AppModule { }
Форма
рыба-form.components.ts
import { PortoService } from './../services/porto.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-fish-form',
templateUrl: './fish-form.component.html',
styleUrls: ['./fish-form.component.css']
})
export class FishFormComponent implements OnInit {
portos;
constructor(private PortoService: PortoService) { }
ngOnInit() {
this.PortoService.getPortos().subscribe(portos => {
this.portos = portos;
console.log("PORTOS", this.portos);
});
}
}
рыба-form.component.ts
<h1>Adiciona um Peixe Novo</h1>
<form>
<div class="form-group">
<label for="porto">Porto</label>
<select id="porto" class="form-control">
<option value=""></option>
<option *ngFor="let p of portos" value="{{ p.id }}">{{ p.nome }}</option>
</select>
</div>
<div class="form-group">
<label for="especie">Especie</label>
<select id="especie" class="form-control"></select>
</div>
</form>