@sergiotapia-papa wrote:

Hey guys, brand new Ionic 4 app vanilla - wanted to import a scss file into my App.tsx file and getting this error:

import "./assets/stylesheets/styles.scss";

Module not found: Can't resolve './assets/stylesheets/styles.scss'

Do I need to add a specific loader to the ionic project so it recognizes scss files?

Posts: 1

Participants: 1

Read full topic

@aironpower wrote:

Hi. I’ve created an android app for a non touchable screen. The only way to interact with my app must be using a mouse or a keyboard.
I have a clickable element like: <ion-button (click)="openOptions()">Options</ion-button>.
Everything works with my mobile, but ‘click’ event doesn’t happen when I do a mouse click.

Thanks everyone.

Posts: 1

Participants: 1

Read full topic

@jeudyx wrote:

I’m trying to compile my app the way I’ve always done it before:

ionic cordova build android --prod --release

And I’m getting a very weird error that seems related more to iOS (which is not my target here, this is a Linux Machine trying to compile Android):

> cordova build android
config file *-Info.plist requested for changes not found at /home/jeudy/Proyectos/crgate/placas/platforms/android/*-Info.plist, ignoring
config file *-Info.plist requested for changes not found at /home/jeudy/Proyectos/crgate/placas/platforms/android/*-Info.plist, ignoring
Cannot find module 'xcode'

This is my Ionic info:

Ionic:

   Ionic CLI          : 5.2.7 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.10

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 7 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.9.0)
   native-run  : 0.2.8 (update available: 0.3.0)

System:

   Android SDK Tools : 26.1.1 (/home/jeudy/Apps/android-sdk)
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 3.5.2
   OS                : Linux 4.15

I have been able to compile my app on this same machine many times, and this week I started to get this problem.

Any ideas?

Thanks

Posts: 3

Participants: 2

Read full topic

@BobFrankston wrote:

I’m trying to learn by doing and following the instructions for the PhotoGallery example but a soon as I try to **useFilesystem()** I get

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

I did check React versions to make sure that’s not the problem. I commented out the rest of the system code and isolated it to the useFileSystem call at this stage of the demo https://ionicframework.com/docs/react/your-first-app/3-saving-photos

Suggestions?

Posts: 1

Participants: 1

Read full topic

@troesmam wrote:

I really would like to use ionic capacitor with electron. Everything is working as it should and I’m ready to start development. But I really would like to use live reload with electron, is there any way currently supported by ionic and capacitor?

Posts: 1

Participants: 1

Read full topic

@Hyonta wrote:

I’m migrating source code from ionic3 to ionic4.
After source code migration, my scss is not working(only html is displayed without scss).
How do I change below code?

home.page.ts - @component

@Component({
	selector: 'page-home',
	templateUrl: 'home.page.html',
	styleUrls: ['home.page.scss'],
providers: [CustomNativeStorage]
})

home.page.scss

$iphone4: "(device-width: 320px) and (device-height: 480px)";
$iphone5: "(device-width: 320px) and (device-height: 568px)";
$iphone6_7: "(device-width: 375px) and (device-height: 667px)";

.ios, 
.md {
  page-home {
    .swiper-slide.swiper-slide-active{
      width: 100% !important;
     }

    ion-slide {
			background-size:cover;
			background-position: top center;
		}
			
    .home-content-card{
      background-color: rgba(255,255,255,0.85);
      position: absolute;
      width: 100%;
      bottom: 0px;
    }

    .text-container{        
			padding: 5%;
      .home-title{
        font-size: 1.6rem;
        font-weight: bold;
				margin-bottom: 10px;
			}
      .home-text{
        font-size: 1.5rem;
        margin-bottom: 30px;
      }
    }

    .button-container{
      width: 100%;
      text-align: center;
      margin-bottom: 15px;

      .button_continue{
        min-width: 50%;
        @extend .remove-text-transform,
        .remove-button-curves !optional;
      }
    }
  }
}
	
.swiper-pagination-fraction, .swiper-pagination-custom,
 .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 10%;
}
.swiper-pagination-bullet-active{
  background: #FF9800;
}
.slide-zoom{
  height: 100% !important;
}


@media #{$iphone4}{
	.swiper-pagination-fraction, .swiper-pagination-custom,
	 .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 14.5% !important;
}
}
@media #{$iphone5}{
	.swiper-pagination-fraction, .swiper-pagination-custom, 
	.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 11.5% !important;
}
}
@media #{$iphone6_7}{
	.swiper-pagination-fraction, .swiper-pagination-custom, 
	.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 10% !important;
}
}

Posts: 1

Participants: 1

Read full topic

@smidhunraj wrote:

Is it possible to apply primary-shade to ion button

Posts: 5

Participants: 2

Read full topic

@OliverPrimo wrote:

I have an alert dialog with an input text field. It requires the user to input his PIN before proceeding. If the PIN entered by the user is correct then the dialog box will disappear. If the PIN entered by the user is wrong then the dialog box should not disappear. Now, the problem is, when the user entered a wrong PIN, the dialog box still disappears. How can I prevent the alert box from closing if the condition was not satisfied or if the PIN is wrong?

Her is my code:

            this.alertCtrl.create({
              title: 'Verify it\'s you',
              message: 'Please enter your PIN for verification purposes.',
              inputs: [
                {
                  name: 'pin',
                  type: 'number',
                  placeholder: 'PIN',
                }
              ],
              buttons: [
                {
                  text: 'OK',
                  handler: (data) => {
                    if (data['pin'] != this.pin) {
                      this.toastSrvc.presentToast('Invalid PIN!');
                      // DON'T CLOSE THE ALERT
                    }
                  }
                }
              ],
              enableBackdropDismiss: false
            }).present();

I hope someone can help me with this. Thank you

Posts: 1

Participants: 1

Read full topic

@Harikag wrote:

Hi all, I have two components, In first component am creating a socket object, Same socket object I want to use in the second component also, So how to use, So please help me, please, please.

Posts: 3

Participants: 2

Read full topic

@smidhunraj wrote:

I am new to ionic.Can any one tell me what this piece of code does

> onDidDismiss() => Promise<OverlayEventDetail<any>
Where can i find its implementation…

Posts: 1

Participants: 1

Read full topic

@orhanncolak wrote:

Hi,

I’m ionic new. I added adMobFree to my app. But the ads are not showing. And test ads don’t show up.

I only see black stripe when run as test. Where am i making a mistake?

Thank you.

package.json;

{
  "name": "App",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/admob-free": "^4.20.0",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/splash-screen": "~4.20.0",
    "@ionic-native/status-bar": "~4.20.0",
    "@ionic/storage": "2.2.0",
    "cordova-admob-sdk": "0.13.1",
    "cordova-android": "7.1.4",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-admob-free": "^0.21.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-promise-polyfill": "0.0.2",
    "ionic-angular": "3.9.5",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.2",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-admob-free": {
        "ADMOB_APP_ID": "ca-app-pub-8060783268745607~9587423592"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-admob-sdk": {
        "PLAY_SERVICES_VERSION": "11.6.0"
      }
    },
    "platforms": [
      "android",
      "browser"
    ]
  }
}

I added the following codes to the config.xml file ;

 <plugin name="cordova-plugin-admob-free" spec="0.21.0">
        <variable name="ADMOB_APP_ID" value="ca-app-pub-8060783268745607~9587423592" />
    </plugin>
    <plugin name="cordova-admob-sdk" spec="0.13.1">
        <variable name="PLAY_SERVICES_VERSION" value="11.6.0" />
    </plugin>

this is my banner code ;

showBanner() {
    this.platform
      .ready()
      .then(() => {
        const bannerConfig: AdMobFreeBannerConfig = {
          id: this.bannerId,
          isTesting: true,
          //bannerAtTop: true
          //autoShow: true
        };
        this.admobFree.banner.config(bannerConfig);
        this.admobFree.banner.prepare().then(() => {
          this.admobFree.banner.show();
        })
          .catch(e => console.log(e));
      })
      .catch(e => console.log(e));
  }

Posts: 1

Participants: 1

Read full topic

@GuillermoDotAt wrote:

When installing the starter Ionic react app (example with tabs), IonApp renders twice. I put a console.log(‘Tab1 called’) just before the return statement, it will produce a double output of “Tab1 called” in the console when visiting /tab1.

Is this the intended behavior? What is the purpose?

Thanks,

Posts: 1

Participants: 1

Read full topic

@Hyonta wrote:

I’m migrating source code from ionic3 to ionic4.
I want to set the first page as the login.page in my new ionic4 app.
So, I wrote router.navigateByUrl in my app.component.ts.
But It’s not working.
I wrote console.log in the constructor and ionViewWillEnter of login.page.ts,
but it does not seem to be called.
Please Help me.

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [CustomNativeStorage, PointsService]
})

export class MyApp {
.
.
this.router.navigateByUrl('/login');
.

app.componet.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

login-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPage } from './login.page';
const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class LoginPageRoutingModule {}

Posts: 3

Participants: 2

Read full topic

@Harikag wrote:

Hi, I have socket object in one component, I want to use socket object in other component , so am using services, am setting value into the service and trying to get through another component by using service object it is giving undefined . SO please help me.
below is my sample code.

makeSocketConnection() {
    var url = "http://" + this.ip + ":" + this.port + "/";

    if(this.socket===undefined||!this.socket.connected){
      console.log("establishing socket connection undefined");
      this.socket = io(url);
      this.socket.emit('add user', this.user);    
      this.storage.set('socket',this.socket) ;//sets socket object
   //   this.newMessage();
  this.chatService.setSocket(this.socket);//sets socket object
    }  
  }

am setting a socket object by this.chatService.setSocket(this.socket)

and am trying to getin other component like below

`this.storage.get('socket').then((val) => {
  
 console.log(" socket obj is "+val);//giving undefined
}); 

 console.log(" this.dummytest is "+this.chatService.getSocket());--//giving undefined

`

Posts: 1

Participants: 1

Read full topic

@greenpro wrote:

To demonstrate the problem I’ve created the default sidemenu ionic/react app and added two independent tab roots which are accessed from the side menu. TabRoot1 contains Tab1 and Tab2 and TabRoot2 contains Tab3 and Tab4. Each TabRoot has its own IonRouterOutlet defining the routes to its tabs.

Everything works fine on the first visit to any tab root/tab, once you switch between tab roots in the side menu the navigation gets broken. What am I missing? Already spent 3 days on this without any solution at all.

The complete demo project code can be found here:

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@louis12356 wrote:

Hello,

i try to chain promises so i get rid of nesting promises in promises…

It is an Ionic Angular project.

i would like to work with ‘resolve’ and ‘reject’, but i cannot import it. This is my code in home.page.ts:

import { Component, OnInit } from '@angular/core';
import { resolve } from 'path';
import { reject } from 'q';

export class HomePage implements OnInit {

   ngOnInit() {

       this.nativeStorage.getItem("something").then(
      success => {

        resolve("ok");

      },

      error => {

        reject("error");

      }
    ).then(
      success => {

        console.log(success);

      }, error => {

        console.log(error);

      }
    ) //continue with chain here

   }

}

I do get the error on compiling, that

ERROR in src/app/home/home.page.ts:4:25 - error TS2307: Cannot find module 'path'.
4 import { resolve } from 'path';
                                      ~~~~~~
[ERROR] An error occurred while running subprocess ng.
        ng run app:ionic-cordova-build --platform=android exited with exit code 1.
        Re-running this command with the --verbose flag may provide more information.

Thanks in advance, Louis

Posts: 1

Participants: 1

Read full topic

@zauberzuckerfee wrote:

Hey, i am currently developing an App for my graduation at a higher technical collage.

My problem is that, my app does not get any data on mobile devices. Is it possible that the HTTPClient from Angular does not work on mobile devices? Please be not distracted by the localhost, i use a VPN to be in the network where the backend runs.

Could you please tell me what i have to use or whats the problem? I could not find any satisfying solutions online.

Here is my ApiDataService:

import { HttpClient } from ‘@angular/common/http’;

@Injectable({
providedIn: ‘root’
})
export class APIDataService {

private api = ‘http://localhost:11218/lehrer’;
private id = ‘SCRE’;

private gruppen: Gruppe;
private schueler: Schueler;

constructor(
private http: HttpClient,
private storage: Storage
) { }

getGruppen(): Observable<Gruppe> {
return this.http.get<Gruppe>(${this.api}/gruppen/${this.id});
}

getSchuelerFromGruppe(grpId: number): Observable<Schueler> {
return this.http.get<Schueler>(${this.api}/schueler/gruppen/${grpId});
}

Posts: 1

Participants: 1

Read full topic

@svschaik999 wrote:

I have a select in my code that looks like this.

              <ion-select formControlName="location" (click)="clearSectionAndTask()">
                <ion-select-option *ngFor="let location of locations" value="{{location.locationId}}">
                  {{location.locationName}}
                </ion-select-option>
              </ion-select>

The list of locations is retrieved from an API in JSON format.
The user is able to select a default location from the settings page which should then pre-select the drop down for him.

    this.settings.getStandardLocation().then(val => {
      if (val) {
        this.formGroup.patchValue({location: val.id});
      }
    });

Doing it like this has the expected result of changing the value of the drop down to the correct id, but doesn’t actually select and thus change the value shown on the select itself.

Doing it with patchValue({location: val}) results into the value being set to the object rather than the id.

What is the right way to solve this?

Thanks.

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

I am trying to create an Http interceptor to display loading in all the pages. But I am not able to dismiss the loading controller

I have followed this https://www.youtube.com/watch?v=IJWCpa_-MeU But the problem is loading is displayed infinitely.

Actually I am a bit new to these concepts. So please help me out.

Thank you very much

@Injectable()
  export class HttpRequestInterceptor implements HttpInterceptor {
    constructor(
      private loadingCtrl: LoadingController,
    ) {}

    intercept(
      request: HttpRequest<any>,
      next: HttpHandler
    ): Observable<HttpEvent<any>> {
      this.loadingCtrl.getTop().then(hasLoading => {
        if (!hasLoading) {
          this.loadingCtrl.create({
            spinner: 'circular',
            translucent: true
          }).then(loading => loading.present());
        }
      });

      return next.handle(request).pipe(
        catchError(err => {
          if (err instanceof HttpErrorResponse) {
            switch ((<HttpErrorResponse>err).status) {
              case 401:
             console.log("401")

              default:
                return throwError(err);
            }
          } else {
            return throwError(err);
          }
        }),
        retryWhen(err => {
          let retries = 1;
          return err.pipe(
            delay(1000),
            tap(() => {
              // this.showRetryToast(retries);
            }),
            map(error => {
              if (retries++ === 3) {
                throw error; // Now retryWhen completes
              }
              return error;
            })
          );
        }),
        catchError(err => {
          return EMPTY;
        }),
        finalize(() => {
          this.loadingCtrl.getTop().then(hasLoading => {
            if (hasLoading) {
              this.loadingCtrl.dismiss();
            }
          });
        })
      );
    }
    }

Posts: 1

Participants: 1

Read full topic

@codiqa100075846 wrote:

Hello,

I have been blocking for three days on a problem that I cannot solve.

I tried several solutions that I could find on the forums but it did not change anything.

I am developing a PWA, I have two “menus”, one for the desktop version which is displayed just below the header and the second for the mobile version which is displayed by clicking on “ion-menu-button”.

To display the articles, the application must know what type of articles it should display, for adults or children.

Example, to see adult articles: https://www.example.com/articles
Example, to see children’s articles: https://www.example.com/kids/articles

You will notice that the “kids” segment has been added.

All the sections have the same thing.

In the menu, I have a button that allows you to switch between adults and children regardless of the section.

The switch system works very well on the menu of the desktop version but not the menu for the mobile version.

The segment returns a value of “NULL” in the “routerLink” and even when I switch between modes the value does not change. When I debug and look at the logs, the value has changed and I can even display it next to the title of the link.

I use a “SegmentPipe” to return the correct value.

Thanks for your help.

// app.components.html
...
<ion-menu-toggle auto-hide="false" *ngFor="let page of appPages">
	<ion-item [routerLink]="page.url | segment"
			  [routerLinkActive]="'active'"
			  [routerDirection]="'root'">
		<ion-icon slot="start" [name]="page.icon"></ion-icon>
		<ion-label>
			{{page.title | translate}} {{page.url | segment}}
		</ion-label>
	</ion-item>
</ion-menu-toggle>
...

import {OnDestroy, Pipe, PipeTransform} from '@angular/core';

import {Observable, Subject} from 'rxjs';
import {map, takeUntil} from 'rxjs/operators';

import {trimSlashes} from '../shared/utils';
import {SettingsFacade} from '../store/settings/settings.facade';

@Pipe({
    name: 'segment',
    // pure: false
})
export class SegmentPipe implements PipeTransform, OnDestroy {
    segement$: Observable<string>;
    subscription$ = new Subject<any>();

    constructor(private settingsFacade: SettingsFacade) {
        this.segement$ = this.settingsFacade.segment;
    }

    transform(value: string): Observable<string> {
        return this.segement$
            .pipe(
                map((segment: string) => {
                    return `/${trimSlashes(segment + value)}`;
                }),
                takeUntil(this.subscription$)
            );
    }

    ngOnDestroy(): void {
        this.subscription$.next();
        this.subscription$.complete();
    }
}

Posts: 1

Participants: 1

Read full topic