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

CadastroPage link inexistente.

Tento fazer o lazyLoad mas não estou conseguindo, erro:


core.es5.js:1020 ERROR Error: Uncaught (in promise): invalid link: CadastroPage
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:322)
    at NavControllerBase._failed (nav-controller-base.js:310)
    at nav-controller-base.js:365
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

Meu html escolha:

<ion-header>

  <ion-navbar>
    <ion-title>Escolha</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-slides pager="true">
    <ion-slide *ngFor="let foto of carro.fotos">
      <img src="{{foto}}"/>

    </ion-slide>
  </ion-slides>

  <ion-item-group>
    <ion-item-divider color="light">
      <ion-icon name="car"></ion-icon>
      VEÍCULO
    </ion-item-divider>
    <ion-item>{{ carro.nome }}</ion-item>
    <ion-item>R$ {{ carro.preco }}</ion-item>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider color="light">
      <ion-icon name="options"></ion-icon>
      ACESSÓRIOS
    </ion-item-divider>
    <ion-item *ngFor="let acessorio of acessorios">
      <ion-label>
        <h2>{{acessorio.nome}}</h2>
        <h4>R$ {{acessorio.preco}}</h4>
      </ion-label>
      <ion-toggle #toggle color="secondary" (ionChange)="atualizaTotal(toggle.checked, acessorio)"></ion-toggle>
    </ion-item>
  </ion-item-group>

  <ion-item-divider color="light">
    <span item-right>TOTAL: R$ {{ precoTotal }}</span>
  </ion-item-divider>

  <ion-fab top right edge>
    <button ion-fab (click)="avancarCadastro()">
      <ion-icon name="arrow-dropright"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

Meu html cadastro:

<ion-header>

  <ion-navbar>
    <ion-title>cadastro</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <h2>{{ carro.nome }}</h2>
  <p>R$ {{ precoTotal }}</p>

  <form>
    <ion-item>
      <ion-lable>Nome:</ion-lable>
      <ion-input name="nome"></ion-input>
    </ion-item>
  </form>
</ion-content>

Meu cadastro-module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CadastroPage } from './cadastro';

@NgModule({
  declarations: [
    CadastroPage,
  ],
  imports: [
    IonicPageModule.forChild(CadastroPage),
  ],
  exports: [
    CadastroPage
  ]
})
export class CadastroPageModule {}

Meu escolha.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
import { Acessorio } from '../../modelos/acessorio';
import { CadastroPage } from '../cadastro/cadastro';

@IonicPage()
@Component({
  selector: 'page-escolha',
  templateUrl: 'escolha.html',
})
export class EscolhaPage {

    public carro: Carro;
    public acessorios: Acessorio[];
    private _precoTotal: number;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.carro = this.navParams.get('carroSelecionado');
        this._precoTotal = this.carro.preco;
        this.acessorios = [
            {nome: 'Freio ABS', preco: 800},
            {nome: 'Ar-condicionado', preco: 1000},
            {nome: 'MP3 Player', preco: 500}
        ];
    }

    get precoTotal(){
        return this._precoTotal;
    }

    atualizaTotal(ativado: boolean, acessorio: Acessorio){
        ativado ? this._precoTotal += acessorio.preco : this._precoTotal -= acessorio.preco;
    }

    avancarCadastro(){
        console.log(this.carro);
        console.log(this._precoTotal);
        console.log(CadastroPage.name)
        this.navCtrl.push(CadastroPage.name, {
            carroSelecionado: this.carro,
            precoTotal: this._precoTotal
        });
    }
}

Meu cadastro.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';

@IonicPage()
@Component({
  selector: 'page-cadastro',
  templateUrl: 'cadastro.html',
})
export class CadastroPage {
    public carro: Carro;
    public precoTotal: number;

    constructor(public navCtrl: NavController, 
        public navParams: NavParams) {
        this.carro = this.navParams.get('carroSelecionado');
        this.precoTotal = this.navParams.get('precoTotal');
    }

}
6 respostas

Boa noite, Cláudio! Como vai?

Como está o seu app.module.ts? Cole o conteúdo dele aqui para que eu possa dar uma olhada!

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 {}

Cláudio, olhando seus código eu não consegui encontrar nenhum erro aparente.

Vc poderia disponibilizar o seu código na íntegra, seja colocando ele no github ou zipando e compartilhando no google drive ou dropbox? Daí eu poderei dar uma olhada melhor no que está acontecendo.

Obs.: A pasta node_modules não é pra ser enviada.

Subi o projeto sem a pasta node_modules (do projeto e do web-service) no drive. Segue o link: https://drive.google.com/open?id=13w0RQa4nQSwipnyJeRrdOa5miB-JF_bB

solução!

Professor achei o erro: No arquivo "escolha.ts" repare que após a instrução console.log(CadastroPage.name), eu esqueci um ponto e virgula. Isso que ocasionava o erro.

Para além disso tem um erro de template também no arquivo "cadastro.html", onde eu escrevi <ion-lable> ao invés de <ion-label>".

Agora já está resolvido.

Mto bem, Cláudio! É isso aí! Que bom que conseguiu resolver o problema!

Qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!