@fabioselau wrote:
Hello, I started with Ionic now.
Can I use Ionic Creator to do the design creation and then do the programming of the app on the computer?
To do this, just download the .zip project and send the files to the “src” folder of my created project?
I did this but the design does not match Creator.
In Creator, for example the buttons and icons are blue and the computer turns completely black.
How to solve this?
Thank you
Posts: 1
Participants: 1
@code-blue wrote:
How can we use Bootstrap for Styling Stencil Component. I have installed Bootstrap using “npm i” but not able to import it directly in Component file.
Posts: 1
Participants: 1
@sqr08 wrote:
all my other svgs are appearing, and i’m sure i got the path right because command clicking it takes me to the right svg.
here’s the code for the tabs:
<ion-tabs> <ion-tab-bar slot="bottom"> <ion-tab-button class="tab" tab="tab1"> <ion-icon src="../../assets/bottom_nav_icons/menu_icon.svg"></ion-icon> <ion-label>{{ 'MENU' | translate }}</ion-label> </ion-tab-button> <ion-tab-button class="tab" tab="tab2"> <ion-icon src="../../assets/bottom_nav_icons/policies_icon.svg"></ion-icon> <ion-label>{{ 'POLICIES' | translate }}</ion-label> </ion-tab-button> <ion-tab-button class="tab" tab="tab3"> <ion-icon src="../../assets/bottom_nav_icons/investments_icon.svg"></ion-icon> <ion-label>{{ 'INVESTMENTS' | translate }}</ion-label> </ion-tab-button> <ion-tab-button class="tab" tab="tab4"> <ion-icon src="../../assets/bottom_nav_icons/liabilityslip_icon.svg"></ion-icon> <ion-label>{{ 'LIABILITY_SLIP' | translate }}</ion-label> </ion-tab-button> </ion-tab-bar> </ion-tabs>here’s the menu_icon.svg:
<?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch --> <title>menu_icon</title> <desc>Created with Sketch.</desc> <defs> <path d="M4,8 L8,8 L8,4 L4,4 L4,8 L4,8 Z M10,20 L14,20 L14,16 L10,16 L10,20 L10,20 Z M4,20 L8,20 L8,16 L4,16 L4,20 L4,20 Z M4,14 L8,14 L8,10 L4,10 L4,14 L4,14 Z M10,14 L14,14 L14,10 L10,10 L10,14 L10,14 Z M16,4 L16,8 L20,8 L20,4 L16,4 L16,4 Z M10,8 L14,8 L14,4 L10,4 L10,8 L10,8 Z M16,14 L20,14 L20,10 L16,10 L16,14 L16,14 Z M16,20 L20,20 L20,16 L16,16 L16,20 L16,20 Z" id="path-1"></path> <rect id="path-3" x="0" y="0" width="50" height="50"></rect> </defs> <g id="menu_icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <g id="Mask"></g> <g id="Colors/Grey" mask="url(#mask-2)"> <g transform="translate(-13.000000, -13.000000)"> <mask id="mask-4" fill="white"> <use xlink:href="#path-3"></use> </mask> <use id="Grey" stroke="none" fill="#58595B" fill-rule="evenodd" xlink:href="#path-3"></use> </g> </g> </g> </svg>thanks
Posts: 1
Participants: 1
@mosesmatt wrote:
I am working on a project for web only at this time and having an issue with login / password reset if the email field autofilled by chrome.
Using with firebase I couldn’t understand why it sometimes was rejecting my email addresses as malformed.
Current work around giving the input an id and getting the value directly
let emailEl = document.getElementById(‘ngEma’);
console.log(emailEl.value)
this.ema = emailEl.value;
Posts: 1
Participants: 1
@helpmelearn wrote:
Not really sure what is causing this. I try to build a dev android version
ionic cordova build android
I’m getting this error.
FAILURE:
Build failed with an exception.
- What went wrong:
A problem occurred configuring root project ‘android’.
Could not find common.jar (android.arch.lifecycle:common:1.1.0).
Searched in the following locations:
https://jcenter.bintray.com/android/arch/lifecycle/common/1.1.0/common-1.1.0.jarThe only thing I have tried it remove android and add android back (Android 6.3.0).
I try to go to that website and the path doesn’t work.
Posts: 1
Participants: 1
@mccumb01 wrote:
This is a weird one to reproduce, so I’m just asking for any insights to help troubleshoot …
My Ionic 3 app uses the (old) http module in a service to POST user login credentials to a server & get back the User’s profile info. It’s a poor-man “log in” to the app as the current user (no tokens or cookies involved - all I really need is to confirm their username exists on the server).
All works great on iOS, web browser, and it works perfectly AT FIRST on Android. BUT, once the user logs out all subsequent login attempts on Android fail. They still work fine on iOS & web. WHY?
The only fix is to completely uninstall & reinstall the app. Installing an updated version does not fix it. This would make some sense if the POST request was somehow relying on localStorage data tied to the user, but it’s not - it ONLY sends the username/pw from the login form, and creates the exact same request as the one that works the 1st time.
Subsequent POSTs result in a 200-OK response, but now with a null body instead of the expected user profile object it gets just fine the first time. There are also a few more ‘headers’, and content-type
text/htmlinstead ofapplication/jsonlike the first time.What could be allowing, then blocking subsequent HTTP requests only on Android?
Could it be setting/caching some token/cookie I’m not aware of or not intending to use?
If it’s a server-side issue, why would the server allow Android the first time plus as many as I want from iOS and browsers? Doesn’t make sense.Any ideas why this would work fine once & then fail afterward only on Android?
Thanks!
Posts: 1
Participants: 1
@fabioselau wrote:
The .zip project downloaded from Creator is coming without the css files.
In fact, the css files on the pages come, but they have no content.
This causes the application on the computer to be all unfit and different from the application shown in Creator.
How to solve?
Posts: 1
Participants: 1
@jfsoftwarellc wrote:
So how do I use a modal non-asynchronously. You know, like how a normal person would use it? I can’t even wrap my head around why you would want a data capture modal to behave asynchronously.
Posts: 1
Participants: 1
@mrg250 wrote:
Hello, Im making an app where there are pins placed across a map (by google).
the thing I want to achieve is, that whenever a field in my database (firebase) changed , the markers’ icon changes aswellthe current process is:
} ionViewDidLoad(){ this.loadMap() this.getNewReports() this.deleteMark() } updateReports(){ database().ref('reports/').on('child_changed', snap=>{ if(!snap.exists || !this.markers){ return } var report = snap.val() this.markers[report['number']+'_'+report['timestamp']]['icon'] = 'assets/imgs/pins/pin_'+report['type']+'_'+report['stage']+'.png'; }) } getNewReports(){ var reportCount = 0; var that = this database().ref('reports/').on('child_added', (snapshot)=> { var report = snapshot.val() let lat = report['lat'] let long = report['long'] var id = report['number']+'_'+report['timestamp'] var p = 'assets/imgs/pins/pin_'+report['type']+'_'+report['stage']+'.png'; var icon = new google.maps.MarkerImage(p, null, null, null, new google.maps.Size(29, 38)) var marker = new google.maps.Marker({ id: id, position: {lat: +lat, lng: +long}, icon:icon, map: this.map }) this.markers[id] = marker marker.setMap(this.map) google.maps.event.addListener(marker, "click", function () { const modal = that.modalCtrl.create('MarkerInfoPage', { type: report['type'], author: report['author'], desc: report['desc'], image: report['path'], number: report['number'], time: report['timestamp'], isHazard: report['isHazard'], }); modal.present(); }); }) }this basically creates an info page for each new marker. My goal is, whenever I change a field in my database (happens inside the modal), the icon of the marker will change as well.
for example, current icon is :
- pin_trash_0,
- pressing a button which will change a field in the database
- pin_trash_1
Right now, what I have, is that it’s not updating the icon rightaway (after exiting the modal), but when I enter ionViewDidLoad (which happens after I reenter the app)
How do I achieve this?
Posts: 1
Participants: 1
@applesquash wrote:
I’m using Ionic 4, Angular 7, and Stencil 0.17.
All the other posts I found were either out of date or referred me to the Stencil Angular integration guide.
I followed that guide and still get this error:Uncaught (in promise): Error: Template parse errors: 'analog-clock' is not a known element: 1. If 'analog-clock' is an Angular component, then verify that it is part of this module. 2. If 'analog-clock' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.I created a git repository from the dist folder of the Stencil component here:
And imported it into this starter app:
I added the
CUSTOM_ELEMENTS_SCHEMAto the app.module.
And I added thedefineCustomElements(window);bit to main.ts.Still no go.
What am I doing wrong?
Thanks much!
Posts: 1
Participants: 1
@Pasto92 wrote:
Hi guys! I would like to build a mobile app with external css framework (like bootstrap, uikit, semantic ui, etc…), so ios and android graphic will be the same…
I am confused:
- Should I use ionic and import my external css?
- Should I use Angular, import my external css and wrap everything into cordova?
what is the best choice?
Posts: 1
Participants: 1
@AmandaCAlves wrote:
In a code like this, for example, how can I check if the checkboxes were checked and show an alert with the values’ sum? There will be more checkbox than those two.
< ion-list>
< ion-item>
< ion-label>Pepperoni< /ion-label>
< ion-checkbox [(ngModel)]=“pepperoni” value=“3.5”
< ion-item>
< ion-label>Sausage< /ion-label>
< ion-checkbox [(ngModel)]=“sausage” value=“4.2”< /ion-checkbox>
< /ion-item>< ion-row center>
< ion-col text-center>
< ion-button click=“getValue()”>Value< ion-button>
< /ion-col>
< /ion-row>
< /ion-list>
Posts: 1
Participants: 1
@shepard wrote:
I am building an Ionic App in a Continuous Integration environment (CircleCI).
In my workflow steps I have:
npm run build --prodHowever, this is not enabling production mode.
Usingimport { environment } from '../../../environments/environment';
environment.production = false;Using
import { isDevMode } from '@angular/core';
isDevMode = true;This works fine:
ionic build --prod
Production Mode is enabled ( as perenvironment.production)If I attempt to use:
npm run ionic:build --prod
Then I get the error:
missing script: ionic:buildSo, is there a way to enable production mode without using ionic build --prod ?
Or will I need to install ionic/app-scripts in CircleCI build?
Posts: 1
Participants: 1
@ndblackandblue wrote:
Hi, everyone, I’m try to build my app to browser, but from some reason after build i get this error:
cordova.js:865 [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found
VM47 SplashScreenProxy.js:163 [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Foundand my app still freeze with a white screen!
Posts: 1
Participants: 1
@mixuala wrote:
I’m looking for something like this, but havent found one yet
Posts: 1
Participants: 1
@Ratikanta wrote:
I am facing difficulties in getting available methods in File api documentation.
In v3 it was easy https://ionicframework.com/docs/v3/native/file/. Here I get methods, properties with an example.
In v4 I don’t get anything like that https://ionicframework.com/docs/native/file.
Please let me know where can I find docs equivalent to v3.
Thanks.
Posts: 1
Participants: 1
@Akarsh12 wrote:
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { StreamingMedia, StreamingVideoOptions } from ‘@ionic-native/streaming-media’;
@IonicPage()
@Component({
selector: ‘page-tv’,
templateUrl: ‘tv.html’,
})
export class TvPage {
constructor() {
// let options: StreamingVideoOptions = {
// successCallback: () => { console.log(‘Video played’) },
// errorCallback: (e) => { console.log(‘Error streaming’) },
// orientation: ‘landscape’,
// shouldAutoClose: true,
// controls: false
// };
// this.streamingMedia.playVideo(‘rtmp://103.130.188.26:1935/ntv/live/live1’, options);
}
start(){
alert(“start video”);
(<any>window).videoStreamer.streamRTMP(‘rtmp://103.130.188.26:1935/ntv/live/live1’,alert(‘success’), alert(‘failed’)).onConnectionSuccess((data)=>alert(data)).onError((data)=>alert(data));
}
Posts: 1
Participants: 1
@IonicGeoff wrote:
I’m trying to create a typical web page menu, in the toolbar, using three buttons, and I want them to be hidden when the ion-menu-button becomes visible. i.e. when the screen size is too small to show them.
Is there an ion- construct that does this, or do I have to do it with css, or some other way?
Posts: 1
Participants: 1
@babita112 wrote:
Hi guys,
Hope you are doing well.
I have a query regarding salesforce integeration in ionic. How can we call salesforce apis in ionic mobile app?
Posts: 1
Participants: 1
@mrc_prasad wrote:
I am using ionic 3 to develop the application. I am able to generate the apk without any problem. But if I run ionic serve after transpile started nothing is happening. I am using macbook pro. Below is the system info:
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.9.2 ionic (Ionic CLI) : 3.9.2global packages:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)local packages:
@ionic/app-scripts : 3.1.0 Cordova Platforms : none Ionic Framework : ionic-angular 3.9.2System:
Node : v10.14.2 npm : 6.4.1 OS : macOS High Sierra Xcode : Xcode 9.3.1 Build version 9E501 Can anyone share a possible solution. I am having problem with this project only. If I create a sample project its working fine.
Posts: 1
Participants: 1
