Блог

Я только начал изучать Angular (v11.0.2 в моем исходном коде), и я столкнулся с поведением, которое я не понял.

Проблема:

Клонировать структуру и код приложения в StackBlitz (основная версия 10, поведение такое же):

смотрите код (после загрузки перейдите вручную к URL / workspace)

Я пытаюсь использовать SubcompComponent in WorkspaceComponent (см. HTML-шаблон) для отложенной загрузки WorkspaceModule (см. AppRoutingModule И WorkspaceRoutingModule ). Метаданные selector указаны правильно. Но я действительно не могу понять, что я делаю не так.

Вопрос: Почему компонент не загружается?

Что я пытался сделать:

1. Добавление SubcompComponent в declarations и exports в WorkspaceModule (см. code workspace.module.ts)
2. Также я попытался использовать SharedModule (см. workspace.module.ts тоже (прокомментированные строки)), как указано в модулях совместного использования руководства
3. Изучил основные статьи документации, в том числе NgModule FAQ Отложенная загрузка NgModules и многие другие.

Наверное, я не вижу леса за деревьями? Есть идеи?

Дополнительные:

Пожалуйста, предложите рекомендации по более детальной отладке (почему конкретный компонент загружается сейчас и когда). Пока я использую только Augury (Chromium) и пишу в VS Code.

Заранее благодарю вас и прошу прощения за мой английский.

Рабочая вилка здесь https://stackblitz.com/edit/angular-ivy-jaxkll?file=src/app/workspace/workspace.component.html

1. У вас должны быть оба компонента в вашем workspace модуле (вас не было)
2. Вы также должны импортировать свой модуль маршрутизации (вы этого не делали)

    @NgModule({
     imports: [CommonModule,WorkspaceRoutingModule],
     declarations: [SubcompComponent,WorkspaceComponent],
     exports: [SubcompComponent]
   })
   export class WorkspaceModule {}