ngxs-effects not compatible with Angular 10
billdwhite opened this issue · 13 comments
When upgrading to angular 10, I receive this error when running my application:
Error: inject() must be called from an injection context at injectInjectorOnly (core.js:934) at Module.ɵɵinject (core.js:950) at Object.NgxsEffectsModule_Factory [as factory] (ngxs-effect.umd.js:465) at R3Injector.hydrate (core.js:11266) at R3Injector.get (core.js:11088) at core.js:11125 at Set.forEach (<anonymous>) at R3Injector._resolveInjectorDefTypes (core.js:11125) at new NgModuleRef$1 (core.js:23975) at NgModuleFactory$1.create (core.js:24029)
Just a quick note on this: I found that if I build the application locally and the copy just the dist/ngxs-effect folder (which is not plural and seems inconsistent with the main project name) to my node_modules folder, once I change my imports to use 'ngxs-effect' (instead of 'ngxs-effects'), it works fine. So it must have something to do with the packaging of the project for distribution.
@billdwhite Thanks for the report. Work under this issue is in progress. Could you please provide dependencies versions from your project?
@billdwhite Also please let me know is you consume this lib locally via npm link.
And if you do, please check this issue
angular/angular#25813 (comment)
You can try to solve it by using projects.$name.architect.build.options.preserveSymlinks: true option in angular.json
I have indeed tried the preserveSymlinks configuration but that did not help. When I used npm link, it still would not work. The only way I was successful was when I built ngxs-effects locally and then manually copied the dist folder contents into my node_module manually. I then updated my imports to match the 'ngxs-effect' (non-plural) naming and that worked. I was really thinking the preserveSymlinks would fix it (and perhaps I am missing something there) but it didn't.
Here are the packages I am using:
"dependencies": {
"@angular/animations": "10.0.1",
"@angular/cdk": "10.0.1",
"@angular/common": "10.0.1",
"@angular/compiler": "10.0.1",
"@angular/core": "10.0.1",
"@angular/flex-layout": "10.0.0-beta.32",
"@angular/forms": "10.0.1",
"@angular/localize": "10.0.1",
"@angular/material": "10.0.1",
"@angular/material-moment-adapter": "10.0.1",
"@angular/platform-browser": "10.0.1",
"@angular/platform-browser-dynamic": "10.0.1",
"@angular/router": "10.0.1",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "6.0.0",
"@ngxs-labs/immer-adapter": "3.0.5",
"@ngxs/devtools-plugin": "3.6.2",
"@ngxs/hmr-plugin": "3.6.2",
"@ngxs/logger-plugin": "3.6.2",
"@ngxs/router-plugin": "3.6.2",
"@ngxs/storage-plugin": "3.6.2",
"@ngxs/store": "3.6.2",
"@ngxs/websocket-plugin": "3.6.2",
"d3": "5.16.0",
"d3plus-text": "0.9.51",
"easyid": "1.0.0",
"flubber": "0.4.2",
"font-awesome": "4.7.0",
"gsap": "3.3.4",
"hammerjs": "2.0.8",
"immer": "7.0.5",
"lodash-es": "4.17.15",
"moment-mini-ts": "2.20.1",
"ng2-file-upload": "1.4.0",
"ng2-logger": "3.0.12",
"ngx-animate": "1.0.1",
"ngx-clipboard": "13.0.1",
"ngx-color": "5.1.3",
"ngx-color-picker": "9.1.0",
"ngx-page-scroll-core": "7.0.1",
"ngx-ui-loader": "9.1.1",
"pptxgenjs-angular": "1.0.0-beta",
"rxjs": "6.5.5",
"screenfull": "5.0.2",
"snapsvg": "0.5.1",
"svg.js": "2.7.1",
"tslib": "2.0.0",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1000.0",
"@angular/cli": "10.0.0",
"@angular/compiler-cli": "10.0.1",
"@angular/language-service": "10.0.1",
"@angularclass/hmr": "2.1.3",
"@babel/core": "7.10.3",
"@storybook/addon-a11y": "5.3.19",
"@storybook/addon-actions": "5.3.19",
"@storybook/addon-knobs": "5.3.19",
"@storybook/addon-links": "5.3.19",
"@storybook/addon-notes": "5.3.19",
"@storybook/addon-viewport": "5.3.19",
"@storybook/addons": "5.3.19",
"@storybook/angular": "5.3.19",
"@types/jasmine": "3.5.11",
"@types/jasminewd2": "2.0.8",
"@types/lodash-es": "4.17.3",
"@types/node": "14.0.14",
"@types/moment": "2.13.0",
"babel-loader": "8.1.0",
"codelyzer": "5.2.2",
"cypress": "4.9.0",
"cypress-plugin-snapshots": "1.4.3",
"cypress-xpath": "1.6.0",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "5.0.2",
"karma": "5.1.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "3.3.1",
"karma-jasmine-html-reporter": "1.5.4",
"protractor": "7.0.0",
"protractor-image-comparison": "3.9.0",
"protractor-screenshoter-plugin": "0.10.3",
"selenium-webdriver": "4.0.0-alpha.7",
"storybook-addon-themes": "5.4.1",
"ts-node": "8.10.2",
"tsconfig-paths": "3.9.0",
"tslint": "6.1.2",
"typescript": "3.9.5",
"webdriver-manager": "13.0.0",
"webpack-bundle-analyzer": "3.8.0"
}
@vladborsh I've created a minimal repo that demonstrates the issue. Check out https://github.com/billdwhite/ngxs-effect-bug and do a build and when you run it, you will see the error in the browser console log.
@billdwhite please try version 2.1.1, I fixed naming to the plural form. I haven't check it in ng10 project yet, I'm going to do it in the next few days. but maybe this fix would be enough for your issue. looking forward to your response
Unfortunately using 2.1.1 does not fix the issue; I still see this in the console on startup in the repo project I referenced above
Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:934)
at Module.ɵɵinject (core.js:950)
at Object.NgxsEffectsModule_Factory [as factory] (ngxs-effects.umd.js:465)
at R3Injector.hydrate (core.js:11275)
at R3Injector.get (core.js:11097)
at core.js:11134
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (core.js:11134)
at new NgModuleRef$1 (core.js:23975)
at NgModuleFactory$1.create (core.js:24029)
(anonymous) @ main.ts:11
any luck on this?
unfortunately no, still struggled with this issue in new angular. I'm doing research of correct library serve/build setup, I guess there are issues in this area
@billdwhite, after several weeks of fighting, I've fixed this issue! please try version 3.1.3. also, tried this version in your project ngxs-effects-bug and it works fine
@vladborsh: yes indeed that does fix the problem; there are no more errors; I really appreciate you getting it fixed; however, there is now another minor issue: performance: I am using this is an interactive diagramming tool; with the previous implementation the effects ran smoothly and the UI was very responsive; now, it appears the work being done by the effects is a bit laggy compared with the previous release. any idea why that might be? I'll keep looking at my app and see if I can pin-down the problem....
@billdwhite well let's try to fix this performance leak in another issue. I guess it could be fixed as a separated problem. would be great to have a description (or maybe minimal reproduction) of your project setup
@vladborsh: yes, I'll see if I can pinpoint what the problem is and open that as a new issue; thanks again for getting this working 👍