ngx-mqtt installation fails
dexpota opened this issue · comments
- I have searched for similar issues in this repository, but couldn't find one.
- I have read the README and have a basic understanding how angular works.
I'm submitting a...
- Regression (a behavior that used to work and stopped working in a new release)
- Bug report
- Feature request
Current behavior
It is not possible to install ngx-mqtt with the command npm install --save ngx-mqtt.
> ngx-mqtt@7.0.14 postinstall /home/fabrizio/developing/projects/sample-project/node_modules/ngx-mqtt
> node postinstall
[Error: ENOENT: no such file or directory, open '../../node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '../../node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js'
}
/home/fabrizio/developing/projects/sample-project/node_modules/ngx-mqtt/postinstall.js:11
throw err;
^
[Error: ENOENT: no such file or directory, open '../../node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '../../node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js'
}
npm WARN icss-utils@5.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-extract-imports@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-local-by-default@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-scope@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-values@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-mqtt@7.0.14 requires a peer of @angular/common@^9.1.12 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-mqtt@7.0.14 requires a peer of @angular/core@^9.1.12 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ngx-mqtt@7.0.14 postinstall: `node postinstall`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ngx-mqtt@7.0.14 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/fabrizio/.npm/_logs/2020-11-15T14_34_31_822Z-debug.log
Expected behavior
The installation should complete without issues.
Minimal working example of the problem with instructions
A minimal working example can be build by following these steps:
ng new sample-project
cd sample-project
npm install --save ngx-mqtt
Environment
os: Linux Manjaro
ngx-mqtt version: 7.0.14
Output from ng --version
Angular CLI: 11.0.1
Node: 14.13.1
OS: linux x64
Angular: 11.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.1
@angular-devkit/build-angular 0.1100.1
@angular-devkit/core 11.0.1
@angular-devkit/schematics 11.0.1
@angular/cli 11.0.1
@schematics/angular 11.0.1
@schematics/update 0.1100.1
rxjs 6.6.3
typescript 4.0.5
Installing a previous version seems to work npm i --save ngx-mqtt@7.0.9
no such file or directory, open '../../node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js']
I have the same problem.
seems angular 11 don't have such browser.js in that directory.
I managed to get it to install after working through all the issues above (you need to install an older version of @angular-devkit. However then it failed due to other issues -- looking for globals, buffers etc. Not a good library.
The angular dev team moved @angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js to @angular-devkit/build-angular/src/webpack/configs/browser.js.
It seems to work now in ngx-mqtt@8.0.1 can you confirm this @dexpota?
@johnlewiskalahari you think this is not a good library, because the angular team introduced breaking changes, and I'm not fixing this fast enough? Remember this is a spare time project, not company backed and first and foremost not a project I get paid for. So maybe you should reconsider your expectation regarding anything you get for free.
@sclausen I can understand your frustration. However the approach you have chosen - patching library code might not be the best choice. Well, at least it is something, that is very likely to break, as can be seen in this case.
If you go down that route, you need more sophisticated code in postinstall.js. It has been a while, since I've been messing around in Angular land, but to me a modular and more stable approach seems to be sth. like ngx-build-plus.
The thing is, why do you need to have WebPack polyfill Node globals at all? Shouldn't mqtt.js run in the browser in the first place? That it is their claim:
MQTT.js is a client library for the MQTT protocol, written in JavaScript for node.js and the browser.
@ChristianUlbrich The current solution isn’t from me but I’m grateful for @chrste90 pull request. you‘re absolutely right with it’s fragility though. Unfortunately I have no idea how to achieve the goal otherwise and am grateful for this solution which seems the only way to get this working with @angular/cli.
In the end, mqtt.js will only run in the browser if its browserified or went through webpack which then applies the proper polyfills to the bundle. So it’s a fallacy to state that mqtt.js works in the browser or at least not the full truth.
Thank @sclausen for the quick fix, now with version 8.0.1 the installation procedure is working without issues.
The bundle at https://unpkg.com/mqtt@4.2.6/dist/mqtt.min.js works perfectly in the browser. It is part of the mqtt package itself. You could easily depend on the global mqtt for your code and have your users load it themselves. If you want to make your package self-contained, simply bundle mqtt in your library.
This should not be so difficult to achieve; maybe I come up with a PR. I think, if you want to provide a "smart" wrapper around mqtt it is okay, to bundle it.
Ah, I didn't knew dist/mqtt.min.js ist already bundled for the browser. Do you know how to include this file in the bundle angular-cli generates? I failed miserably…
The angular dev team moved
@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.jsto@angular-devkit/build-angular/src/webpack/configs/browser.js.
It seems to work now inngx-mqtt@8.0.1can you confirm this @dexpota?@johnlewiskalahari you think this is not a good library, because the angular team introduced breaking changes, and I'm not fixing this fast enough? Remember this is a spare time project, not company backed and first and foremost not a project I get paid for. So maybe you should reconsider your expectation regarding anything you get for free.
I still can't install normally, using "npm i ngx-mqtt", there is the same error. Time: December 15, 2020 09:46:10;(我仍然不能正常安装,使用 "npm i ngx-mqtt",有相同的错误.时间:2020年12月15日09:46:10)
Installing a previous version seems to work npm i --save ngx-mqtt@7.0.9
This way can be installed success. ;)
This issue should be done with the merge of #174 and the release of v8.0.3
I still had the same issue with v8.0.3 .. v7.0.9 seems to work
@wazest Could you please post your package-lock.json?
{ "name": "migros-cadis-fildashboard", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~11.0.1", "@angular/cdk": "^11.0.1", "@angular/common": "~11.0.1", "@angular/compiler": "~11.0.1", "@angular/material": "^11.0.1", "@angular/core": "~11.0.1", "@angular/forms": "~11.0.1", "@angular/platform-browser": "~11.0.1", "@angular/platform-browser-dynamic": "~11.0.1", "@angular/router": "~11.0.1", "ngx-mqtt": "7.0.9", "rxjs": "^6.6.3", "rxjs-operators": "^1.1.3", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.2", "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/googlemaps": "^3.40.4", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2" } }
@sclausen looks like the Angular team changed the path again (new one actually makes more sense but still a breaking change), and I'm having the same issues with Angular 11.0.7 and ngx-mqtt v8.0.3.
New path: @angular-devkit/build-angular/src/webpack/configs/browser.js
@nodabs 🙄 thank you for the info, I‘ll work on it this Sunday
@sclausen after looking at this some more I realized that the path I gave was already the path you changed to in your most recent version of postinstall.js, however if I run the normal npm install command it's still referencing the old location:
❯ npm install ngx-mqtt
ngx-mqtt@8.0.3 postinstall C:\Code\xxx\ng-app\node_modules\ngx-mqtt
node postinstall
-files\models\webpack-configs\browser.js'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'C:\Code\xxx\ng-app\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js'
}
C:\Code\xxx\ng-app\node_modules\ngx-mqtt\postinstall.js:33
throw err;
^
[Error: ENOENT: no such file or directory, open 'C:\Code\xxx\ng-app\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'C:\Code\xxx\ng-app\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js'
Any update on this? Also got the same issue trying to upgrade the package.
same issue here, I updated to angular 11 and wanted to upgrade ngx-mqtt from 7.0.9 to 8.0.3 but can't do it for now :(
Sorry, (paid)work and personal life are quite demanding these times. I'll see what I can do in the near future.
Sorry, (paid)work and personal life are quite demanding these times. I'll see what I can do in the near future.
no problem, for now it's not a blocking issue as the plugin seems to work fine in v7.0.9 with angular 11 !
i'll be waiting. I need the mgtt:// protocol which is not available in v7.0.9
i'll be waiting. I need the mgtt:// protocol which is not available in v7.0.9
可能你需要更多的知识才能得以解答你的问题,建议你去www.webosocket.org看一看导航的Book选项,这里有包括WebSocket和MQTT的介绍,也就是说,有ws:// 和 mqtt:// 的说明;
i'll be waiting. I need the mgtt:// protocol which is not available in v7.0.9
@glassm Apart from this issue, you won't get support for the mqtt protocol. The mqtt protocol is not available in the browser.
You have to connect to a broker with a websocket endpoint like the one mosquitto has.
I still had the same issue with v8.0.3 .. v7.0.9 seems to work
May I ask how you managed to install 7.0.9?
While trying to do so I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ngx-mqtt-test@0.0.0
npm ERR! Found: @angular/common@11.2.4
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~11.2.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.1.12" from ngx-mqtt@7.0.9
npm ERR! node_modules/ngx-mqtt
npm ERR! ngx-mqtt@"7.0.9" from the root projectMy package.json is as follows:
{
"name": "ngx-mqtt-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.3",
"@angular/common": "~11.2.3",
"@angular/compiler": "~11.2.3",
"@angular/core": "~11.2.3",
"@angular/forms": "~11.2.3",
"@angular/platform-browser": "~11.2.3",
"@angular/platform-browser-dynamic": "~11.2.3",
"@angular/router": "~11.2.3",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3",
"ngx-mqtt": "7.0.9"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.2",
"@angular/cli": "~11.2.2",
"@angular/compiler-cli": "~11.2.3",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.2"
}
}Would be awesome if someone could help me to make this version run :) thx
I think I might have spotted the issue
@angular-devkit/build-angular has an odd version number
see: "@angular-devkit/build-angular": "~0.1102.2",
whereas this bit of code in the preinstall script is checking the semver major number (which will be 0 I believe)
if (fs.existsSync(packageJsonPath)) {
const content = fs.readFileSync(packageJsonPath, "utf-8");
if (content) {
const { version } = JSON.parse(content);
if (version) {
let semv = new semver_1.SemVer(version);
if (semv.major >= 11) {
f =
"../../node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js";
}
}
}
}
sorry ignore me postinstall is checking the version of @angular/core
ok - apologies for the noise above I think I have spotted the actual issue in the postinstall hook
postinstall scripts run with the "current directory" as the package that is being installed node_modules\ngx-mqtt in this case.
this snippet
const cwd = process.cwd();
const packageJsonPath = path.join(
cwd,
"node_modules/@angular/core/package.json"
);
will look at node_modules\ngx-mqtt\node_modules\@angular\core\package.json rather than node_modules\@angular\core\package.json
PR #181 - to fix
This whole messing around with postinstall is useless and it is not needed. Just bundle mqtt.js (this is just a wrapper around it) and everything will work and for now in the future as well. I try to find some time, but it should not be so hard...
So guys is the fix included in the new release?
This whole messing around with
postinstallis useless and it is not needed. Just bundlemqtt.js(this is just a wrapper around it) and everything will work and for now in the future as well. I try to find some time, but it should not be so hard...
Be my guest. I already tried after angular dropped the node polyfills where mqtt.ja worked out of the box. I couldn’t figure out how to do it.
So guys is the fix included in the new release?
Unfortunately there are still issues with the PR, but if it's fixed, I will make a new release.
Hello! I tried bundling the dist/mqtt.js file but failed miserably.
Yet, it gave me another idea, still dirty, but maybe better: what if the postinstall script modifies the package.json of the mqtt package so the main property points to dist/mqtt.js instead of mqtt.js directly?
I tested this option by modifying manually and it seems to work.
Opened a PR here: #182
Unrelated: the IOnErrorEvent interface doesn't expose the code property anymore, but I'm unsure about the cause of this.
Work around until the fix comes out is the version 8.0.1 I am able to install it fine, although I get an error from postinstall.
I do eliminate the postinstall error if I actually install postinstall before installing the version in 8.0.1, then there is no errors at all.
But version 8.0.3 I am not able to install, I get the same errors mentioned earlier in this issue about '../../node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js'
The only thing that worked for me was to use npm 6 instead of npm 7. That way i could install 8.0.3 without errors
I found a solution. I just link the new browser.js to the folders mqtt needs. I create the folders too.
ln -s /home/myproject/node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js /home/myproject/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs
Ah, I didn't knew
dist/mqtt.min.jsist already bundled for the browser. Do you know how to include this file in the bundle angular-cli generates? I failed miserably…
I have way too little knowledge in this, but in this project they apparently managed to use the mqtt.min.js file:
https://github.com/kainonly/ngx-mqtt-lite
If you look into the Readme, they load mqtt.min.js from unpkg.com. Maybe someone with enough knowledge can port what they do over to ngx-mqtt?
This is holding back the project, any chance for a fix? Thanks
I think I fixed the issue. I'm not satisfied with the solution though. At least it's working with angular 12 now. Can you confirm it's working again for you?