Utilizing ADF components and services within an Angular application: best practices explained

Seeking guidance with integrating ADF components and services into an Angular application to interact with Alfresco content services community edition 7.1.

I set up a new Angular application to test this integration, installed all necessary dependencies and packages for ADF, and attempted to call the GroupService for testing purposes. However, I encountered several errors (resolved some, but still facing issues). Any insights on what might be causing these problems?

Showcasing my package.json configuration:

{
"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"
},
"dependencies": { ... },
"devDependencies": { ... }
}

Here's a snippet from my module.app file presenting some of the imports required for using ADF components:


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

// List of many @angular/material imports...

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    // Angular Material modules listed here...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Attempting to utilize the groupService for testing purposes:


 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);
      });
  }
 

Pertinent Errors Encountered:

  • Error related to the absence of exported member 'MatDatetimepicker' in 'mat-datetimepicker/core'
  • Error regarding missing declaration file for 'pdfjs-dist'
  • Several TS2411 errors associated with property assignments in specific files
  • Mention of 'allowSyntheticDefaultImports' flag usage for default importing certain modules

Please note that attempts were made to adjust dependency versions without much success. Any advice or solutions would be greatly appreciated!

Answer №1

Apologies for the delay, but this information could be beneficial to others

If you encounter the error mentioned, make sure to include the following dependencies in your package.json file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying an expression within an ngFor loop based on checkbox selections in Angular 2

Here is the HTML code snippet I am working with: <tr *ngFor="let Resolution of Resolutions"> <td>{{Resolution.steps}}</td> <td> <div class="col-sm-10 "> <div *ngFor="let Suggestion of Resolution.Suggestio ...

Setting up CI/CD for a project involving an API, Angular application, and database on Azure App Services

In my VSTS local GIT REPO, I have a solution file with three main projects: an API, an Angular App, and a SQL Server DB Project. There are also some test projects included in the solution. I am currently facing challenges in setting up CI/CD for this setu ...

When launching a Docker container for an Angular project, an error occurred stating "Docker /docker-entrypoint.sh: 32: exec: yarn: not

I am attempting to develop an angular application within a docker container. After successfully building a docker image and spawning a container from it, I encountered the error message /docker-entrypoint.sh: 32: exec: yarn: not found when trying to execut ...

Is there a way to fetch a status code using Angular?

I'm fairly new to Angular and I want to create a simple application for practice where users can log in with just their username initially. My goal is to store the logged-in user if the backend returns an HTTP status of 200, but I'm struggling to ...

Prevent the 'unbound function' ESLint warning when supplying a static method reference to a superclass constructor in TypeScript

Looking to solve a technical problem in my code. I have a class that needs to call its superclass using a function passed as an argument. I specifically want to pass a static function from the same class: export abstract class ChildAdapter extends Adapter{ ...

What is the best way to send an observable back from a subscribe function to set up another subscription?

After brainstorming, I came up with this approach: fetchCastDetails(id:number, numCast:number){ return this.getCredits(id) .map( credits => credits.cast.length >= numCast ? credits.cast.slice(0,numCast) : credits.cast ) ...

Custom providers do not override Angular UrlResolver

In my Angular application, I am trying to implement a custom UrlResolver provider to incorporate cache breaking logic. I came across this question on Stack Overflow: . Unfortunately, it seems that overriding the default compiler UrlResolver using a provid ...

Tips for creating a test to choose a movie from the MuiAutocomplete-root interface

I am currently utilizing Material UI with React using Typescript and I am looking to create a test for the autocomplete functionality using Cypress. Here is the approach I have taken: Identifying the Autocomplete component and opening it, Choosing an opti ...

Encountering a blank page and slow loading when launching the VSCode debugger using VS Code version 1.76.1 and Chrome 111

Recently, I've encountered a problem with the VS Code debugger while trying to debug an Angular application. I created a new Angular app using the ng new command and made some changes to the ngOnInit function. When attempting to start the Chrome deb ...

Guide to integrating a legend with ngb-timepicker form?

Is there a way to add a specific tag to the fieldset of ngb-timepicker? I'm having trouble finding a solution for this. Has anyone else tried to do this before? ...

Struggling to store information in a MongoDB database within my MEAN Stack project

After successfully creating a collection for user LOGIN/LOGOUT and managing to store and retrieve data using Express app and mongoose, I encountered an issue when trying to create another collection. Despite successfully creating the collection, the data w ...

Triggering React State Changes to Render on Second Click

After much trial and error, I am still unable to solve this puzzle. Despite successfully retrieving a list from an API, parsing it, and pushing it into another array in my state, the render does not reflect the data properly. The logic seems sound as per ...

Error alert: TypeScript typings issue - Naming conflict with Promise / Failure to locate name Promise

I am currently working on a client/server JavaScript application and I am facing a significant issue with Promises. It appears that they are either undefined or duplicated, and this problem seems to be related to the @types package. npm install --save @ty ...

The absence of transpiled Typescript code "*.js" in imports

Here is an example of the code I am working with: User.ts ... import { UserFavoriteRoom } from "./UserFavoriteRoom.js"; import { Room } from "./Room.js"; import { Reservation } from "./Reservation.js"; import { Message } from ...

The initialization of public variables in the ngOnInit function is currently set

I am encountering an issue with public variables in my Component that are linked to ThreeJs. When I try to utilize them within the ngOnInt method, I am running into an error. Variables export class CustomizerComponent implements OnInit { public threeJsV ...

Is your current Angular 2 project in need of data retrieval from a SQL server?

Currently, I am facing a challenge with my Angular 2 application as I am unable to connect and send queries to an existing SQL server. It has come to my attention that in order to achieve this, I need to create a RESTful API using 'express.js'. I ...

A list is received as a parameter by the component

I am encountering an error while trying to pass a list of objects to my component. The specific error message is: compiler.es5.js:1694 Uncaught Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined (" </a& ...

What is the method for retrieving the current date based on abbreviated day names?

Within my web service, there is an API that provides information on the days when a shop is available for delivery. The API returns an object containing an ID (which is necessary to obtain hours based on the selected day) and the abbreviated day name (in I ...

Transforming a string into key-value pairs using Typescript

Is there a way to transform the given string into key-value pairs? TotalCount:100,PageSize:10,CurrentPage:1,TotalPages:10,HasNext:true,HasPrevious:false ...

I'm having trouble with npm install, it's not working as expected

After downloading node.js, I encountered errors when trying to run the CLI command npm install -g @angular/cli: npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/@angular%2fcli failed, reason: getaddrin ...