Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 228554 articles
Browse latest View live

[Noob Question] ion-buttons and ion-tabs issue

$
0
0

Hello, I’m new to ionic and slowly learning. Below is some code I have and the ion-button does not work. But if I take out ion-tabs, it works fine.

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item >
          <ion-label position="floating">E-mail</ion-label>
          <ion-input></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
        <ion-button color="primary" expand="block" fill="clear" [routerLink]="['/', 'registration']">Register</ion-button>
        <ion-button color="primary" expand="block" >Login</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button [routerLink]="['/', 'games']">
        <ion-icon name="american-football"></ion-icon>
        <ion-label>Games</ion-label>
        <ion-badge></ion-badge>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'teams']">
        <ion-icon name="school"></ion-icon>
        <ion-label>Teams</ion-label>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'ranks']">
        <ion-icon name="ribbon"></ion-icon>
        <ion-label>Ranks</ion-label>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'login']">
        <ion-icon name="log-in"></ion-icon>
        <ion-label>Login</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>


Ionic 4 child route component pushed off screen by .ion-page class of parent

$
0
0

I used ion-router-outlet instead of router-outlet and it works fine :man_shrugging:

Unoptimized APK

$
0
0

Hi, I am also facing this warning. How can i solve it? please help

Have DateTime be opened by button?

Looking to get an MVP built

$
0
0

Thank you for all your replies. The client decided to go with React Native and had a team for that. I will keep you all in mind for the future.

Ionic as a web app alone

$
0
0

General question: I have a client that wants to make a web app and maybe later iOS and Android apps. I am recommending Ionic, but a developer working with them is saying that if they use Ionic there will be bloat related to iOS and Android apps, that would not be there if they make a React web app. I believe this not to be true, but I need to give some proof to back it up. Can anyone give me some direction on this?

Also, just for my confirmation, do you think that as just a web app alone, Ionic is just as good as any other alternative out there like React or Vue.

One other thing, I’ve looked into alternatives, but if you had to make web apps that might someday become iOS and Android apps if the web app was popular, besides Ionic, what would you use? Is there anything? I believe Ionic to be the best for this use case, but I need to convince others, so knowledge on why potential competitors would not be good would be helpful.

Any help would be appreciated thanks.

Cheers,

Brett

Current viability of a Ionic React web app

$
0
0

Hi, working with a React developer and trying to convince him to use Ionic as our web app may be made into iOS and Android app later.

I, personally, would like to work with React in Ionic and I think that I could convince him to use Ionic if we could use React. What do you think of the current state of Ionic’s React project? Do you think it is good enough to do a production level web-only app?

Cheers,

Brett

Ionic backend options/comparisons

$
0
0

Making a web-only app where users will share files to a limited number of people. What options are out there for backends? What is the best option? Any other guidance you can provide would be appreciated.

Cheers,

Brett


Ionic 4 - How to change Toast button's style?

$
0
0

Hi friend , Did you find a solution?

Regards!

Android build failed error : :app:mergeDebugResources

$
0
0

someone has been able to solve the problem, I am having the same problem with facebook plugin

Please open below link and help me

$
0
0

when i print response in console using console.log(“json data”,res) it gives

json data
Response {_body: “↵↵ ↵ <meta charset=…ype=“text/javascript”>↵ ↵”, status: 200, ok: true, statusText: “OK”, headers: Headers, …}
headers: Headers
_headers: Map(4) {“pragma” => Array(1), “content-type” => Array(1), “cache-control” => Array(1), “expires” => Array(1)}
_normalizedNames: Map(4) {“pragma” => “pragma”, “content-type” => “content-type”, “cache-control” => “cache-control”, “expires” => “expires”}
proto: Object
ok: true
status: 200
statusText: “OK”
type: 2
url: “http://146.66.92.93/~advent37/QualityControl/loginMobile
_body: “↵↵ ↵ ↵ Quality Control | Admin System Log in↵ ↵ ↵ ↵ ↵↵ ↵ ↵ ↵ ↵ ↵

Sign In

The Email field is required. ×
The Password field is required. ×
↵ ↵ ↵
↵ ↵
↵ ↵
↵ ↵
↵ ↵
↵ ↵↵ Forgot Password
↵ ↵
↵↵ ↵ ↵ ↵”
proto: Body

Please open below link and help me

$
0
0

From your response It looks like its not proper JSON response format.

To print response in JSON write like this
console.log(“json data”, JSON.stringify(res))

It will print JSON format of your response.

Please paste your code on https://codebeautify.org/ and check whether JSON is valid or not
and paste that json here.

You are testing app on iOS device/Simultor or Android device/Emulator ?
Note:While pasting code on forum try not to reveal urls

Change ion-title in ts file

$
0
0

@vnyksj I couldnt bind the title … It is not at all changing dynamically can you please help me

[Noob Question] ion-buttons and ion-tabs issue

$
0
0

I think

<ion-tab-button [routerLink]="[’/’, ‘login’]">

will not work.
You have to mention router details in app-routing.modules.ts and declare tabs then it will work.
.html

<ion-content  padding>
    <ion-tabs>
        <ion-tab-bar slot="bottom">

            <ion-tab-button tab="tab1">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="tab2">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="tab3">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>
      
    
        </ion-tab-bar>
    </ion-tabs>

app-routing.modules.ts

{ path: ‘pathname’, component: ComponentName, children:
  
    [
      {
        path: 'tab1',
        component: Component1,
      },
      {
        path: 'tab2',
        component: Component2,
      },
      {
        path: 'tab3',
        component: Component3,
       
      },
       {
        path: '',
        redirectTo: 'tabs/tab1',
        pathMatch: 'full'
      }
    ]
}

Let me know if it works

I cannot install cordova-res


Please open below link and help me

$
0
0

when i use console.log(“json data”, JSON.stringify(res)) this it prints html code in json format
and i’m testing app on android device and google chrome

json comes like this:

{"_body":"\n\n \n <meta charset=“UTF-8”>\n Quality Control | Admin System Log in\n \n <link href=“http://146.66.92.93/~advent37/QualityControl/assets/bootstrap/css/bootstrap.min.css” rel=“stylesheet” type=“text/css” />\n <link href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=“stylesheet” type=“text/css” />\n <link href=“http://146.66.92.93/~advent37/QualityControl/assets/dist/css/AdminLTE.min.css” rel=“stylesheet” type=“text/css” />\n\n \n \n \n \n <body class=“login-page”>\n <div class=“login-box”>\n <div class=“login-logo”>\n <a href="#">\n\t\t<img src=“http://146.66.92.93/~advent37/QualityControl/assets/images/logo_new.png” class=“user-image” alt=“User Image”/>\n\t\t
Admin System\n \n <div class=“login-box-body”>\n <p class=“login-box-msg”>Sign In

\n <div class=“row”>\n <div class=“col-md-12”>\n <div class=“alert alert-danger alert-dismissable”>The Email field is required. <button type=“button” class=“close” data-dismiss=“alert” aria-hidden=“true”>×\n<div class=“alert alert-danger alert-dismissable”>The Password field is required. <button type=“button” class=“close” data-dismiss=“alert” aria-hidden=“true”>×\n \n \n \n \n <div class=“form-group has-feedback”>\n <input type=“email” class=“form-control” placeholder=“Email” name=“email” required />\n <span class=“glyphicon glyphicon-envelope form-control-feedback”>\n \n <div class=“form-group has-feedback”>\n <input type=“password” class=“form-control” placeholder=“Password” name=“password” required />\n <span class=“glyphicon glyphicon-lock form-control-feedback”>\n \n <div class=“row”>\n <div class=“col-xs-8”> \n \n \n <div class=“col-xs-4”>\n <input type=“submit” class=“btn btn-primary btn-block btn-flat” value=“Sign In” />\n \n \n \n\n
\n \n \n \n\n \n",“status”:200,“ok”:true,“statusText”:“OK”,“headers”:{“pragma”:[“no-cache”],“content-type”:[“application/json; charset=UTF-8”],“cache-control”:[“no-store”," no-cache"," must-revalidate"],“expires”:[“Thu”," 19 Nov 1981 08:52:00 GMT"]},“type”:2}

Building Android Package in Ionic AppFlow

$
0
0

Hi, I’ve got a working app - runs fine locally via ionic serve and also tested with android virtual device. I’m trying to build it in AppFlow. However, error occurs as follows…

ERROR in Could not resolve module ./profile/profile.module relative to app/app-routing.module.ts

My app-routing,module.ts as follows…

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {AuthGuard} from "./core/auth.guard";

const routes: Routes = [
  // { path: '', redirectTo: 'tabs', pathMatch: 'full' },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule',
    canActivate: [AuthGuard]
  },
  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
  { path: 'work', loadChildren: './work/work.module#WorkPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'signup', loadChildren: './login/signup/signup.module#SignupPageModule' },
  { path: 'forgot-password', loadChildren: './login/forgot-password/forgot-password.module#ForgotPasswordPageModule' },
  { path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
  { path: 'work/other-work', loadChildren: './work/other-work/other-work.module#OtherWorkPageModule' },
  { path: 'notification/:id', loadChildren: './notification/notification-details/notification-details.module#NotificationDetailsPageModule' },
  //{ path: 'profile/leave-manager', loadChildren: './profile/leave-manager/leave-manager.module#LeaveManagerPageModule' },

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

It’s probably a simple thing but if anyone can direct me, it’ll be much appreciated.

Chrome extension built with Ionic: Notyfy

$
0
0

Oh and what it does is checking for notifications every 1 minute. Since you don’t load the whole site (all facebook assets come around ~25 Mb) you can save lots of bandwith, too.

I created an overview table for myself to keep track of things:

Provider Count List Link out Mark as seen Count weight (kb)
Facebook :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: 34.8 kb
Gmail :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: 0.7 kb
Reddit :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: 34.2 kb
Medium :white_check_mark: :white_check_mark: :white_check_mark: :no_entry_sign:¹ 9.5 kb
StackOverflow :white_check_mark: :white_check_mark: :white_check_mark: :no_entry_sign: 17.2 kb
Quora :white_check_mark: :white_check_mark: :white_check_mark: :no_entry_sign: 31.5 kb
LinkedIn :white_check_mark: :white_check_mark: :white_check_mark: :no_entry_sign: 37.2 kb
Twitter :no_entry_sign:¹ :no_entry_sign:¹ :no_entry_sign:¹ :no_entry_sign:¹ ? kb
GitHub :no_entry_sign: :no_entry_sign: :no_entry_sign: :no_entry_sign: ? kb
  • Count: fetching the count of new notifications (periodically once per minute)
  • List: fetching all notification informations when opening the popup
  • Link out: clicking on an item in the list results in linking to that notification
  • Mark as seen: ability to mark notifications as seen
  • Count weight: how much kb it takes for a fetch count (periodically once per minute)

¹) Origin check (“pbooicmlenggnnbmeklbchdancakcidb is not an allowed domain. Our host is (medium.com, /me/activity/last-viewed)”)

Reverting live updated app back to store version

$
0
0

We’ve updated our Live Deploy integration from v4 to v5 API:

  • before: cordova-plugin-ionic@4.1.7, @ionic/pro@1.0.20, cordova-plugin-ionic-webview@1.1.16
  • after: cordova-plugin-ionic@5.3.0, @ionic/pro@2.0.4, cordova-plugin-ionic-webview@2.4.1

Our own update dialog is implemented with UPDATE_METHOD=none. WIth v4, we had a button to reset deployed version to originally shipped (deletes every update) for debugging purpose, but struggling to implement it with v5. Anyone know how we can achieve such functionality with v5 API? Any help would be greatly appreciated.

With v4, our reset feature does following:

  1. for each version in getVersions(), run deleteVersion(version)
  2. window.location.reload()

Please open below link and help me

$
0
0

Yes thats what I want.
Its problem from your sever side response

1.Why html is coming in response? Is that architecture of your app/project that HTML will come in response and then you will render it on screen?

2.If answer of above question is NO . Then tell your backend team to give proper JSON format response

Its like response in JSON but internally HTML putted in in objects.

So final solution can be response should be proper JSON.

See at the time postman can be showing response correctly but in coding its not that much easy to parse this type of response.

Viewing all 228554 articles
Browse latest View live


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