如何在有角度的应用程序中使用ADF组件和服务

Question

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

因此，我创建了一个新的angular应用程序来测试，并安装运行ADF组件和服务所需的所有依赖项和包，然后我尝试调用GroupService来测试它是否工作。但发生了很多错误(我解决了一些，但仍然没有工作(，所以我对这里面临的问题有什么想法吗？提前谢谢。

软件包.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"
}
}

模块.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 date item.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.dts:22:45-错误TS7016:找不到模块"pdfjs-dist"的声明文件C：/Users/KAREK.mohamadamine/Desktop/AngularAdfTest/node_modules/pdfjs-dist/build/pdf.js隐式地具有"any"类型。如果存在npm i --save-dev @types/pdfjs-dist，请尝试它，或者添加一个包含declare module 'pdfjs-dist';的新声明(.d.ts(文件

22从"pdfjs-dist"导入｛PDFDocumentProxy，PDFSource｝；~~~~~~

错误：node_modules/@alfresco/adf extensions/lib/config/action.extensions.d.ts:35:9-错误TS2411:类型为"string|undefined"的属性"click"不可分配给索引类型为"string"的"string"。

35点击？：一串~~~~

错误：node_modules/@alfresco/adf extensions/lib/config/action.extensions.d.ts:39:9-错误TS2411:类型为"string|undefined"的属性"enabled"不可分配给索引类型为"string"的"string"。

39已启用？：一串~~~~~~

错误：node_modules/@alfresco/adf extensions/lib/config/action.extensions.d.ts:40:9-错误TS2411:类型为"string|undefined"的属性"visible"不可分配给索引类型为"string"的"string"。

40可见？：一串~~~~~~

错误：node_modules/@alfresco/adf-extensions/lib/config/sidear.extensions.d.ts:24:9-错误TS2411:类型为"string|undefined"的属性"visible"不可分配给索引类型为"string"的"string"。

24可见？：一串~~~~~~

错误：node_modules/@alfresco/adf extensions/lib/config/viewer.extensions.d.ts:23:9-错误TS2411:类型为"string|undefined"的属性"visible"不可分配给索引类型为"string"的"string"。

23可见？：一串~~~~~~

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

17从"事件发射器"导入ee；~~

node_modules/@types/event-emitter/index.d.ts:20:120出口=ee；~~~~~~~~~~~~此模块使用"export="声明，并且在使用"allowSyntheticDefaultImports"标志时只能与默认导入一起使用。

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

Answer 1

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

正如错误所示，您需要在您的package.json中添加以下内容作为依赖项

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