Как решить проблему с подключением фрагмента HTML к основному HTML используя ng-include?

У меня есть один большой HTML файл, который я решил декомпозировать(разбить на несколько не больших логических HTML фрагментов) и подключить их все одном файле. Для этого я решил использовать компонент 'ng-include', вот фрагмент кода, как я его вызываю из глобального HTML файла app.component.html: ...

<ng-include src="'connect.html'"></ng-include>

при запуске, я получаю такую ошибку....

message: "\u001b[96msrc/app/app.component.html\u001b[0m:\u001b[93m104\u001b[0m:\u001b[93m13\u001b[0m - \u001b[91merror\u001b[0m\u001b[90m NG8001: \u001b[0m'ng-include' is not a known element:\n1. If 'ng-include' is an Angular component, then verify that it is part of this module.\n2. If 'ng-include' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n\n\u001b[7m104\u001b[0m             <ng-include src=\"'connect.html'\"></ng-include>\n\u001b[7m   \u001b[0m \u001b[91m            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\u001b[0m\n\n  \u001b[96msrc/app/app.component.ts\u001b[0m:\u001b[93m17\u001b[0m:\u001b[93m16\u001b[0m\n    \u001b[7m17\u001b[0m   templateUrl: './app.component.html',\n    \u001b[7m  \u001b[0m \u001b[96m               ~~~~~~~~~~~~~~~~~~~~~~\u001b[0m\n    Error occurs in the template of component AppComponent.\n"

если я пробую такой вариант, то у меня ни чего не происходит, фрагмент не подключен (в данном случае ошибки нет) ...

<div ng-include src="'connect.html'"></div>

Файл connects.html расположен, там же где основной HTML app.component.html

Мои текущие окружение:

Angular CLI: 12.2.10
Node: 16.11.1 (Unsupported)
Package Manager: npm 8.1.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.10 (cli-only)
@angular-devkit/core         12.2.10 (cli-only)
@angular-devkit/schematics   12.2.10 (cli-only)
@schematics/angular          12.2.10 (cli-only)

Я думаю что надо в файл app.component.ts добавить модуль ng-include...? но я ни где не могу найти информации об этом...

Как можно решить эту проблему с загрузкой HTML кода в основной HTML код с использованием ng-include?

Смотрел сюда:

• https://stackoverflow.com/questions/13943471/what-is-the-correct-syntax-of-ng-include
• https://www.w3schools.com/angular/ng_ng-include.asp
• http://angular-doc.herokuapp.com/api/ng.directive:ngInclude

В официальной документации, к сожалению то же не нашел ответ на свой вопрос...

• https://code.angularjs.org/1.1.0/docs/api/ng.directive:ngInclude#Usage
• https://docs.angularjs.org/api/ng/directive/ngInclude

ЗЫ. Вот app.module.ts с добавленным CUSTOM_ELEMENTS_SCHEMA, теперь ошибку не выдает, но и указанный HTML не подгружается...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component';
import { HttpClientModule} from '@angular/common/http'
import { MatTableModule } from '@angular/material/table'
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import {MatGridListModule} from '@angular/material/grid-list';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatTableModule,
    MatTableModule,
    MatCardModule,
    MatButtonModule,
    MatGridListModule,
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})

export class AppModule { }

Спасибо за помощь!

Update: Ответ привел снизу.