Hi everyone,

I encounter something annoying, I have a small app i want to build on an Android Device.
Using this on browser (ionic serve) or livereload (ionic capacitor run android -l --external) it works fine but when i build directly with Gradle or generating an APK. This is not working at all.

var headersA = new HttpHeaders;
  
 headersA.append("Accept", 'application/json');
    headersA.append("Access-Control-Allow-Origin", "*")
    const httpOptions = {
      headers: headersA
    };
this.http.put('http://192.168.1.250/api/ebx/x8r/4259840?', data, httpOptions).subscribe(d => () => { })

Adding these modifications didn’t work as well:

<application
        android:networkSecurityConfig="@xml/network_security_config"
...

or creating a network_security_config.xml with

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">192.168.1.250</domain>
  </domain-config>
</network-security-config>

Did someone encountered the same problem or is there any quick fix for that ?

1 post - 1 participant

Read full topic

I implemented Password Autofill with Capacitor in my app (using this guide), which works really good with Apple’s own password manager (iCloud Keychain).
But when I use another password manager like Bitwarden, the URI is set to “iosapp://capacitor://[hostname-from-capacitor-config]/login”, which is problematic when syncing between desktop browser and mobile device for login on the website and app, because the URL scheme is not the same.
Has anybody else encountered this problem and found a solution?

1 post - 1 participant

Read full topic

I have a situation with styles on simulator ios, that are just fine in the browser.

I am not sure how to write the ion-header part so that is actually display properly on ios simulator.
Right now, i have this code on a page :

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Actualité</ion-title>
    <ion-buttons slot="start">
      <ion-back-button text='Retour' defaultHref='home-page'>
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>

</ion-header>

<ion-content [fullscreen]="true" >

    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title>Actualité</ion-title>
      </ion-toolbar>
    </ion-header>

and here the css in this component:

ion-header {
  background-color: var(--text-light-green) !important;
}

ion-toolbar {
  background-color: var(--text-light-green) !important;
}

ion-header img {
  height: 100px;
}

.toolbar-content {
  background: var(--text-light-green) !important;
}

I also put that code in the global.scss

ion-header {
  background-color: var(--text-light-green) !important;
}

ion-toolbar {
  --background: var(--dark-green) !important;
  --color: white
}
ion-back-button{
  color: white;
}
ion-button{
  --background: var(--dark-green) !important;
}

.toolbar-content {
  background: var(--text-light-green) !important;
}

.toolbar-background {
  background: var(--text-light-green) !important;
}

i am very confused about what i should do.
this is the correct verion in the browser

this is the result in ios simulator using xcode

thank you for the help

1 post - 1 participant

Read full topic

Hi,

I have started to sign and upload to the PlayStore for distribution to Internal testers my first app. That went generally well but I’m a bit confused about the best way to do that:

1. The Capacitor docs says that "Capacitor does not have a build or compile command, nor will there ever be one. " but the CLI does have a build command which appears to be doing the same as Android Studio corresponding command.

So is there any difference in what npx cap build ... android does compared to Android Studio?

2. I need to automate the build process so I’d like to use the CLI. But when running npx cap build ... android, I must provide the keystore and key alias passwords on the command-line (--keystorepass and --keystorealiaspass options).

This means the passwords are going to be displayed in clear text and stored in the shell execution history? surely that’s not how it’s supposed to be done?
Is there a way for the CLI to prompt me for these passwords?
Or must we use ENV variables (which is harder in my use case, because I need to read these values from some .env file or something.

How are you doing this?

Thanks for any pointer!

1 post - 1 participant

Read full topic

When input focused (or setFocus) on android is pushes content up with statusbar height. After all day search how to solve problem, I’d not found anything to solve this problem. But when I have change provideIonicAngular mode from md to ios is work correct without scroll content up when input focused.

“@ionic/angular”: “^7.5.2”

1 post - 1 participant

Read full topic

I’m building a website for a city government, and as such we have extra accessibility standards. However, I’m running into issues as the ion-focused class is not being added to ion elements (such as ion-input and ion-select) when I keyboard navigate to them.

Most of them receive the has-focus class, but as this is also added when the user clicks into the box, it is not ideal for adding keyboard navigation styling.

All of the elements I’m having issues with do have the ion-focusable class, as specified in the keyboard navigation accessibility instructions: https://ionic.io/docs/accessibility/keyboard

I am using Ionic Angular version 7.5.4

1 post - 1 participant

Read full topic

I am frequently / intermittently get this error (and this misplaced toast) with Ionic 7.5 (in which the ability to position toasts relative to a DOM id just came out).

I’ve tried various things but nothing seems to work.

Here is how I call it:

  <ion-header id="header-entry-detail">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Entry Details</ion-title>
      </ion-toolbar>
    </ion-header>

And when a button is pressed @click

const toastEntryUpdated = async () => {
      const toast = await toastController.create({
        message: 'Entry image update',
        duration: 3000,
        color: 'success',
        position: 'top',
        positionAnchor: 'header-entry-detail'

      });
      return toast.present();
    };

I am guessing the reason is because I am not generating the ion-toast inline. I don’t seem to be able to reproduce the bug when I switch to that inline method which it’s true the documentation says is recommended.

1 post - 1 participant

Read full topic

In my files, I have already the android folder but in android/app/build/ the only file there is .npmkeep where can I get the apk? I don’t want to open it using android studio, I just want only the apk. Help me guys

1 post - 1 participant

Read full topic

hi
im’ on an angular v8.1 app, with ionic 5.36 and cordova/core 6.2

i need to install deeplinks then i use this doc : deeplinks v5

then i install

"@awesome-cordova-plugins/deeplinks": "^6.4.0"

cordova plugin is installed with ionic cordova plugin add ionic-plugin-deeplinks

when i launch with ionic serve, i have theses errors

[ng] ERROR in ./node_modules/@awesome-cordova-plugins/deeplinks/ngx/index.js 13:138-156
[ng] "export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
[ng] ERROR in ./node_modules/@awesome-cordova-plugins/deeplinks/ngx/index.js 26:0-27
[ng] "export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
[ng] ERROR in ./node_modules/@awesome-cordova-plugins/deeplinks/ngx/index.js 13:21-42
[ng] "export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
[ng] ERROR in ./node_modules/@awesome-cordova-plugins/deeplinks/ngx/index.js 14:22-46
[ng] "export 'ɵɵngDeclareInjectable' (imported as 'i0') was not found in '@angular/core'

angular 8.1 is not compatible with this package?

if i use import { Deeplinks } from “@ionic-native/deeplinks/ngx”; then i have an error cordova_not_available

    this.deeplinks
        .routeWithNavController(_this.navController, {
          "/external_connections": HomePage,
          "/reset_password": "reset_password",
        })
        .subscribe(
          (match) => {
            console.log(match);
          },
          (nomatch) => {
            console.log(nomatch);
          }
        );

can’t upgrade angular/core, to many changes

how can use deeplinks with this setup?
thx for help

1 post - 1 participant

Read full topic

Hello community,

I’m currently working on a project using Ionic 6 with Angular 14, and I’m trying to set up Jest for unit testing. However, I’m encountering some challenges in the process. I’ve followed the official documentation, but it seems like there might be version-specific considerations.

Here are the steps I’ve taken so far:

1. Installed Jest and required dependencies.
2. Configured Jest in the jest.config.js file.
3. Tried to run some sample tests, but I’m facing issues with module resolution and TypeScript compilation.

I’ve searched through the forums and online resources, but I haven’t found a solution that fits my scenario.

Has anyone successfully set up Jest with Ionic 6 and Angular 14 recently? If so, could you share your configuration or point me in the right direction? Any help would be greatly appreciated!

Thank you in advance.

This is My package.json

 "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.10",
    "@angular/cli": "^14.2.10",
    "@angular/compiler": "^14.2.12",
    "@angular/compiler-cli": "^14.2.12",
    "@angular/language-service": "^14.2.12",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "cordova-launch-review": "^4.0.1",
    "cordova-open-native-settings": "^1.5.5",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-device": "^2.0.2", ....
},
 "dependencies": {
    "@angular-eslint/schematics": "^1.0.0",
    "@angular/common": "^14.2.12",
    "@angular/core": "^14.2.12",
    "@angular/forms": "^14.2.12",
    "@angular/platform-browser": "^14.2.12",
    "@angular/platform-browser-dynamic": "^14.2.12",
    "@angular/router": "^14.2.12",
    "@awesome-cordova-plugins/adjust": "^6.3.0",
    "@awesome-cordova-plugins/core": "^6.3.0",
    "@awesome-cordova-plugins/deeplinks": "^6.4.0",
    "@awesome-cordova-plugins/device": "^6.3.0",
    "@awesome-cordova-plugins/fcm": "^6.4.0",
    "@awesome-cordova-plugins/firebase-analytics": "^6.3.0",
    "@awesome-cordova-plugins/geolocation": "^6.3.0",
    "@awesome-cordova-plugins/in-app-browser": "^6.4.0", ... . .}

1 post - 1 participant

Read full topic

Hello,
i use the grid to display boxes next to each other

test

test2

test3

test4

it should be like this :

here the css in this component:

.col-tab {
  display: flex;
  background-color: green;
  border: solid 2px #fff;
  text-align: center;
  color: white;
  height: 6rem;
  align-items: center;
  justify-content: center;
  width: 120px;
  font-weight: 900;
  border-radius: 10px;
}

a {
  text-decoration: none;
  color: white;
}

Thank you very much for your help

1 post - 1 participant

Read full topic

environment： Capacitor 5.5.1、Gradle 4.10.1、JDK 1.8

error

1 post - 1 participant

Read full topic

The HTML code with scrolling part looks as follows:

<ion-content [scrollX]=“true”>
<canvas #pdfcanvas id=“pdfcanvas”>check
<ion-content (closing tag)>

It works fully as expected on web: the Canvas document is scrolled, but once using Capacitor (Android) transformation : not possible to scroll anything on handy device

1 post - 1 participant

Read full topic

Hi,

in my pwa I use the standard tabs that are created with the cmd “ionic start projectname tabs --type=angular --capacitor”. I just renamed the tabs (e.g. tab1 => tabstart). Here is the standard code

app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  <other pages>
];

tabs-routing.module.ts
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tabstart',
        loadChildren: () => import('../tabstart/tabstart.module').then( m => m.TabstartPageModule)
      },
	  <other tabs>
      {
        path: '',
        redirectTo: '/tabs/tabstart',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tabstart',
    pathMatch: 'full'
  }
];

When you serve the project (ionic serve", you see in the address line “localhost:8100/tabs/tabstart”. When you press Reload, it just reloads the tabpage tabstart again.
But on the app server you get to see the address “https://mydomain/tabs/tabstart” when entering the url https://mydomain/ Then when you press Reload the browser says “The requested URL was not found on this server”.
I suspect that I have to activate something on the server (Debian / Apache). Could that be?

1 post - 1 participant

Read full topic

Hi,

I have an problem with swiper.

I have followed this guides:

using:
Angular 16.1.1
swiper: 11.0.4

And have issue with “Unknown html tag swiper-container” i was switching schemas from app.module to certain module directly but it did not help.

Anyone knows what might be the case?

1 post - 1 participant

Read full topic

Introduction

Wonder how interior designers make spaces stylish and durable? It’s all about decorative laminates, versatile materials changing interior design. This article explores the Decorative Laminate Market, revealing trends and innovations. Laminates, with various textures and finishes, are now a top choice for architects, designers, and homeowners. They’re tough enough for busy areas and some even have germ-fighting properties, making them great for healthcare and hospitality. Come learn how these materials are shaping the future of interior design. Don’t miss out on insights from experts and exciting solutions for spaces worldwide!

What is a Decorative Laminate?

Decorative laminate is a versatile material widely used in interior design and architecture. It’s made by layering paper or fabric, saturating it with resin, and then compressing it under high heat and pressure. The top layer features an attractive pattern, often imitating natural materials like wood, stone, or fabric. This layer is shielded by a sturdy, transparent finish that guards against wear, scratches, and moisture.

Commonly applied to surfaces like countertops, cabinets, furniture, and wall panels, decorative laminates elevate both the aesthetics and longevity of these elements. They offer a budget-friendly alternative to genuine materials and provide a broad spectrum of design possibilities, making them a favored option for both residential and commercial spaces.

The Benefits of Decorative Laminate

Aesthetic Change

Decorative laminate offers endless design options. With advanced printing, it can look just like expensive materials such as wood, stone, and metal. This means you get a high-end look at a much lower cost.

Durability and Resilience

Decorative laminate is built to handle everyday wear and tear. It stands up to scratches, moisture, and stains, making it perfect for busy areas like kitchens and bathrooms. Plus, its sturdy nature means it stays looking good for a long time.

Easy Maintenance

Unlike natural materials that might need special care, laminate is super easy to take care of. Usually, a gentle cleaning with mild soap and a soft cloth is all it takes to keep it looking great. This hassle-free upkeep makes it a smart choice for both busy homes and commercial spaces.

Decorative Laminate Applications

Countertops and Surfaces

Decorative laminate finds widespread use in kitchen and bathroom countertops. Its resistance to moisture and stains, combined with a wide array of design choices, makes it a favored option for creating both stylish and practical surfaces.

Cabinetry

Laminate is a popular pick for cabinet fronts and panels. Its ability to mimic the appearance of natural wood or other high-end materials allows for a tailored, upscale look without the associated high costs.

Flooring

Laminate flooring has become highly popular for its affordability and durability. It offers the appearance of hardwood or tile flooring without the hefty price tag, making it an appealing choice for both homes and businesses.

Wall Cladding

Using decorative laminate as wall cladding can introduce depth and texture to a space. Whether it’s an accent wall or covering an entire room, laminate offers a customizable and visually appealing solution.

Decorative Laminate Drawbacks

Limited Repair Options:

Unlike wood or stone, it’s tough to fix a damaged laminate. Often, replacement is the only solution, which can be costly and time-consuming.

Limited Heat Resistance:

Decorative laminates can get damaged by high heat, causing discoloration or warping. Not suitable near stovetops or ovens without protection.

Sensitive to Damage:

While durable, laminates can be scratched by sharp objects. This can lead to visible wear, especially in busy areas.

Tips When Choosing Decorative Laminate

Budget

Before choosing a decorative laminate, set a budget. This helps narrow down options and ensures you stay within your financial limits.

Design

Consider the overall design of the space. Choose a laminate pattern that complements the existing elements for a cohesive look, whether it’s modern or rustic.

Texture and Finish

Laminate comes in different textures and finishes, like glossy or matte. Consider factors like ease of cleaning and the visual effect you want when making your choice.

The Future of Decorative Laminate Market

The future of the decorative laminate market looks bright with exciting trends ahead. Advancements in printing tech will bring about highly realistic and customizable designs. Sustainability will be a key focus, driving eco-friendly practices. Expect to see new applications emerge, along with innovations like antimicrobial and fire-resistant laminates to enhance health and safety. Customization, the impact of global urbanization, and the integration of smart technology will play significant roles. As consumer demands change, manufacturers will emphasize both looks and durability. Collaborations across industries will lead to cutting-edge solutions, positioning decorative laminates at the forefront of interior design and functionality.

Conclusion

In a nutshell, using decorative laminate in your interior design projects offers a range of possibilities. It’s versatile, durable, and easy to care for, making it a practical and affordable choice. Consider factors like budget, design, and texture to make a smart decision that enhances the look and value of your space. Embrace decorative laminate’s potential to transform your interiors into stylish and functional showcases.

Read More: https://www.reportsanddata.com/report-detail/decorative-laminate-market

1 post - 1 participant

Read full topic

Hi,

I am migrating an old ionic angular App. I have the App running on iPhones and both iPhone emulator through Xcode and Android emulator through Android Studio. But when I deploy that to Android physical device from the same Android Studio, the ionic tabs don’t fit in the tab bar on the Android physical device. I have 7 tabs and about half a tab on each side gets cut off with 5 showing in between. I have tried this on a Samsung 22 phone and also on an old Xiaomi device - both have the same problem.

I have tried to search around for this issue but couldn’t find anything so far.

My ionic info output is below

Ionic:

Ionic CLI : 7.1.1 (/Users/username/.nvm/versions/node/v20.2.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.1
@angular-devkit/build-angular : 12.2.18
@angular-devkit/schematics : 12.2.18
@angular/cli : 12.2.18
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 3.9.0
@capacitor/android : 3.9.0
@capacitor/core : 3.9.0
@capacitor/ios : 3.9.0

Cordova:

Cordova CLI : 12.0.0 (cordova-lib@12.0.1)
Cordova Platforms : android 9.1.0, browser 6.0.0, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

cordova-res : 0.15.4
native-run (update available: 1.7.3) : 1.7.1

System:

ios-sim : 8.0.2
NodeJS : v20.2.0 (/Users/username/.nvm/versions/node/v20.2.0/bin/node)
npm : 9.6.6
OS : macOS Unknown
Xcode : Xcode 15.0 Build version 15A240d

Android Studio is Giraffe 2022.3.1 Build #AI-223.8836.35.2231.10406996, built on June 28, 2023

Not quite sure how to address/fix this issue. Appreciate any help/pointers.

Thanks,
Sanjay.

1 post - 1 participant

Read full topic

The HTML code with scrolling part looks as follows:

<ion-content [scrollX]=“true”>
<canvas #pdfcanvas id=“pdfcanvas”>check
<ion-content (closing tag)>

It works fully as expected on web: the Canvas document is scrolled, but once using Capacitor (Android) transformation : not possible to scroll anything both y and y on handy device

1 post - 1 participant

Read full topic

Originally published at: Introducing a New Capacitor Release Cadence - Ionic Blog

In our ongoing effort to provide a better experience for developers, we decided to update our release cadence to better serve the community.

1 post - 1 participant

Read full topic

I wanted to implement highlighted dates on the ion-datetime but there doesn’t seem to be events for the arrows in the top right.

Am I missing something? I’ve tried binding (ionChange) and (ngModelChange) to try to capture it.

Events are triggered if you use the top left month/year selector, or click on a date, but nothing for the < > arrows in the top right.

Can’t find any documentation for it either. That means I would need to load in the entire history of the data set to use the highlighted dates functionality?

Looking at the source code I can’t find any hints of what may be triggered, the closest I could find is the handler for the next button, which doesn’t seem to fire any events:

Although I acknowledge this might not be the full picture, as I don’t know if calendar.scrollTo may trigger things. I was trying to use GitHub to track this down but scrollTo seemed to be a dead end in its browsing.

I did find reference to it only loading the calendar for 3 months (last current next) but not what event it might load more from.

Can anyone either point me in the right direction, or confirm that this

1 post - 1 participant

Read full topic