Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49250 articles
Browse latest View live

Please Help: TypeError can't assign to property

$
0
0

@AIBug wrote:

Sorry to bother you, but I really need help :frowning: i can’t figure out how to make this submit correctly :frowning:

Whenever I hit the submit button, it says:
ERROR TypeError: “can’t assign to property “username” on “Bob Jones”: not an object”
onSignup signup.ts:37
View_SignupPage_0 SignupPage.html:72

I don’t understand why it won’t let me set Bob Jones to “fullName” or how to do it :frowning:

here is my signup.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Sign-Up</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="signup-logo">
    <img src="assets/img/officialLogo.jpg" alt="Ionic Logo">
  </div>

  <form #signupForm="ngForm" novalidate>
    <ion-list lines>
      <ion-item class = "backColor">
        <ion-label position="stacked" color="primary">Full Name</ion-label>
        <ion-input [(ngModel)]="signUpAll.fullName" name="fullName" type="text" #fullName="ngModel">
        </ion-input>
      </ion-item >
     
      <ion-item class = "backColor">
        <ion-label position="stacked" color="primary">E-mail</ion-label>
        <ion-input [(ngModel)]="signUpAll.email" name="email" type="text" #email="ngModel">
        </ion-input>
      </ion-item>
     
      <ion-item class = "backColor">
        <ion-label position="stacked" color="primary">Phone Number</ion-label>
        <ion-input [(ngModel)]="signUpAll.phoneNumber" name="phoneNumber" type="text" #phoneNumber="ngModel">
        </ion-input>
      </ion-item>
    </ion-list>
    
    
      <p class="ion-padding-start ion-padding-end alignText" color="primary">
        Receive Text Message and E-mail Updates About Freedom Church?
      </p>
 <div class="alignText">
      <ion-checkbox name="text" checked="true" color="dark"></ion-checkbox>
    
      <ion-label class="ion-padding-start ion-padding-end">Text Messages </ion-label>
   
      <ion-checkbox name="text" checked="true" color="dark"></ion-checkbox>
  
      <ion-label class="ion-padding-start ion-padding-end">E-Mails </ion-label>
    </div>
      
    <div class="ion-padding">
      <ion-button (click)="onSignup(signupForm)" type="submit" expand="block">Create</ion-button>
    </div>
  </form>

</ion-content>

here is my signup.ts:

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';

import { UserData } from '../../providers/user-data';
import Parse from 'parse'


@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
  styleUrls: ['./signup.scss'],
})
export class SignupPage {
  signUpAll = {fullName:'', phoneNumber:'', email:''}
  password: string;
  username: string;
  isSigningup: boolean;
  submitted = false;
  
  
  

  constructor(
    public router: Router,
    public userData: UserData
  ) {}

  onSignup(form: NgForm) {
    this.password = "hiMe1235"
    this.username = "hello12345"
    this.submitted = true;
   
    Parse.User.signUp(this.password, this.username, this.signUpAll.fullName, this.signUpAll.phoneNumber, this.signUpAll.email).then((resp) => {
      console.log('Logged in successfully', resp);
    }, err => {
      console.log('Error signing in', err);
    });

    if (form.valid) {
    
     
    }
  }
}

please help if you can, sorry to bother.

Posts: 1

Participants: 1

Read full topic


Ionic v4 Page Not Available Error when hosting it as a website

$
0
0

@bochey1314 wrote:

so I build web app with ionic v4 angular (tabs style) recently. the problem is that i m constantly getting the “webpage not available” error randomly when I try to access my site on the server end. It happen very frequently on the mobile phone browser. I would say it happen 1 out of 10 hit/refresh. does any body have any idea what went wrong? btw, it seems to happen more on Android browser.

I tried to start a brand new project with “ionic start myApp tabs” and I got the same error. the only thing i changed were to use HashLocationStrategy and change the < base href="/" > to < base href="./" > in index.html to fix the refreshing page not found issue. I have been researching on this issue for days and found no answer. If any one know what the problem is, please let me know. thanks in advance.

Posts: 1

Participants: 1

Read full topic

Master Detail Layout

$
0
0

@varunparmar wrote:

May I know if ionic will ever have a Master Detail Layout, similar to the one achieved using UISplitViewController on iOS. The current split pane layout on Ionic is similar but not exactly Master Detail Layout because it opens a hamburger menu on small screens.

Posts: 1

Participants: 1

Read full topic

Build qr code scanner in ionic4

$
0
0

@itosoft wrote:

hi i want to build qr code scanner app i tried lots of code but doesn’t work
anyone can send me codes or project and help me to compile

Posts: 2

Participants: 1

Read full topic

Problemas con cordova y ionic

$
0
0

@AndresGG wrote:

Hola, estoy usando ionic y luego de hacer una actualización he estado teniendo problemas, no puedo ejecutar comandos como, ionic start my-app, ionic cordova platform add android, ionic cordova plugin add <plugin>, entre muchos mas.

Este es el error que sale cuando intento ejecutar alguno de estos comandos

ionic integrations enable cordova
[INFO] Downloading integration cordova
events.js:288
throw er; // Unhandled ‘error’ event
^
Error: TAR_BAD_ARCHIVE: Unrecognized archive format
at Unpack.warn (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\warn-mixin.js:19:40)
at Unpack.warn (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\unpack.js:188:18)
at Unpack. (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:82:14)
at Unpack.emit (events.js:323:22)
at Unpack.[emit] (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:286:12)
at Unpack.[maybeEnd] (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:402:17)
at Unpack.[consumeChunk] (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:434:21)
at Unpack.write (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:365:25)
at Unpack.end (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:479:14)
at IncomingMessage.onend (_stream_readable.js:679:10)
Emitted ‘error’ event on Unpack instance at:
at errorOrDestroy (internal/streams/destroy.js:108:12)
at Unpack.onerror (_stream_readable.js:746:7)
at Unpack.emit (events.js:311:20)
at Unpack.warn (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\warn-mixin.js:19:12)
at Unpack.warn (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\unpack.js:188:18)
[… lines matching original stack trace …]
at Unpack.[consumeChunk] (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli\node_modules\tar\lib\parse.js:434:21) {
recoverable: false,
cwd: ‘C:\Users\felipe\AppData\Local\Temp\ionic-integration-cordova’,
code: ‘TAR_BAD_ARCHIVE’,
tarCode: ‘TAR_BAD_ARCHIVE’
}

Estoy limitado a la hora de necesitar este tipo de comandos, sin embargo si puedo usar comandos como ionic serve, ionic g page <name>. Estuve buscando y al parecer alguien tiene el mismo problema pero sin resultados. https://forum.ionicframework.com/t/cannot-complete-ionic-start-command/183584

Mi ionic info:

Ionic:
Ionic CLI : 6.5.0 (C:\Users\felipe\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Utility:
cordova-res : 0.11.0
native-run : 1.0.0
System:
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10

De antemano muchas gracias si pueden ayudarme, he perdido mucho tiempo por este problema.

Posts: 1

Participants: 1

Read full topic

Route doesnt work redirecting page to tab

How to display side menu in left side and right side in ionic 4

Problem with deeplinks initilization

$
0
0

@franco.echevarria.ex wrote:

Hi guys, I need help with the following:
I’m receiving this error: “ReferenceError: Cannot access ‘DeeplinkingProvider’ before initialization”

I have already deeplinks implemented and working, but I’m adding a new route and the destination component is importing algo the DeeplinkingProvider and that is causing the error.
The question is why ? because the other route are using components wich are importing also the DeeplinkingProvider. So i’m doing the same but for this component is not working. Any idea ?

this.deeplinks.route({
        '/invite/:code': EnterInviteCodePage,
        '/invite': EnterInviteCodePage,
        '/sms-verification': EnterSmsCodePage, // <---- with this new component is failing (and is equal to the other component)
        '/home': HomePage
      }).subscribe((match: DeeplinkMatch) => {
        setTimeout(() => {
          if (match.$link) {
            switch (match.$link.host) {
              case '/invite':
                this._code = match.$link.queryString;
                // broadcast code to invite code page
                this._codeObservable.next(this._code);
                break;
              case '/home':
                // broadcast home observable to open home tab when clicking on link
                this._homeObservable.next();
                break;
            }
          }

        }, 100);
      }, (nomatch) => {
        console.error('nomatch:', nomatch);
      });

This is called and intilized after the platform.ready() from another … and working for the current, the problem is with new component. The new component I have tested with an empty component only importing the DeeplinkingProvider or with a copy of the current (and working), both are failing. Thanks in advance.

Posts: 1

Participants: 1

Read full topic


Validation Error Messages not displaying for ion-textarea

$
0
0

@Sweg wrote:

In my Ionic 5 / Angular app, I am trying to display a validation message if a required field within my form is clicked into, & left without having a valid value.

Here is the HTML:

<form formGroup="form">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item lines="none">
            <ion-label position="floating">
              Please describe your issue
            </ion-label>
            <ion-textarea formControlName="message"></ion-textarea>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="form.get('message').invalid && form.get('message').touched">
        <ion-col>
          <p>Invalid Message</p>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button (click)="onSendMessage()">
            <ion-icon slot="end" name="send-outline"></ion-icon>
            Send
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

And here is the Typescript:

ngOnInit() {
    this.form = new FormGroup({
      message: new FormControl(null, {
        updateOn: 'blur',
        validators: [
          Validators.required,
        ]
      })
    });
  }

  onSendMessage() {
    console.log('', this.form);
  }

But if I click into the ion-textarea & leave without entering a value, the error message isn’t displaying.

Can someone please tell me why this is happening, & how it can be resolved?

Posts: 2

Participants: 1

Read full topic

How To Call Methods

$
0
0

@DevRenshaw wrote:

Hello,

I’m pretty new to React and only just starting out. I’ve tried to find the answer but not sure if I’m searching for the wrong phrase or keyword(s).

Using https://ionicframework.com/docs/api/slides as an example. I want to apply the lockSwipes method and only allow the user to continue by pressing on a button with an onClick.

However, I just cannot figure out how to call them.

I’m not expecting code to be written for me. Happy for you to point me in the right direction and ill go readup but spent the past two evenings attempting and so far failing and loosing hope.

Regards
Tom

Posts: 1

Participants: 1

Read full topic

Slow boot on android with --prod "enabled"

$
0
0

@bjernie wrote:

I made a relatively small app I built it with this command to make it an .aab at the same time ionic cordova build android --prod --release -- -- --packageType=bundle. It is 3.7 MB on Android, which also means that it shouldn’t take that long to load, and yet from cold start it takes 30 seconds to load the app. This is not a problem on iOS, only Android. Is there anything I can do to speed it up?

Posts: 1

Participants: 1

Read full topic

Ionic angular server side rendering showing to many errors

$
0
0

@YAsh0011 wrote:

My whole IONIC project uploaded on Github https://github.com/yashdabi/ionic-angular-ssr

following some tutorials like this below https://ionicframework.com/blog/ssr-with-angular-universal-and-ionic/ but to many errors are showing after “npm run serve:ssr” and I am not able to resolve these errors

  1. window is not defined
  2. self is not defined
  3. Error:NotYetImplemented
  4. Cannot redefine property: constructor
  5. win.matchmedia is not a function

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.1.3
Node: 10.16.3
OS: win32 x64
Angular: 8.1.3
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.3
@angular-devkit/build-angular              0.801.3
@angular-devkit/build-optimizer            0.801.3
@angular-devkit/build-webpack              0.801.3
@angular-devkit/core                       8.1.3
@angular-devkit/schematics                 8.1.3
@angular/animations                        8.1.2
@ngtools/webpack                           8.1.3
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.1.3
@schematics/update                         0.801.3
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.35.2

ionic info

Ionic:

   Ionic CLI                     : 5.2.7 (C:\Users\yash\AppData\Roaming\nvm\v10.16.3\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.8.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : 0.6.0
   native-run  : 0.3.0

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

I am stuck in these issues from few days
Please help me to resolve these issues

Posts: 1

Participants: 1

Read full topic

Unable to whitelist square-commerce-v1:

$
0
0

@FiveJStudios wrote:

Hi,

we have an app that has been working on iOS until this week. Now we receive a message " **ERROR Internal navigation rejected - not set for url='square-commerce-v1:// … "

when calling the url scheme for Square Payments: square-commerce-v1:

I have tried to whitelist as follows:

<access origin="square-commerce-v1:*" />
<allow-navigation href="square-commerce-v1://*" />
 <allow-navigation href="square-commerce-v1://*/*" />
<allow-intent href="square-commerce-v1:*" />

Any thoughts?

Posts: 1

Participants: 1

Read full topic

Problems with ionic native and plugins when converted to iOS and Android

$
0
0

@Syaifulginanjar wrote:

I currently facing problems with ionic native and plugins when converted to iOS and Android binary applications. Here are the details:

  1. Occasionally the app menus, buttons and links cannot be clicked, and not showing any error notif. Even when I tried to “console.log()” to inspect this, these menus, buttons and links appear to be randomly working and not working (this happen everytime without I made any changes)

  2. Without updating / patching, the above point (no. 1) occurs in our other application. it happens suddenly without error / hang / crash notif.

  3. This instability also applies to native cameras, native google logins, native files. Native Google sometimes can not be used / error, Native camera & native file sometimes makes the application quit after saving photos.

Thank you

Posts: 1

Participants: 1

Read full topic

Can't generate resources


Axios Error Api local

$
0
0

@Cephaz wrote:

Hello,

In my file a have this code
const data = () => { axios.get('https://localhost:3000/api/events',{ headers: { 'Access-Control-Allow-Origin': '*', } }) .then(res => { console.log(res.data); }) .catch(function (error) { console.log(error); }) }
The code not working for my local api and I don’t know how to fix it.

This is the console display
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/api/events. (Reason: CORS request did not succeed)

Please i need help

Posts: 1

Participants: 1

Read full topic

How to Ionic web build with cordova

$
0
0

@sanskrut wrote:

Hello all,

I’m building a cross platform application, in which I want to use Native Camera functionality, ionic doc suggest that native camera is available for android, ios and browser.
I understand we can build app using
ng run app:ionic-cordova-build --platform=android | ios
but I’m not sure about browser build
as ionic build --prod will not include cordova functionality,
so can i build using this command for web
ng run app:ionic-cordova-build --platform=browser --prod

is this recommended or right way to build with cordova for production web release ?

Posts: 1

Participants: 1

Read full topic

White screen on device livereload

$
0
0

@mareksip wrote:

Hello,

For several days I am trying to make work device live reloading.

I have forked Ionic conference app and in order to use Auth0 SDK changed architect:build to use @angular-builders/custom-webpack:browser instead of @angular-devkit/build-angular:browser.

This is current angular.json and custom webpack.config.js

I enabled port 8100 in firewall (also turned off firewall completely) so when I open Chrome on the Android device and navigate to 192.168.51.28:8100 I can see the app.

Commands:

  1. ionic serve
  • Serves to localhost:8100 and I can see the app in Chrome.
  1. ionic cordova run android --livereload-url=http://192.168.51.28:8100 --livereload

Coud you please help me out of the white screen? :grinning:

Posts: 1

Participants: 1

Read full topic

Directive proxies error

$
0
0

@webmaster-leafar wrote:

I am working on a new project, and when I build a form I got this error Module not found: Error: Can't resolve '@ionic/angular/directives/proxies' I try to find on stackoverflow and google but no results.

Posts: 1

Participants: 1

Read full topic

IFrame event page change

Viewing all 49250 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>