ASP.NET MVC Core 2 и Angular 5 Beginner - компонент не отображается без корневого каталога приложения

Поэкспериментировав, я нашел проблему.

Когда вы помещаете компоненты в массив bootstrap основного модуля, Angular ожидает, что все из них будет отображаться на странице. Компоненты в массиве bootstrap не являются необязательными, но обязательными. Фактически, за исключением случаев, когда вы добавляете оба компонента в файлы HTML, вы получаете исключение (проверьте свою консоль). Разница в том, что, когда вы просто пропускаете GalleryThumbnail, ошибка возникает после того, как Angular отрендерил AppComponent, что позволяет вам полагать, что ничего не случилось, хотя на самом деле это было. Да, страница вроде бы работоспособна, хотя я бы не поверил, что она будет работать правильно.

Проблема, когда вы не включаете AppComponent, заключается в том, что в вашем модуле этот компонент является первым, добавленным в массив начальной загрузки, поэтому Angular пытается найти <app-root> на странице. Когда этого не происходит, он запускает исключение, и начальная загрузка внезапно завершается, поэтому он никогда не сможет отобразить GalleryThumbnail.

В заключение, вы не можете использовать массив начальной загрузки для выбора между корневыми компонентами. Если вы хотите инициализировать только один из них, вы должны:

1. Измените имя AppComponent на другое (HomeComponent?)
2. Создайте новый AppComponent, и в его шаблоне вы просто визуализируете либо HomeComponent, либо GalleryThumbnail, в зависимости от того, какие критерии вы хотите (URL страницы, некоторая глобальная переменная, которую вы добавляете на страницу .cshtml ...)

Вы также можете использовать маршрутизацию, чтобы определить, какой компонент показывать, добавив RouteOutlet в этот новый шаблон AppComponent вместо использования ngIf или ngSwitch для выбора компонента для рендеринга. Таким образом, у вас есть только один файл .cshtml, и на основе URL-адреса Angular будет отображать тот или иной компонент. Это должен быть ваш подход при работе с различными страницами в Angular, поскольку это структура, предназначенная для создания SPA. Это немного сложнее, чем просто использовать ngIf в этом простом случае, но это также гораздо более масштабируемое решение, так что это определенно правильный путь, если вы планируете расширять свое приложение и иметь больше маршрутов в будущем.

Если вы решите изменить свой подход к этому, убедитесь, что вы добавляете маршруты в основное приложение ASP.NET, которые соответствуют тем, которые определены в Angular, и что все они возвращают вашу страницу Home / Index.cshtml.

Надеюсь, это поможет.