Implementing deep linking in an Ionic/Angular application involves configuring platform-specific settings and using the @ionic-native/deeplinks plugin to handle incoming links. Below is a detailed summary along with example configurations for both iOS and Android.

Key Steps:

1. Install the Deeplinks Plugin:

npm install @ionic-native/deeplinks
ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable HOST=example.com --variable SWIFT_VERSION=5

1. Configure Deeplinks in Your Ionic App: In your app.module.ts or app.component.ts, import and configure Deeplinks:

import { Deeplinks } from '@ionic-native/deeplinks/ngx';
import { NavController } from '@ionic/angular';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(private deeplinks: Deeplinks, private navCtrl: NavController) {
    this.initializeDeepLinks();
  }

  initializeDeepLinks() {
    this.deeplinks.route({
      '/page/:id': 'PageDetail',  // Define your route pattern
    }).subscribe((match) => {
      // Extract parameters and navigate
      const pageId = match.$args.id;
      this.navCtrl.navigateForward(`/page/${pageId}`);
    }, (nomatch) => {
      console.error('No matching route found', nomatch);
    });
  }
}

iOS Configuration:

On iOS, you can use either a Custom URL Scheme or Universal Links. Below is an example for a custom URL scheme.

1. Add Custom URL Scheme in config.xml:

<platform name="ios">
  <config-file parent="CFBundleURLTypes" target="*-Info.plist">
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>myapp</string> <!-- Your custom URL scheme -->
        </array>
      </dict>
    </array>
  </config-file>
</platform>

1. Testing Custom URL Scheme on iOS: With the above in place, calling myapp://page/123 from Safari or another app should open your Ionic app and navigate to the corresponding page.

Android Configuration:

On Android, deep links are usually configured via an intent filter in the Android manifest. You can add this configuration directly in config.xml to ensure it’s included in AndroidManifest.xml.

1. Add Intent Filter in config.xml:

<platform name="android">
  <edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:name='MainActivity']" mode="merge">
    <activity android:name="MainActivity">
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Replace host and pathPrefix with your desired configuration -->
        <data android:scheme="http" android:host="example.com" android:pathPrefix="/page" />
      </intent-filter>
    </activity>
  </edit-config>
</platform>

In this example, clicking a link like http://example.com/page/123 on an Android device should open your Ionic app if it’s installed and navigate to the specified page.

How It Works:

• When a user taps a deep link, the operating system checks if the app supports handling that URL.
• For iOS:

If using a custom URL scheme (myapp://), it directly opens the app if installed.

If using Universal Links, the link (https://example.com/page/123) must match associated domains set in apple-app-site-association.

• For Android:

The intent filter ensures that URLs matching the given scheme, host, and path are routed to your app.

Final Check:

• Ensure that your Deeplinks configuration matches the patterns defined in the config.xml.
• Test on a physical device or emulator by typing the URL in a browser or using command-line tools (like adb shell am start -a android.intent.action.VIEW -d "http://example.com/page/123" for Android).

Note: By carefully aligning the platform configurations and the routes defined in your Ionic/Angular application, your app will reliably open and navigate to the correct page whenever the specified URL is clicked.