Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Minha aplicação ocorreu um Runtime Error

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

}
4 respostas
solução!

Boa noite, Matheus! Como vai?

Aparentemente o seu código está correto, no entanto pude perceber que vc está utilizando o Node na versão 8.x quando eu aconselho nas aulas a utilizar a versão 6.x.

Desinstale o Ionic, o Cordova e o Node, nessa ordem. Em seguida, instale a versão 6.x do Node e instale o Ionic e o Cordova da forma como é feito durante a aula.

Tendo feito isso, remova a pasta node_modules de dentro da pasta do seu projeto e depois execute o comando npm install dentro da pasta do projeto.

Por fim, após a conclusão da instalação das dependências, execute o comando ionic serve --lab e veja se o seu projeto funciona.

Seguir os passos na ordem correta é muito importante.

Se ainda acontecer algum problema é só falar o que está acontecendo e tbm postar aqui o resultado da execução dentro da pasta do seu projeto do comando ionic info.

Grande abraço!

Bom dia, Matheus! Como vai?

Vc conseguiu resolver o problema? Se sim, poderia compartilhar para que mais pessoas possam saber como resolver caso venham a ter o mesmo problema?

Bom dia Gabriel!

Aconteceu o mesmo erro comigo no curso e em uma aplicação que estou desenvolvendo... seguindo os procedimentos na ordem que você passou a aplicação funcionou perfeitamente.

Valeu!

Boa tarde, Rodrigo! Como vai?

Mto obrigado pelo feedback!

Grande abraço e bons estudos!