Through some trial and error, I was able to identify the issue.
When placing components in the main module's bootstrap array, Angular expects every single one to be displayed on the page. These components in the bootstrap array are not optional; they are mandatory. If you fail to include both components in the HTML files, an exception will be thrown (so make sure to check the console for any errors). The difference lies in the fact that if you miss adding GalleryThumbnail, the error occurs only after Angular has already rendered AppComponent, making it appear that everything is functioning smoothly when in reality there is an underlying issue. While the page may seem functional, there is no guarantee that it will work correctly.
The problem arises when AppComponent is omitted. This component is the first one added to the bootstrap array in your module, prompting Angular to search for <app-root> on the page. When this element is not found, an exception is thrown and the bootstrapping process is halted abruptly, preventing the rendering of GalleryThumbnail.
In summary, the bootstrap array cannot be used to select between root components. To only initialize one of them, you must:
- Rename
AppComponent to something else (perhaps HomeComponent)
- Create a new
AppComponent and in its template, render either HomeComponent or GalleryThumbnail based on specific criteria (such as the page URL or a global variable included in the .cshtml page)
Another approach is to implement routing to determine which component to display, by adding a RouteOutlet to the new AppComponent's template instead of using ngIf or ngSwitch to switch between components. This method ensures that only one .cshtml file is required, and Angular will render the appropriate component based on the URL. This approach is recommended when working with multiple pages in Angular, given that it's designed for developing SPAs. While slightly more complex compared to using ngIf in a simple scenario, it offers a more scalable solution when planning for future growth and additional routes.
If you opt to switch to this approach, ensure that you add routes in your ASP.NET Core app that align with those defined in Angular, and that they all return your Home/Index.cshtml page.
I trust this guidance proves beneficial to you.