Deep linking functionality is active when the app is in the background, but it does not work when the app is completely closed

After facing compatibility issues with the Ionic Deeplink plugin ionic-plugin-deeplinks on iOS, I had to resort to installing another plugin called cordova-deeplink, along with cordova-universal0links-plugin. Here is my package.json configuration:

"@ionic-native/deeplinks": "^4.16.0",

"cordova-deeplink":"git+https://github.com/foneclay/cordova-universal-links-plugin.git#2.3.1", "cordova-universal-links-plugin": "1.2.1" so in my component.ts:

platform.ready().then(() => {
      if (this.platform.is('android')) {
        this.deeplinks.routeWithNavController(this.nav, {
          '/e-training/course_overview/:courseID': CourseDetailsPage,
           .......
        }).subscribe((match) => {
          console.log('Successfully routed', match);
        }, (nomatch) => {
          console.log('Unmatched Route', nomatch);
        });
      } else {
        if (this.platform.is('ios')) {
          universalLinks.subscribe('openApp', this.onAppRequest.bind(this));
          universalLinks.subscribe('openPage', this.onPageRequest.bind(this));
        }
      }
    });

config.xml:

<universal-links>
        <host event="openApp" name="example.com" scheme="https">
            <path event="openPage" url="/" />
        </host>
</universal-links>

Although everything works fine on android, I encountered an issue on iOS where the app only functions correctly when running in the background. When I terminate the app and click on a shared link, it opens the home page of the app instead of navigating to the specific details as expected.

Ionic:

  • ionic (Ionic CLI) : 4.0.2
  • Ionic Framework : ionic-angular
  • 3.9.2 @ionic/app-scripts : 3.2.0

Cordova:

System:

  • Android SDK Tools : 25.2.5
  • NodeJS : v8.9.3
  • npm : 5.4.2
  • OS : Windows 10

Answer №1

After removing the cordova-deeplink and cordova-universal-links-plugin plugins along with any related code such as deleting the tags

<universal-links>....</universal-links>
in config.xml, I made changes to app.component.ts for iOS by replacing it with the following:

//this.platform.is('android') || this.platform.is('ios')
this.deeplinks.routeWithNavController(this.nav, {
  '/e-training/course_overview/:courseID': CourseDetailsPage,
     ...
  }).subscribe((match) => {
    console.log('Successfully routed', match);
  }, (nomatch) => {
    console.log('Unmatched Route', nomatch);
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract information from a complex nested structure within an array

Can someone assist me with extracting only the username from the response provided below? I am able to access other data but struggling with this particular aspect. [ { "_id": "5f44d450aaa72313549d519f", "imageTitle": "u ...

Angular project icons not displaying in the browser

My current project in Angular was functioning properly until recently. I am facing an issue where the images are not being displayed on the browser when I run ng serve, resulting in a 404 error. Interestingly, everything else seems to be working fine witho ...

The function myComponent.map does not exist

I am currently storing information that I am trying to pass to a component responsible for creating Tabs and TabPanel components (Material-UI) based on the provided data. Here is how the information is structured: let eventCard = [ { title: "T ...

Embedding Dropzone in Angular 2 or Typescript is already implemented

Within my Angular 2 Component, I have a Dropzone that is created programmatically and I want it to be attached to the body so that my entire website can serve as the "dropzone" for file uploads. Every time the component is initialized, it attempts to atta ...

Tips for running a function before initializing Angular 2

Is there a way to run a function before initializing Angular in the current ng2 CLI configuration? One approach is to use SystemJS and call System.import() immediately after our function executes. ...

Angular system.import script not able to execute properly

I am encountering an issue with my Angular2 application that I built in IntelliJ and Play Framework. The code snippet below is causing an error: <script> System.import('assets/app/main.js').catch(function(err){ console.erro ...

Using Angular 2 to toggle the visibility of a component when hovering over and moving away from it

I have developed a custom filtering component in Angular 2, which I have integrated into the table header. My goal is to show the filter when the mouse hovers over a specific span, and hide it when the mouse moves away. <th> <span class="headCol ...

What is the best way to integrate Angular 6 and Codeigniter 3 in a web project in order to have Angular handle the frontend and Codeigniter take care of the backend operations

I am interested in creating a web application that utilizes Angular 6 for the frontend and Codeigniter 3 for the backend. However, I am facing difficulty in integrating both technologies as most tutorials I found focused on using AngularJS which is an olde ...

Can you suggest Object-Oriented Programming software design patterns specifically tailored for handling similar React.js class hierarchies?

In the midst of updating my React project, I find myself creating numerous classes with identical hierarchies. As a result, I am exploring alternative ways to organize my code. The upcoming change involves introducing a two-monitor setup to the product, w ...

Show pictures stored in S3

I currently have an Amazon AWS S3 Bucket where I store images. Each object in the bucket has its own link, but when I try to open it in a browser, the image downloads instead of displaying directly on the site. This makes it challenging to view the images ...

What is the method to incorporate @angular/fire into an Nx Workspace for an Angular project?

Incorporating @angular/fire into my Nx workspace for my Angular application is my current goal. Despite my efforts to adhere to best practices, I have not found any guidance in the official documentation on how to incorporate this library into the wor ...

Tips for maintaining a healthy balance of tasks in libuv during IO operations

Utilizing Typescript and libuv for IO operations is crucial. In my current situation, I am generating a fingerprint hash of a particular file. Let's say the input file size is approximately 1TB. To obtain the file's fingerprint, one method involv ...

Error: Expected an expression but found a parsing error in the eslint code

interface Address { street: string, } export const getAddress = (address: Address | null) : string => address?.street ? `${address?.street}` : '0000 Default Dr'; Why am I receiving the error message Parsing error: Expression expected ...

What could be the reason for the defaultCommandTimeout not functioning as expected in my script

Is there a way to wait for only one particular element in Cypress without having to add wait commands everywhere in the test framework? I've come across the solution of adding defaultCommandTimeout in the cypress.json file, but I don't want it t ...

Identifying the pressed key on a mouse click event using Angular 2

I am working on an Angular 2 component that has a div element bound to a click event: <div #myDiv class="myClass" (click)="addAnnotation($event)"> </div> When the div is clicked, I want the addAnnotation code to run only if the 'a&ap ...

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

I've recently started working with angular development and encountered a challenge with a mat-datepicker. The value of the datepicker is connected to filterDate using [(ngModel)] as an @Input() parameter. I have implemented a handleChange event that e ...

What is the significance of setting multi:true in Angular 4 providers?

Utilizing HTTP_INTERCEPTORS in angular4 involves creating a HttpServiceInterceptor class that implements the HttpInterceptor interface and defines the intercept method. To register the provider for HTTP_INTERCEPTORS, the following code is used: providers: ...

The default type for the react-query useQuery selector and incorrect type for regular hook calls

Code: export const useAllUsers = <T extends UserResponseDto>( select?: (data: UserResponseDto[]) => T ) => useQuery<UserResponseDto[], ErrorResponse, T, string[]>({ queryKey: [QueryClientKeys.GET_ALL_USERS], queryFn: async () ...

Utilize router state changes to dynamically load Angular components

Within the Angular framework, all components are bundled together in a single file called main.bundle.js. As new components are added, this file can become quite large. Is there a way to asynchronously load only the necessary components when the router s ...

Angular: Nested FormArray not populating the values in the FormControls

I have a form that contains a FormArray inside which you can dynamically add values and in this case I can retrieve the values using the FormControl. const formGroup = this._formBuilder.group({ dataArray: new UntypedFormArray([]), }); Inside this first ...