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

axzmvihb  于 2023-05-08  发布在  TypeScript
关注(0)|答案(1)|浏览(156)

我有一个Angular 的应用程序,我需要使用ADF组件和服务与Alfresco内容服务社区版7.1进行交互。
因此,我创建了一个新的angular应用程序来测试,并安装了运行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 import { MatDatetimepicker } from '@mat-datetimepicker/core';~~~~~~~~~~~~~~~~~
错误:node_modules/@alfresco/adf-core/viewer/components/pdf-viewer.component.d.ts:22:45 -错误TS 7016:未能找到模块“dfjs-dist”的声明文件。'C:/Users/KAREK.mohamedamine/Desktop/AngularAdfTest/node_modules/pdfjs-dist/build/pdf.js'隐式地具有'any'类型。如果npm i --save-dev @types/pdfjs-dist存在,请尝试使用它,或者添加包含declare module 'pdfjs-dist';的新声明(.d.ts)文件
22 import { PDFDocumentProxy,PDFSource } from 'pdfjs-dist';~~~~~~~~~~~~
错误:node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:35:9 -错误TS 2411:字符串类型的“click”属性|“undefined”不能分配给“string”索引类型“string”。
35 click?:string;~~~~~
错误:node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:39:9 -错误TS 2411:类型为“string”的属性“enabled|“undefined”不能分配给“string”索引类型“string”。
39是否启用?:string; ~~~~~~~
错误:node_modules/@alfresco/adf-extensions/lib/config/action.extensions.d.ts:40:9 -错误TS 2411:类型“string”的属性“visible”|“undefined”不能分配给“string”索引类型“string”。
40可见?:string; ~~~~~~~
错误:node_modules/@alfresco/adf-extensions/lib/config/sidebar.extensions.d.ts:24:9 -错误TS 2411:类型“string”的属性“visible”|“undefined”不能分配给“string”索引类型“string”。
24可见?:string; ~~~~~~~
错误:node_modules/@alfresco/adf-extensions/lib/config/viewer.extensions.d.ts:23:9 -错误TS 2411:类型“string”的属性“visible”|“undefined”不能分配给“string”索引类型“string”。
23可见?:string; ~~~~~~~
错误:node_modules/@alfresco/js-api/typings/src/alfrescoApiClient.d.ts:17:8 -错误TS 1259:模块“C:/Users/KAREK.mohamedamine/Desktop/AngularAdfTest/node_modules/@types/event-emitter/index”只能使用“allowSyntheticDefaultImports”标志进行默认导入
17从“事件发射器”导入ee;~~
node_modules/@types/event-emitter/index.d.ts:20:1 20 export = ee;~~~~~~~~~~~~~此模块使用“export ='”声明,并且只能在使用“allowSyntheticDefaultImports”标志时与默认导入一起使用。

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

iqxoj9l91#

回复晚了,但可能对一些人有用
正如错误提示的那样,您需要在package.json中添加以下内容作为依赖项

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

相关问题