Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Looking to integrate the Nuxeo ClientSdk with my Angular 6 client to consume its REST API, but facing issues due to the lack of typescript definitions for this JavaScript package.

Tried importing the library into my project using the following code snippet within my custom service:

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable, of} from 'rxjs';
import { Http, Response , RequestOptions , Headers } from '@angular/http';
import { Data } from './model/genericData';
import * as NuxeoSdk from 'nuxeo';

const username = 'Administrator';
const password = 'Administrator';
const httpOptions = {
  headers : new HttpHeaders({
    'Authorization' : 'Basic ' + btoa(username + ':' + password),
    'X-NXDocumentProperties' : '*'
  })
};

/*const headers = new HttpHeaders();
headers.append('Authorization', 'Basic ' + btoa('Administrator:Administrator'));
headers.append('X-NXDocumentProperties', '*');*/
const baseAddr = 'http://dev2017-publicwebserver-alb-59603702.eu-west-1.elb.amazonaws.com/nuxeo/';
const serviceApiEndpoint = 'api/v1/';
const methodId = 'id/';
const childrenQuery = '/@children?';
const RootId = '1ca2e2f5-4e9e-4c98-afc6-95b467c359fc';

@Injectable({
  providedIn: 'root'
})

export class NuxeoService {
  constructor(private http: HttpClient) {}

  getJsonById(id: string): Observable<Data> {

    // this.http.get(this.baseAddr + this.methodId + id, httpOptions).subscribe(res => );
    return this.http.get<Data>(baseAddr + serviceApiEndpoint + methodId + id, httpOptions);
  }

  getRoot(): Observable<Data> {
    // this.http.get(this.baseAddr + this.methodId + id, httpOptions).subscribe(res => );
    return this.http.get<Data>(baseAddr + serviceApiEndpoint + methodId + RootId, httpOptions);
  }

  getDomains(): Observable<Data> {
    return this.http.get<Data>(baseAddr + serviceApiEndpoint + methodId + RootId + childrenQuery, httpOptions);
  }

  getChildrenById(id: string): Observable<Data> {
    return this.http.get<Data>(baseAddr + serviceApiEndpoint + methodId + id + childrenQuery, httpOptions);
  }

  getNuxeoResource(): void {
    const nuxeo = new NuxeoSdk({
      baseURL: baseAddr,
      auth: {
       method: 'basic',
       username: username,
        password: password
      }
    });

    nuxeo.request('path/')
      .get()
      .then(function (doc) {
        console.log('doc-> ', doc);
      });
  }
}

Encountered an error while running the Angular app:

index.js:1 Uncaught ReferenceError: process is not defined
    at Object../node_modules/promise-queue/index.js (index.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/nuxeo/lib/upload/batch.js (batch.js:5)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/nuxeo/lib/operation.js (operation.js:7)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/nuxeo/lib/nuxeo.js (nuxeo.js:4)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/nuxeo/lib/index.js (index.js:1)
    at __webpack_require__ (bootstrap:76)
./node_modules/promise-queue/index.js   @   index.js:1
__webpack_require__ @   bootstrap:76
./node_modules/nuxeo/lib/upload/batch.js    @   batch.js:5
__webpack_require__ @   bootstrap:76
./node_modules/nuxeo/lib/operation.js   @   operation.js:7
__webpack_require__ @   bootstrap:76
./node_modules/nuxeo/lib/nuxeo.js   @   nuxeo.js:4
__webpack_require__ @   bootstrap:76
./node_modules/nuxeo/lib/index.js   @   index.js:1
__webpack_require__ @   bootstrap:76
./src/app/nuxeo.service.ts  @   DynamicFlatNode.ts:8
__webpack_require__ @   bootstrap:76
./src/app/app.module.ts @   app.component.ts:176
__webpack_require__ @   bootstrap:76
./src/main.ts   @   environment.ts:15
__webpack_require__ @   bootstrap:76
0   @   main.ts:12
__webpack_require__ @   bootstrap:76
checkDeferredModules    @   bootstrap:43
webpackJsonpCallback    @   bootstrap:30
(anonymous) @   main.js:1

Seems like there's an issue in the way I'm importing the library. Any suggestions on fixing this problem?

The library I intend to import includes:

const Nuxeo = require('./nuxeo');
const Base = require('./base');
const Operation = require('./operation');
const Request = require('./request');
const Repository = require('./repository');
...
(module.exports section omitted for brevity)
...
Nuxeo.registerUnmarshaller('user', userUnmarshaller);
Nuxeo.registerUnmarshaller('group', groupUnmarshaller);
// make the WorkflowsUnmarshaller work for Nuxeo 7.10
Nuxeo.registerUnmarshaller('worflows', workflowsUnmarshaller);

module.exports = Nuxeo;

Answer №1

If you want to see how the nuxeo CLI generates a service for Angular projects during the bootstrapping process, take a closer look. To summarize, it includes the following code snippet when creating the client :

  Object.getOwnPropertyNames(Nuxeo.prototype).forEach(name => {
      if (/^_|constructor/.test(name)) {
          return;
      }

      NuxeoService.prototype[name] = function (...args: any[]) {
          return nuxeo[name].apply(nuxeo, args);
      };
  });

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

Finding it difficult to grasp the concept of enabling CORS through an ajax request

I'm struggling to figure out how to enable CORS while using Ajax to send data to a remote server on a different domain. Despite researching extensively and reading numerous Stackoverflow threads, I can't seem to make sense of it all. I understand ...

Searching for various object values within an array and then adding two properties together in JavaScript

I am working with an array of objects that require me to analyze two properties in order to calculate a value. let data = [ { NodeId: "9837f279", NodeName: "Node1", summary: { current: 50, limit: 75 ...

What could be the reason for this function failing to calculate the mean of a set of data points?

I'm facing a challenge with this beginner problem. "A task for you: Calculate the average score of a class whose test scores have been graded by a teacher. Your mission is to complete the getAverage function, which receives an array of test sco ...

Why is there a CSS reference failure in Express and how can it be resolved?

Below, you'll find a simple express server I've put together: // check out my basic Express server var express = require("express"); var app = express(); var bodyparser = require("body-parser"); app.use("/public/", express.static("./public/")); ...

Securing API access by limiting it to verified domains with Express.js

I am currently enhancing the security of my Node.js/Express.js application by implementing restrictions on access to an authlist (authorized list) of domains. Note: The opposite of an authlist is a denylist. Overview: Users are able to create a Proje ...

Managing the behavior of screen readers when interacting with forms

I have a form in my Angular 2 application with input fields. The JAWS 18 screen reader reads the input fields one by one when the page is loaded. I want to customize this behavior so that the screen reader only mentions the form and then stops. I tried u ...

What is the best way to display data in a React application depending on a boolean value?

Being new to React and JavaScript, I am currently struggling with boolean logic. I have a function called Profile which includes two constant methods that each return different data. function Profile(props) { const returnNormalProfile() const return ...

Guidelines for accessing the Coinbase exchange API from a localhost

Following the instructions in the Coinbase Cloud documentation, I tried running this code on the client side using JavaScript: const options = { method: 'GET', headers: { Accept: 'application/json', 'cb-access-key&ap ...

Bidirectional data binding in Autocomplete component's matInput

Utilizing a material autocomplete input to search for an article in a database, I originally had a standard input in a table column with the ngModel directive for two-way databinding. To switch this input to an autocomplete input, I followed Angular's ...

Encountering the error message: "Unable to access the 'valid' property of an undefined object in Angular 5 template form"

I want to build a Model-Driven Angular template for registering new users. I've set up two main files for this: admin-register.component.html admin-register-form.component.ts However, when I try to access the page with the registration form, I encou ...

What is the best way to include a new user in the memory database when there is no database or storage back-end?

During an online test, I was given the task of adding a user to a database stored in memory. The request body required JSON formatting as shown below: { "id": "aabbbccddeeefff", "name": "User One", "hobbies": [ "swim", "sing", "workout" ] } (Users ...

The data from the method in the Vue.js component is not displaying as expected

Currently diving into Vue.JS (2) and exploring the world of components. My current challenge involves using a component within another component, grabbing data from a data method. Here's what I have so far: HTML <div id="root"> <h1> ...

What is the best way to align a popup window with the top of the main window?

I have successfully created a simple lightbox feature where a popup window appears when a thumbnail is clicked. My question is, how can I use jQuery to detect the top position so that the popup div always appears around 200px from the top of the window? $ ...

convert an array of hexadecimal colors into an array of RGB colors

I am trying to convert an array of hex colors to RGB values using a custom function. The array looks like this: var hexColors = [ "#ffffff", "#ffffff", "#ffffff", "#f3f3f3", "#f3f3f3", "#f3f3f3"]; The desired output is: var rgbCo ...

Utilizing React: Incorporating classes to elements with innerHTML

Is there an efficient way to determine if a table cell contains innerHTML and apply a class accordingly? I have a large table with numerous cells that need to be handled dynamically. The cell content is set using dangerouslySetInnerHTML, as shown below: ...

Generating a safe POST connection with express.js

Is there a simple method to generate a link for submitting a POST request using Express.js or a plugin? This approach can also be employed to enhance security for important actions like user deletion, including CSRF protection. In some PHP frameworks lik ...

Issues are arising with Jquery Scripts when running through Selenium in IE 9, resulting in the error message SCRIPT5009: '$' is undefined. However, these scripts are functioning correctly when executed directly in the web browser

While using Selenium, the code below is causing issues as it is not functioning properly. An error SCRIPT5009: '$' is undefined is being thrown in IE 9. However, if the code is executed in a web browser console after removing the "\" sign, i ...

Disregarding NPM dependencies for individual packages

I need to include a package (d3.js) in my project's package.json. However, when I run npm install, I do not want npm to install any dependencies related to d3.js or run any install scripts for it. Essentially, I want npm to only fetch and unpack the p ...

creation of objects using constructors in Node.js

As I delve into the world of Node.js, a burning question has arisen - how can I make a function accept multiple strings in the form of an array? Picture this scenario: export default (config: Config) => { return { target: 'https://google.com ...

Failure to trigger a follow-up function in webSQL transaction's success callback

Review the code below. I have called setQuestion() within the successCallBack of db.transaction but am encountering an error: Uncaught TypeError: this.setQuestions is not a function. Can you spot any issues in my code? game.module( "game.scenes.scene" ) ...