Nuxeo client breaking Angular 7 app

[raymond10]

Hi,

Unable to run angular 7 app after implements nuxeo libs and service. It breaks the app litteraly on any browser (FF65, Chromium73 and latest Safari).

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

Thanks for help

[troger]

Hi,

Could you provide us with a minimal sample Angular 7 project showing the issue, please?

[raymond10]

Hi Thomas,

It's look like nuxeo-js-client use old webpack module. Here is my code. NuxeoService

import {Injectable} from '@angular/core';
import {ConfigService} from '@app/technique/@system/config/config.service';
import {Observable} from 'rxjs';
const Nuxeo = require('nuxeo');

@Injectable()
export class NuxeoSocleService {
    // XXX Declared here to prevent from mixin style compilation error when using the service.
    login: any;
    operation: any;
    request: any;
    repository: any;
    batchUpload: any;
    users: any;
    groups: any;
    directory: any;
    workflows: any;
    requestAuthenticationToken: any;
    // ---

    private nuxeoClient: any;

    // Path API, URL et chemin du Workspace Nuxeo
    private nuxeoApi = '/api/v1';
    private nuxeoPath = this.config.variables.nuxeoPATH;
    private nuxeoUri = this.config.variables.nuxeoURI;
    private pdfDir = this.config.variables.pdfDIR;
    private pdfUri = this.config.variables.pdfURI;

    // Ici no définit le header d'appel de l'API
    private defaultHeader = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'PUT,DELETE,POST,GET,OPTIONS',
        'Repository': 'default',
        'enrichers.document': 'thumbnail,preview',
        'properties': '*',
    };

    constructor(private config: ConfigService) {
        this.nuxeoClient = new Nuxeo({
            baseURL: this.nuxeoUri,
            apiPath: this.nuxeoApi,
            // Activation du CORS
            headers: this.defaultHeader,
        });

        // Mixin Nuxeo JS Client prototype with NuxeoService to use it the same way.
        Object.getOwnPropertyNames(Nuxeo.prototype).forEach(name => {
            if (/^_|constructor/.test(name)) {
                return;
            }

            NuxeoSocleService.prototype[name] = function (...args: any[]) {
                return this.instance[name].apply(this.instance, args);
            };
        });
    }

    // Restitue le fichier blob
    private getRealBlob(doc: any): Observable<any> {
        let result = {};
        let blob;
        doc.blob().then((res: any) => {
            blob = res;
            result = blob;
        }).catch((error) => {
            console.log('Erreur lors de la création du blob :' + error);
            throw error;
        });
        return Observable.of(result);
    }

    /*On teste la connection au serveur nuxeo après instanciattion
         du service Nuxeo
    */
    public nuxeoClientConnect(): void {
        this.nuxeoClient.connect()
            .then((client: any) => {
                if (client.connected) {
                    console.log('Connection nuxeo OK! ', client.user, ' - VersionServer: ', client.serverVersion);
                }
            }).catch((err) => {
            console.log('Connection nuxeo KO!');
            throw err;
        });
    }
}

Here is how I register my service in app.module.ts

...
import {NuxeoSocleService} from '@app/technique/nuxeo/nuxeo-socle.service';
...

@NgModule({
  declarations: [
    AppComponent,
  ],
  /* Cette entrée est spécifique aux modal*/
  entryComponents: [],
  imports: [
    ...
    }),
  ],
  providers: [NuxeoSocleService],
  bootstrap: [AppComponent],
})
export class AppModule { }

I want to test connection, so in my app.component I add this :

import {NuxeoSocleService} from '@app/technique/nuxeo/nuxeo-socle.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit, OnDestroy {
constructor(private nuxeoService: NuxeoSocleService) {
this.nuxeoService.nuxeoClientConnect();
  }

When I run the apps, we are errors above.

Thanks

[raymond10]

My package.json is here :

{
  "name": "ng2-template",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "node ./node_modules/.bin/ng build --prod --aot=false --buildOptimizer=false --outputHashing none --baseHref=/ng2-template/ --deployUrl /ng2-template/",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ng2-template --fix",
    "lint:ci": "npm run lint",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.3",
    "@angular/cdk": "^7.3.0",
    "@angular/common": "^7.2.3",
    "@angular/compiler": "^7.2.3",
    "@angular/core": "^7.2.3",
    "@angular/forms": "^7.2.3",
    "@angular/http": "^7.2.3",
    "@angular/material": "^7.3.0",
    "@angular/platform-browser": "^7.2.3",
    "@angular/platform-browser-dynamic": "^7.2.3",
    "@angular/router": "^7.2.3",
    "@ionic/storage": "^2.1.3",
    "@ng-bootstrap/ng-bootstrap": "^4.0.2",
    "@ng-select/ng-select": "^2.15.1",
    "@ngrx/effects": "^6.0.1",
    "@ngrx/entity": "^6.0.1",
    "@ngrx/schematics": "^6.0.1",
    "@ngrx/store": "^6.0.1",
    "@ngrx/store-devtools": "^6.0.1",
    "@swimlane/ngx-datatable": "14.0.0",
    "angular-2-local-storage": "^3.0.0",
    "angular-6-datatable": "^0.8.0",
    "bootstrap": "4.1.3",
    "bootstrap-colorpicker": "2.5.2",
    "bootstrap-duallistbox": "3.0.6",
    "bootstrap-markdown": "2.10.0",
    "bootstrap-progressbar": "0.9.0",
    "bootstrap-slider": "10.3.1",
    "bootstrap-tagsinput": "0.7.1",
    "bootstrap-timepicker": "0.5.2",
    "chart.js": "2.7.3",
    "class-transformer": "0.1.9",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "0.0.7",
    "codelyzer": "~4.5.0",
    "codemirror": "^5.43.0",
    "core-js": "^2.6.3",
    "cropperjs": "^1.4.0",
    "debounce": "1.1.0",
    "dropzone": "5.5.1",
    "dygraphs": "2.1.0",
    "file-saver": "1.3.8",
    "font-awesome": "^4.7.0",
    "fuelux": "3.17.0",
    "he": "1.2.0",
    "highcharts": "6.2.0",
    "ion-rangeslider": "2.2.0",
    "jquery": "3.3.1",
    "jquery-jcrop": "0.9.13",
    "jquery-knob": "1.2.11",
    "jquery-ui-npm": "^1.12.0",
    "jquery-validation": "1.18.0",
    "jquery.maskedinput": "1.4.1",
    "lodash": "4.17.10",
    "log4javascript": "^1.4.15",
    "markdown": "0.5.0",
    "morris.js": "0.5.0",
    "ngx-bootstrap": "^3.2.0",
    "ngx-loading": "1.0.14",
    "node-sass": "^4.11.0",
    "nouislider": "10.1.0",
    "nuxeo": "^3.11.0",
    "pnotify": "^4.0.0-beta.2",
    "popper.js": "1.14.3",
    "raphael": "2.2.7",
    "rxjs": "^6.4.0",
    "rxjs-compat": "6.3.2",
    "script-loader": "^0.7.2",
    "scriptjs": "2.5.9",
    "select2": "4.0.6-rc.1",
    "smartadmin-plugins": "1.0.21",
    "summernote": "0.8.11",
    "to-markdown": "3.1.1",
    "web-animations-js": "^2.3.1",
    "x-editable": "^1.5.1",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.6",
    "@angular/compiler-cli": "^7.2.3",
    "@angular/language-service": "^7.2.3",
    "@compodoc/compodoc": "^1.1.7",
    "@types/jasmine": "^3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.20",
    "imports-loader": "^0.8.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  },
  "repository": {
    "type": "git",
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2"
  },
  "bugs": {
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

[raymond10]

Hi Thomas,

Have you seen something about this issue?

Thanks

[troger]

Hi,

Sorry... I did check quickly and I'm afraid it's because of the promise-queue dependency that's relying on process, and the dependency seems not processed by your webpack configuration.

In the meantime, you can try const Nuxeo = require('nuxeo/nuxeo.js'); to load the already transpiled browser version... if it works.

I will give it a try with Angular 7 in the coming days to check myself, I will probably need to replace the existing promise-queue library with another one to quickly avoid this issue.

[raymond10]

Hi,

I have add /nuxeo.js I have this error :
Nuxeo is not a constructor BrowserConsoleAppender.append @ vendor.js:182495 main.js:44625 TypeError: Nuxeo is not a constructor at new NuxeoSocleService (main.js:41673) at _createClass (vendor.js:82131) at _createProviderInstance (vendor.js:82103) at resolveNgModuleDep (vendor.js:82067) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (vendor.js:82775) at resolveDep (vendor.js:83146) at createClass (vendor.js:83026) at createDirectiveInstance (vendor.js:82897) at createViewNodes (vendor.js:84123) at createRootView (vendor.js:84037)

It can not instanciate this.nuxeoClient = new Nuxeo(..) , when I CTRL click I got to nuxeo.js =>function Random(engine) line 8810.

Thanks

[troger]

Too bad 😞 You could try const Nuxeo = require('nuxeo/es5'); but I'm afraid you will end up with the same error than the first one.

Will try it myself tomorrow.

[raymond10]

When I use const Nuxeo = require('nuxeo/lib/nuxeo.js'); I have this exception ` Uncaught ReferenceError: process is not defined at Object../node_modules/promise-queue/index.js (index.js:1) at webpack_require__ (bootstrap:83) at Object../node_modules/nuxeo/lib/upload/batch.js (batch.js:2) at webpack_require (bootstrap:83) at Object../node_modules/nuxeo/lib/operation.js (operation.js:7) at __webpack_require (bootstrap:83) at Object../node_modules/nuxeo/lib/nuxeo.js (nuxeo.js:6) at webpack_require (bootstrap:83) at Module../src/app/technique/nuxeo/nuxeo-socle.service.ts (nuxeo-socle.service.ts:4) at webpack_require (bootstrap:83)

`

When I use const Nuxeo = require('nuxeo/es5') I have the same exception above. ` index.js:1 Uncaught ReferenceError: process is not defined at Object../node_modules/promise-queue/index.js (index.js:1) at webpack_require__ (bootstrap:83) at Object../node_modules/nuxeo/es5/upload/batch.js (batch.js:12) at webpack_require (bootstrap:83) at Object../node_modules/nuxeo/es5/operation.js (operation.js:19) at __webpack_require (bootstrap:83) at Object../node_modules/nuxeo/es5/nuxeo.js (nuxeo.js:18) at webpack_require__ (bootstrap:83) at Object../node_modules/nuxeo/es5/index.js (index.js:3) at webpack_require__ (bootstrap:83)

`

[troger]

Hi,

I will make the change and release a new minor version of the client, but in the meantime, you could try adding to your package.json the following lines:

"browser": {
  "promise-queue": "promise-queue/lib/index.js"
}

BTW, you can just use import Nuxeo from 'nuxeo' in your TS file.

[troger]

Hi,

I've released a new 3.12.0 version that contains the fix. Could you try again with the new version and see if everything is working? Thanks!

Re-open the issue if that does not fix it.

[raymond10]

Hi,

It works fine. Thanks a lot

[sc-mudsat]

Hi, I am trying to integrate nuxeo npm module versio 3.18.0 with angular 12 app. Getting the following error:-

here's the package.json

[raymond10]

Hi,

Can we have your nuxeo service class ? I migrated on angular 9 and my code still works.

Thanks

[sc-mudsat]

Hi, the following is my service class:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as Nuxeo from 'nuxeo';

@Injectable()
export class NuxeoService {
  // XXX Declared here to prevent from mixin style compilation error when using the service.
  login: any;
  operation: any;
  request: any;
  repository: any;
  batchUpload: any;
  users: any;
  groups: any;
  directory: any;
  workflows: any;
  requestAuthenticationToken: any;
  // ---

  private nuxeoClient: any;

  // Ici no définit le header d'appel de l'API
  private defaultHeader = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'PUT,DELETE,POST,GET,OPTIONS',
    'Repository': 'default',
    'enrichers.document': 'thumbnail,preview',
    'properties': '*',
  };

  private instance: any;

  constructor() {
    this.nuxeoClient = new Nuxeo({
      baseURL: `${location.origin}/nuxeo/`,
      auth: {
        username: 'Administrator',
        password: 'Administrator',
        method: 'basic'
      },
      headers: this.defaultHeader,
    });

    // Mixin Nuxeo JS Client prototype with NuxeoService to use it the same way.
    Object.getOwnPropertyNames(Nuxeo.prototype).forEach(name => {
      if (/^_|constructor/.test(name)) {
        return;
      }

      try {
        NuxeoService.prototype[name] = function (...args: any[]) {
          return this.instance[name].apply(this.instance, args);
        };
      } catch (e: any) {
        console.error(e);
      }
    });
  }

  public nuxeoClientConnect(): void {
    this.nuxeoClient.connect()
      .then((client: any) => {
        if (client.connected) {
          console.log('Connection nuxeo OK! ', client.user, ' - VersionServer: ', client.serverVersion);
        }
      }).catch((err: any) => {
        console.log('Connection nuxeo KO!');
        throw err;
      });
  }
}