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.

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. :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software