Nuxeo client breaking Angular 7 app #85

raymond10 · 2019-02-07T08:45:40Z

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

The text was updated successfully, but these errors were encountered:

troger · 2019-02-12T18:10:42Z

Hi,

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

raymond10 · 2019-02-13T07:09:29Z

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 · 2019-02-13T07:26:34Z

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 · 2019-03-19T10:02:50Z

Hi Thomas,

Have you seen something about this issue?

Thanks

troger · 2019-03-20T10:35:28Z

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 · 2019-03-20T11:42:58Z

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 · 2019-03-20T13:18:36Z

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 · 2019-03-20T13:26:02Z

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 · 2019-03-21T10:37:54Z

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 · 2019-03-25T13:57:02Z

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 · 2019-03-25T15:54:21Z

Hi,

It works fine.
Thanks a lot

sc-mudsat · 2021-08-31T09:02:18Z

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 · 2021-09-03T07:40:43Z

Hi,

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

Thanks

sc-mudsat · 2021-09-06T13:42:41Z

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

troger closed this as completed Mar 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nuxeo client breaking Angular 7 app #85

Nuxeo client breaking Angular 7 app #85

raymond10 commented Feb 7, 2019

troger commented Feb 12, 2019

raymond10 commented Feb 13, 2019

raymond10 commented Feb 13, 2019

raymond10 commented Mar 19, 2019

troger commented Mar 20, 2019

raymond10 commented Mar 20, 2019

troger commented Mar 20, 2019

raymond10 commented Mar 20, 2019

troger commented Mar 21, 2019

troger commented Mar 25, 2019

raymond10 commented Mar 25, 2019

sc-mudsat commented Aug 31, 2021

raymond10 commented Sep 3, 2021

sc-mudsat commented Sep 6, 2021

Nuxeo client breaking Angular 7 app #85

Nuxeo client breaking Angular 7 app #85

Comments

raymond10 commented Feb 7, 2019

troger commented Feb 12, 2019

raymond10 commented Feb 13, 2019

raymond10 commented Feb 13, 2019

raymond10 commented Mar 19, 2019

troger commented Mar 20, 2019

raymond10 commented Mar 20, 2019

troger commented Mar 20, 2019

raymond10 commented Mar 20, 2019

troger commented Mar 21, 2019

troger commented Mar 25, 2019

raymond10 commented Mar 25, 2019

sc-mudsat commented Aug 31, 2021

raymond10 commented Sep 3, 2021

sc-mudsat commented Sep 6, 2021