如何在Angular应用程序中使用ADF组件和服务？

Question

我有一个 Angular 应用程序，需要使用 ADF 组件和服务与 Alfresco 内容服务社区版本 7.1 进行交互。

因此，我创建一个新的角度应用程序只是为了测试，并安装运行 ADF 组件和服务所需的所有依赖项和包，然后我尝试调用 GroupService 只是为了测试并查看它是否有效。但是发生了很多错误（我解决了一些错误，但仍然不起作用），所以我在这里面临的任何想法吗？ 先感谢您。

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 { }

调用 groupService 进行测试

 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

错误：node_modules/@alfresco/adf-core/card-view/components/card-view-dateitem/card-view-dateitem.component.d.ts:19:10 -错误 TS2305：模块“@mat-datetimepicker/core”没有导出成员“MatDatetimepicker”。

19 从 '@mat-datetimepicker/core' 导入 { MatDatetimepicker }; ~~~~~~~~~~~~~~~~~~

错误：node_modules/@alfresco/adf-core/viewer/components/pdf-viewer.component.d.ts:22:45 - 错误 TS7016：可以找不到模块“pdfjs-dist”的声明文件。 'C:/Users/KAREK.mohamedamine/Desktop/AngularAdfTest/node_modules/pdfjs-dist/build/pdf.js' 隐式具有“any”类型。 尝试npm i --save-dev @types/pdfjs-dist（如果存在）或添加包含声明模块'pdfjs-dist'的新声明（.d.ts）文件；代码>

22 从 'pdfjs-dist' 导入 { PDFDocumentProxy, PDFSource }; ~~~~~~~~~~~~

错误：node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:35:9 - 错误 TS2411：“字符串”类型的属性“单击” | undefined' 不能分配给 'string' 索引类型 'string'。

35 点击？：字符串； ~~~~~

错误：node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:39:9 - 错误 TS2411：“字符串”类型的属性“已启用”| undefined' 不能分配给 'string' 索引类型 'string'。

39 启用？：字符串； ~~~~~~~

错误：node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:40:9 - 错误 TS2411：“字符串”类型的属性“可见”| undefined' 不能分配给 'string' 索引类型 'string'。

40 可见？：字符串； ~~~~~~~

错误：node_modules/@alfresco/adf-extensions/lib/config/sidebar.extensions.d.ts:24:9 - 错误 TS2411：“字符串”类型的属性“可见”| undefined' 不能分配给 'string' 索引类型 'string'。

24 可见？：字符串； ~~~~~~~

错误：node_modules/@alfresco/adf-extensions/lib/config/viewer.extensions.d.ts:23:9 - 错误 TS2411：“字符串”类型的属性“可见”| undefined' 不能分配给 'string' 索引类型 'string'。

23 可见？：字符串； ~~~~~~~

错误：node_modules/@alfresco/js-api/typings/src/alfrescoApiClient.d.ts:17:8 - 错误 TS1259：模块 '"C:/Users/KAREK.mohamedamine/Desktop/AngularAdfTest /node_modules/@types/event-emitter/index"' 只能使用默认导入'allowSyntheticDefaultImports' 标志

17 从 'event-emitter' 导入 ee； ~~node_modules/@types/event-emitter/index.d.ts

:20:1 20 出口=ee； ~~~~~~~~~~~~ 该模块是使用“export =”声明的，并且只能在使用“allowSyntheticDefaultImports”标志时与默认导入一起使用。

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

Answer 1

迟到回复，但可能对某些人有用

，因为错误表明您需要在软件包中添加以下内容。

@mat-datetimepicker/core
pdfjs-dist
@alfresco/adf-extensions
@alfresco/js-api
@types/event-emitter