How to define multiples standalone components as possible root element in angular 17

Question

I have a legacy application where some pages are being migrated to one angular 17 application.

The routing is not handled by angular. So each page navigation creates a new angular application. Depending the page, the root element will be different.

I managed to create a main.ts like de following:

bootstrapApplication(CustomComponent)
  .catch(() => bootstrapApplication(AnotherComponent))
  .catch((err) => console.error('Error bootstrapping application', err));

That works, but I see an error in console when the first component is not on the page.

NG05104: The selector "CustomComponent" did not match any elements. Find more at https://angular.io/errors/NG05104

As far as I know the app works correctly but I didn't find a way avoid the error message.

So the question is, which is the correct way to do it? And if there is no other way, which are the possible problems with my approach?

Clarification:

The site is a legacy PHP application. Each entry page have some PHP code that creates a menu to navigate the page, register some statistics, and some characteristics of each page.

So when a user navigate from one page to another they are actualy loading a completely new PHP page with a full reload.

I am adding in each of the pages a common block of Javascript to load the Angular application. The code in one page is:

<app-custom-component></app-custom-component>
<script src="/angular-app/browser/polyfills.js"></script>
<script src="/angular-app/browser/main.js"></script>
<link rel="stylesheet" href="/angular-app/browser/styles.css">

While in another page is:

<app-another-component></app-another-component>
<script src="/angular-app/browser/polyfills.js"></script>
<script src="/angular-app/browser/main.js"></script>
<link rel="stylesheet" href="/angular-app/browser/styles.css">

Where the only difference is the root component. But the angular application, that is bootstraped every time, is the same.