Nuxeo client breaking Angular 7 app
raymond10 opened this issue · 14 comments
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
Hi,
Could you provide us with a minimal sample Angular 7 project showing the issue, please?
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
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"
}
}
Hi Thomas,
Have you seen something about this issue?
Thanks
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.
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
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.
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)
`
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.
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.
Hi,
It works fine.
Thanks a lot
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
Hi,
Can we have your nuxeo service class ?
I migrated on angular 9 and my code still works.
Thanks
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;
});
}
}