Segui os passos da aula, porem ao final não ocorreu o esperado como no caso do professor... Ocorreu o seguinte erro:
Error: Uncaught (in promise): Error: No provider for CarrosServiceProvider!
Error: No provider for CarrosServiceProvider!
at injectionError (http://localhost:8100/build/vendor.js:1477:90)
at noProviderError (http://localhost:8100/build/vendor.js:1515:12)
at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:2957:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/vendor.js:2996:25)
at ReflectiveInjector_._getByKey (http://localhost:8100/build/vendor.js:2928:25)
at ReflectiveInjector_.get (http://localhost:8100/build/vendor.js:2797:21)
at resolveNgModuleDep (http://localhost:8100/build/vendor.js:9797:25)
at NgModuleRef_.get (http://localhost:8100/build/vendor.js:10885:16)
at resolveDep (http://localhost:8100/build/vendor.js:11388:45)
at createClass (http://localhost:8100/build/vendor.js:11252:32)
at c (http://localhost:8100/build/polyfills.js:3:19132)
at Object.reject (http://localhost:8100/build/polyfills.js:3:18554)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:44020:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:44008:14)
at http://localhost:8100/build/vendor.js:44063:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:14356)
at Object.onInvoke (http://localhost:8100/build/vendor.js:4198:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14296)
at r.run (http://localhost:8100/build/polyfills.js:3:9523)
at http://localhost:8100/build/polyfills.js:3:19622
Utilizo as versões: - Ionic Framework: 3.8.0 - Ionic App Scripts: 3.0.1 - Angular Core: 4.4.4 - Agular Compiler CLI: 4.4.4 - Node: 8.10.0
Segue a baixo os arquivos: - app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpClientModule } from '@angular/common/http';
import { CarrosServiceProvider } from '../providers/carros-service/carros-service';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
CarrosServiceProvider
]
})
export class AppModule {}
- carros-service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Carro } from '../../modelos/carro';
/*
Generated class for the CarrosServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class CarrosServiceProvider {
constructor(private _http: HttpClient) {
}
lista() {
return this._http.get<Carro[]>('http://localhost:8080/api/carro/listaTodos');
}
}
- home.ts
import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
import { HttpErrorResponse } from '@angular/common/http';
import { CarrosServiceProvider } from '../../providers/carros-service/carros-service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public carros: Carro[];
constructor(public navCtrl: NavController,
private _loadingCtrl: LoadingController,
private _alertCtrl: AlertController,
private _carrosService: CarrosServiceProvider) {
let loading = this._loadingCtrl.create({
content: 'Carregando carros...'
});
loading.present();
_carrosService.lista()
.subscribe(
(carros)=>{
this.carros = carros;
loading.dismiss();
},
(err: HttpErrorResponse)=>{
console.log(err);
loading.dismiss();
this._alertCtrl.create({
title: 'Falha na conexão',
subTitle: 'Não foi possivel carregar a lista de carros. Tente novamente mais tarde',
buttons: [
{ text:'Ok' }
]
}).present();
}
);
}
}