Flavio Henrique de Souza Almeida

Vários alunos já terminaram o curso sem problema algum. Vamos descobrir onde esta o erro.

Compartilhe o código do módulo principal e o componente no qual você injeta http para que eu possa olhar.

Compartilhe também seu package.json.

Em algum momento você instalou a versao mais recente do ionic e voltou atrás ? Se fez isso tem que começar o projeto do zero. Só no final do segundo módulo ensino a migrar para a versão 3 que saiu há algumas semanas.

Lembre-se também que você precisa dominar angular 2, aliás a mensagem de erro é classica do Angular 2.

Já tentei copiar o seu código pelo download e dá o mesmo erro também. Segue o meu código:

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 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public carros;

  constructor(public navCtrl: NavController, private _http: Http) {

    this._http
    .get('https://aluracar.herokuapp.com')
    .map(res => res.json())
    .toPromise()
    .then(carros => this.carros = carros);

  }

}

package.json

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-splashscreen",
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "aluraCar: An Ionic project"
}

Basta importar no app.module.ts

import { HttpModule } from '@angular/http';

e depois no imports adicionar o HttpModule:

@NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp) ],

Seu package.json esta indicando angular 4. Angular 4 é só no ionic3. Isso que esta estranho.

No meu projeto de dowload é tudo angular 2.

O erro que você tem é quando o projeto esta em ionic3. Por isso que no segundo módulo eu ensino a migrar para ionic3 que obriga a importar hppmodule e http.

Agora, como seu projeto fou para ionic 3 eu não sei. Só se a equipe do ionic3 atualizou indevidamente o template do ionic2.

Se você baixar meu projeto verá que o package.json é com angular 2 e não 4.

Então. ..para eu ter certeza antes e ir no fórum da equipe do ionic confirme para mim:

1 - instalou a versão do curso (ionic2) e criou um projeto do zero?

2 - seu projeto criado do zero no package.json usa angular 2?

Baixei os projetos de download e eles funcionaram. Não ocorre o erro que você apresentou porque no package.json tem angular 2.

Aguardo seu retorno. Vou criar um novo projeto e ver se mudaram algo.

1 - instalou a versão do curso (ionic2) e criou um projeto do zero?

Sim, segui exatamente o passo a passo pelos vídeos, sendo que no Linux, peguei ele limpo, sem nada instalado anteriormente, e instalei tudo conforme as descrições no vídeo.

2 - seu projeto criado do zero no package.json usa angular 2?

Sim, conforme as intruções utilizei o comando v2.

Segue abaixo meus arquivos json da raiz da pasta aluraCar

{
  "name": "aluraCar",
  "app_id": "",
  "v2": true,
  "typescript": true
}

acima arquivo ionic.config.json (ao que parece indica v2 do ionic)

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "aluraCar: An Ionic project"
}

acima arquivo package.json também da raiz da pasta aluraCar

eu criei novos arquivos e continou o erro...

Então, não testei aqui porque onde estou a internet é limitada. Mas pelo que vc apresentou a equipe do Ionic indevidamente alterou o template black do Ionic para a versão 3. É por isso que seu projeto não funciona, porque com Ionic3 você precisa importar justamente o modulo que ele esta reclamando.

Acabei de verificar que isso não quebrou apenas este curso, mais todos os cursos de Ionic2.

Então, enquanto decidimos como contornar esse problema.. para que você consiga fazer o treinamento até o fim, você no segundo capítulo e baixe o projeto com tudo o que foi feito no capítulo anterior. Nele, o template blank usado será corretamente o do ionic2. Só não esqueça depois de baixar o projeto do Ionic deste capítulo, entrar dentro da pasta e executar o comando npm installl. Isso fará com que todas as dependências sejam baixadas e é só continuar a partir dele.

O importante aqui é que vc jã sabe criar um projeto do zero, por isso pode fazer o download do projeto sem problema. NO final do segundo módulo, você aprenderá a migrar para ionic3 e aprenderá resolver esse problema que você esta enfrentando.

Baixe esse projeto

https://cursos.alura.com.br/course/ionic2-parte1/task/21954

Logo no início que continue dele.

Então, não testei aqui porque onde estou a internet é limitada. Mas pelo que vc apresentou a equipe do Ionic indevidamente alterou o template black do Ionic para a versão 3. É por isso que seu projeto não funciona, porque com Ionic3 você precisa importar justamente o modulo que ele esta reclamando.

Então, enquanto decidimos como contornar esse problema.. para que você consiga fazer treinamento até o fim, vá no segundo capítulo e baixe o projeto com tudo o que foi feito no capítulo anterior. Nele, o template blank usado será corretamente o do ionic2. Só não esqueça depois de baixar o projeto do Ionic deste capítulo, entrar dentro da pasta e executar o comando npm installl. Isso fará com que todas as dependências sejam baixadas e é só continuar a partir dele.

O importante aqui é que vc jã sabe criar um projeto do zero, por isso pode fazer o download do projeto sem problema. NO final do segundo módulo, você aprenderá a migrar para ionic3 e aprenderá resolver esse problema que você esta enfrentando.

Baixe esse projeto

https://cursos.alura.com.br/course/ionic2-parte1/task/21954

Logo no início que continue dele.

Fazendo o download do projeto e atualizando via npm install, deu certo, muito obrigado.

Precisei aplicar a mesma solução e funcionou..

Pronto pessoal, adequei o projeto à realizado imposta pela equipe do Ionic.

O vídeo de criação do projeto foi substituído por esse conteúdo aqui:

https://cursos.alura.com.br/course/ionic2-parte1/task/26829

Todos os cursos lançados de Ionic2 nas mais diversas plataformas de ensino haviam quebrado também.

A solução é fazer o download do projeto na versão do Ionic2 (estamos em um curso de Ionic2, certo).

A boa notícia é que mesmo antes do acontecido, eu já ensinava a migrar para Ioni3 na parte dois do curso.

Agradeço ao Andreisson por ter sido o primeiro a reportar esse problema.

Sucesso e bom estudo para todos!