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

Importação dos pacotes Ionic Native

Olá! Fiz todos os passos para migração do ionic 2 para a 3, porém, o compilador não está conseguindo identificar as classes Camera, SplashScreen, StatusBar e todas as outras que importei no app.module.ts

Removi a pasta node_modules várias vezes e dei o npm install também, mas não tive sucesso.

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
15 respostas

Bom dia!!!

Você instalou individualmente cada um deles? Você registrou no provider?

Olá MESTRE Flávio! Eu fiz conforme sua aula, copiei todo o package.json, com todos aqueles pacotes com as novas versões, e dei um npm install.

E também registrei todos no providers, tudo como mandava no figurindo.

Opa! Só para garantir, cola aqui o código do módulo principal da aplicação para eu ver. Vamos descobrir. Testei aqui os passos e deu certo.

Cole também a msg de erro do compilador no terminal. Isso vai me ajudar bastante.

Opa, obrigado pelo feedback rápido! Segue abaixo o código:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { EscolhaPage } from '../pages/escolha/escolha';
import { CadastroPage } from '../pages/cadastro/cadastro';
import { AgendamentosPage } from '../pages/agendamentos/agendamentos';
import { LoginPage } from '../pages/login/login';
import { PerfilPage } from '../pages/perfil/perfil';
import { AgendamentoService } from "../domain/agendamento/agendamento.service";
import { UsuarioService } from "../domain/usuario/usuario.service";
import { Storage } from "@ionic/storage";
import { AgendamentoDao } from "../domain/agendamento/agendamento-dao";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http";

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Vibration } from '@ionic-native/vibration';
import { DatePicker } from '@ionic-native/date-picker';
import { Camera } from '@ionic-native/camera';

function provideStorage() {
    return new Storage({
        name : 'aluracar',
        storeName: 'agendamentos'
    });
}

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        EscolhaPage,
        CadastroPage,
        AgendamentosPage,
        LoginPage,
        PerfilPage
    ],
    imports: [
        IonicModule.forRoot(MyApp),
        BrowserModule,
        HttpModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        EscolhaPage,
        CadastroPage,
        AgendamentosPage,
        LoginPage,
        PerfilPage
    ],
    providers: [
        { provide: ErrorHandler, useClass: IonicErrorHandler },
        { provide: Storage, useFactory: provideStorage },
        AgendamentoService,
        AgendamentoDao,
        UsuarioService,
        SplashScreen,
        StatusBar,
        Vibration,
        DatePicker,
        Camera
    ]
})
export class AppModule {}

Até aqui tudo ok. Me passa a mensagem de erro do terminal completa.

Opa, passo sim! Segue:

$ ionic serve --lab

> ionic-hello-world@ ionic:serve /Users/kildersonsena/Desktop/aluraCar
> ionic-app-scripts serve "--v2" "--lab" "--address" "0.0.0.0" "--port" "8101" "--livereload-port" "35730"

[15:04:02]  ionic-app-scripts 1.0.0 
[15:04:03]  watch started ... 
[15:04:03]  build dev started ... 
[15:04:03]  clean started ... 
[15:04:03]  clean finished in 7 ms 
[15:04:03]  copy started ... 
[15:04:03]  transpile started ... 
[15:04:05]  typescript: src/app/app.component.ts, line: 24 
            Cannot find name 'SplashScreen'. 
[15:04:05]  typescript: src/app/app.component.ts, line: 25 
[15:04:05]  typescript: src/app/app.module.ts, line: 28 
[15:04:05]  typescript: src/pages/cadastro/cadastro.ts, line: 25 
[15:04:05]  typescript: src/pages/cadastro/cadastro.ts, line: 26 
[15:04:05]  typescript: src/pages/perfil/perfil.ts, line: 18 

      L23:  platform: Platform,
      L24:  public splashScreen: SplashScreen,
      L25:  public statusBar: StatusBar

            Cannot find name 'StatusBar'. 

      L24:      public splashScreen: SplashScreen,
      L25:      public statusBar: StatusBar
      L26:  ) {

            Argument of type '{ name: string; storeName: string; }' is not assignable to parameter of type '[string]'. 
            Object literal may only specify known properties, and 'name' does not exist in type '[string]'. 

      L27:  return new Storage({
      L28:      name : 'aluracar',
      L29:      storeName: 'agendamentos'

            Cannot find name 'Vibration'. 

      L24:  private _service: AgendamentoService,
      L25:  private _vibration: Vibration,
      L26:  private _datePicker: DatePicker

            Cannot find name 'DatePicker'. 

      L25:      private _vibration: Vibration,
      L26:      private _datePicker: DatePicker
      L27:  ) {

            Cannot find name 'Camera'. 

      L17:      private _service: UsuarioService,
      L18:      private _camera: Camera
      L19:  ) {  }

[15:04:05]  transpile failed 
[15:04:05]  dev server running: http://localhost:8101/ 

[15:04:06]  copy finished in 3.09 s 
[15:04:06]  watch ready in 3.17 s

Mostre para mim o código de app.conponent.ts.

Se puder compartilhar o projeto no Git sem a pasta node_modules, melhor ainda. Parece haver algum problema nos imports.

Bom dia! Claro que sim, segue o repositório:

https://github.com/dersonsena/aluracar

Opa! Você precisa postar tudo, o projeto inteiro sem node_modules. Tá faltando vários arquivo de um projeto Ionic2/3. Para que o teste fique mais fidedigno.

solução!

Pois é, mesmo eu fazendo lock de versão a equipe do Ionic quebrou o projeto mais uma vez. O problema é ionicCoreNative.

No caso, o ideal é começar um projeto novo e não migrar esse e apenas ficar atento para os passos que mudaram. Usando o CLI deles o problema parece estar resolvido. Muito chato isso, porque difícil o dev manter um ambiente à prova de mudança.

Repositório atualizado! Dá uma olhada lá (y)

Ah, acabei de ver sua última resposta. Eu criei ontem um projeto blank pelo Ionic CLI e ele instalou o projeto na versão 3. Então, nesse caso ficou resolvido o problema.

Muito obrigado pelo feedback e pelas aulas.

Forte abraço.

Boa! Eu estou atualizando o projeto aqui, a parte final para funcionar. O mais correto é isso que você fez sim, mas já já atualizou o package.json lá. Tem uma coisa que você precisa alterar no código com a versão mais nova do Ionic. Você precisa conferir daqui a pouco a última parte do tutorial. Ok?

Dá uma olhada no item 10 agora! :) Você precisará fazer. Aliás, se puder migrar sua app utilizando o tutorial atualizado eu agradeço. :)