Ошибки разбора шаблона: неизвестный элемент

Question

У меня есть компонент midi, определенный как:

@Component({
  selector: 'midi-midi-lib',
  templateUrl: './midi-lib.component.html'
})

export class MidiLibComponent implements OnInit {
}

У меня также есть домашний компонент, определенный как:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
}

, шаблон которого содержит разметку:

<midi-midi-lib></midi-midi-lib>

Компонент midilib включен в свой собственный модуль:

@NgModule({
  declarations: [
    MidiLibComponent,
  ],
  imports: [
  ],
  exports: [
    MidiLibComponent,
  ]
})
export class MidiLibModule { }

вместе с содержащим его прикладным модулем:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MidiLibModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Обратите внимание, что приведенный выше код отделен от многих другихкомпоненты и модули.

Дерево исходного кода выглядит следующим образом:

src
├── app
├── lib

с компонентом Midi в каталоге lib.

Если я затем вызываюмаршрут, определенный как:

{
  path: 'home',
  loadChildren: './views/home/home.module#HomeModule',
  data: {
    preload: true,
    delay: false
  }
},

с URL-адресом https://dev.thalasoft.com:4200/home, на странице отобразится сообщение об ошибке:

Error: Uncaught (in promise): Error: Template parse errors:\n'midi-midi-lib' is not a known element

Если я введу в терминале команду ng build --prod, тоЯ получаю ту же ошибку:

ERROR in : 'midi-midi-lib' is not a known element:
1. If 'midi-midi-lib' is an Angular component, then verify that it is part of this module.
2. If 'midi-midi-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <mat-card-content>
    <p>
      [ERROR ->]<midi-midi-lib></midi-midi-lib>
    </p>
  </mat-card-content>
")

Принимая во внимание, что если я вызову маршрут, определенный как:

{
  path: 'midi',
  component: MidiLibComponent
},

в файле app-routing.module с URL-адресом https://dev.thalasoft.com:4200/midi, то компонент будет найдени его содержимое отображается просто отлично.

Я под Angular 8.1.3

Answer 1

Поскольку вы лениво загружаете HomeComponent, MidiLibModule следует импортировать в HomeModule вместо AppModule. Также в Angular 8 рекомендуется использовать динамический импорт в вашем модуле маршрутизации, например:

{
  path: 'home',
  loadChildren: () => import('./views/home/home.module').then(mod => mod.HomeModule),
  data: {
    preload: true,
    delay: false
  }
},