How to use ADF components and services in an angular application?

Question

I have an angular application and I need to use ADF components and services to interact with Alfresco content services community edition 7.1.

So, I create a new angular application just to test, and install all dependencies and packages that are required to run ADF components and services, then I tried to call GroupService just to test and see if it works or not. But many errors occurred (I solved some, but still not working) so any IDEA of what I'm facing here ? Thank you in advance.

package.json

{
"name": "angular-adf-test",
"version": "0.0.0",
"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "watch": "ng build --watch --configuration development",
 "test": "ng test"
},
"private": true,
"dependencies": {
 "@alfresco/adf-content-services": "^4.9.0",
 "@alfresco/adf-core": "^4.9.0",
 "@alfresco/adf-extensions": "^4.9.0",
 "@alfresco/js-api": "^4.9.0",
 "@angular-material-components/datetime-picker": "^2.0.4",
 "@angular/animations": "~13.3.2",
 "@angular/cdk": "^13.3.2",
 "@angular/common": "~13.3.2",
 "@angular/compiler": "~13.3.2",
 "@angular/core": "~13.3.2",
 "@angular/flex-layout": "^13.0.0-beta.38",
 "@angular/forms": "~13.3.2",
 "@angular/material": "^13.3.2",
 "@angular/material-moment-adapter": "^13.3.2",
 "@angular/platform-browser": "~13.3.2",
 "@angular/platform-browser-dynamic": "~13.3.2",
 "@angular/router": "~13.3.2",
 "@mat-datetimepicker/core": "^9.0.43",
 "@mat-datetimepicker/moment": "^9.0.43",
 "@ngx-translate/core": "^14.0.0",
 "moment": "^2.29.2",
 "moment-es6": "^1.0.0",
 "ng2-pdf-viewer": "6.3.2",
 "pdfjs-dist": "^2.5.207",
 "rxjs": "~7.5.5",
 "tslib": "^2.3.1",
 "zone.js": "~0.11.5"
},
"devDependencies": {
 "@angular-devkit/build-angular": "~13.3.2",
 "@angular/cli": "~13.3.2",
 "@angular/compiler-cli": "~13.3.2",
 "@types/event-emitter": "^0.3.3",
 "@types/jasmine": "~4.0.2",
 "@types/node": "^17.0.23",
 "jasmine-core": "~4.0.1",
 "karma": "~6.3.17",
 "karma-chrome-launcher": "~3.1.1",
 "karma-coverage": "~2.2.0",
 "karma-jasmine": "~4.0.2",
 "karma-jasmine-html-reporter": "~1.7.0",
 "typescript": "~4.6.3"
}
}

module.app

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {MatAutocompleteModule} from '@angular/material/autocomplete';

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatMenuModule} from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatCardModule} from '@angular/material/card';
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';
import {MatExpansionModule} from '@angular/material/expansion';

import {MatChipsModule} from '@angular/material/chips';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatDialogModule} from '@angular/material/dialog';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';
import { TestComponent } from './test/test.component';
import { MatMomentDateModule } from "@angular/material-moment-adapter";
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatMomentDateModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,

    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Calling the groupService to test

 constructor(private groupService:GroupService) { }

  ngOnInit(): void {

    this.groupService.groupsApi.listGroups().then(
      (data:any) => {
        data = data.list.entries;
        console.log(data);


      },
      (error: HttpErrorResponse) => {
      console.log (error.name + ' ' + error.message);
      });

  }


 ``

ERRORS

Error: node_modules/@alfresco/adf-core/card-view/components/card-view-dateitem/card-view-dateitem.component.d.ts:19:10 - error TS2305: Module '"@mat-datetimepicker/core"' has no exported member 'MatDatetimepicker'.

19 import { MatDatetimepicker } from '@mat-datetimepicker/core'; ~~~~~~~~~~~~~~~~~

Error: node_modules/@alfresco/adf-core/viewer/components/pdf-viewer.component.d.ts:22:45 - error TS7016: Could not find a declaration file for module 'pdfjs-dist'. 'C:/Users/KAREK.mohamedamine/Desktop/AngularAdfTest/node_modules/pdfjs-dist/build/pdf.js' implicitly has an 'any' type. Try npm i --save-dev @types/pdfjs-dist if it exists or add a new declaration (.d.ts) file containing declare module 'pdfjs-dist';

22 import { PDFDocumentProxy, PDFSource } from 'pdfjs-dist'; ~~~~~~~~~~~~

Error: node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:35:9 - error TS2411: Property 'click' of type 'string | undefined' is not assignable to 'string' index type 'string'.

35 click?: string; ~~~~~

Error: node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:39:9 - error TS2411: Property 'enabled' of type 'string | undefined' is not assignable to 'string' index type 'string'.

39 enabled?: string; ~~~~~~~

Error: node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:40:9 - error TS2411: Property 'visible' of type 'string | undefined' is not assignable to 'string' index type 'string'.

40 visible?: string; ~~~~~~~

Error: node_modules/@alfresco/adf-extensions/lib/config/sidebar.extensions.d.ts:24:9 - error TS2411: Property 'visible' of type 'string | undefined' is not assignable to 'string' index type 'string'.

24 visible?: string; ~~~~~~~

Error: node_modules/@alfresco/adf-extensions/lib/config/viewer.extensions.d.ts:23:9 - error TS2411: Property 'visible' of type 'string | undefined' is not assignable to 'string' index type 'string'.

23 visible?: string; ~~~~~~~

Error: node_modules/@alfresco/js-api/typings/src/alfrescoApiClient.d.ts:17:8 - error TS1259: Module '"C:/Users/KAREK.mohamedamine/Desktop/AngularAdfTest/node_modules/@types/event-emitter/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

17 import ee from 'event-emitter'; ~~

node_modules/@types/event-emitter/index.d.ts:20:1 20 export = ee; ~~~~~~~~~~~~ This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

PS: I tried to change the version of some dependencies but Im kinda lost there