search

ghiscoding / Angular-Slickgrid

Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
https://ghiscoding.github.io/Angular-Slickgrid
MIT License
396 stars 119 forks source link

My project has a service which has a TranlateService dependency. When I try to add the angular-slickgrid I get the static injection error #114

Closed tannenbaums closed 5 years ago

tannenbaums commented 5 years ago

I'm submitting a bug report

Current behavior: Getting static injector error. Let me add though that this is alghout i followed everything in the wiki. I actually debugged through angular code and seems like the problem is that it's looking to inject an object with a token of: TranslateService_59 but the service is TranslateService_81. If I manually change it in the debugger it works. I seem to have a unique scenario, because my project already uses the tranlate service before attempting to use angular-slickgrid. I have a service that looks like this:

@Injectable() export class AppTranslationService { readonly defaultLanguage = "en";

constructor(private translate: TranslateService) {
    this.setDefaultLanguage(this.defaultLanguage);
}

For some reason this is causing the angular injector to inject the wrong instance to the slick-grid component. Any idea what i can do about this? I'm on this bug for a few days already and I'm going crazy.

Thanks so much! Sam Tannenbaum

ghiscoding commented 5 years ago

The problem is probably because of the versions of multiple packages that you are using. If you look at the README on the compatibility section, I do point out that if you use Angular 6, you will have to follow that post and use rxjs-compat, also the version for ngx-translate will be the previous versions for both packages of ngx-translate, you can see some info in the HOWTO - Wiki. It seems that ngx-translate have different versions for each Angular versions that goes out.

All of that to say, that I had a gap between Angular 5 and 7, where I didn't have the time to support Angular 6 and the big reason I didn't spend time on it was because it works with the rxjs-compat. The easiest, if you could do it, would be to upgrade to Angular 7 else follow the indication in first paragraph. Good luck and hopefully that helps in finding the issue.

Also note that this is Open Source and being the only person supporting the lib, though I have coworkers using the lib, it's a little hard for me to keep up to date with every single version of Angular.

tannenbaums commented 5 years ago

Thank you so much for your quick reply. I am already using rxjs and rxjs-compat in my project. Below is my package.json. Last time I tried upgrading to 7 I ran into lots of issues. I guess I can have another stab at it.

Thank you again. I really like your grid alot and want very badly to bring it into my project. Sam Tannenbaum

{ "name": "xTrack", "version": "2.0.0", "description": "", "author": { "name": "S. Tannenbaum", "email": "", "url": "" }, "license": "MIT", "homepage": "", "repository": "", "dependencies": { "@angular/animations": "^6.1.7", "@angular/cdk": "^6.4.7", "@angular/common": "6.1.7", "@angular/compiler": "6.1.7", "@angular/compiler-cli": "^6.1.7", "@angular/core": "6.1.7", "@angular/forms": "6.1.7", "@angular/http": "6.1.7", "@angular/material": "^6.4.7", "@angular/platform-browser": "6.1.7", "@angular/platform-browser-dynamic": "6.1.7", "@angular/platform-server": "6.1.7", "@angular/router": "6.1.7", "@ng-bootstrap/ng-bootstrap": "2.1.2", "@ng-select/ng-select": "2.13.3", "@ngtools/webpack": "1.9.0", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "@swimlane/ngx-datatable": "11.1.5", "@types/jquery": "3.2.16", "@types/webpack-env": "1.13.3", "ag-grid-angular": "^20.0.0", "ag-grid-community": "^20.0.0", "angular-bootstrap-md": "6.3.0", "angular-slickgrid": "^2.1.8", "angular2-template-loader": "0.6.2", "aspnet-webpack": "^2.0.1", "awesome-typescript-loader": "3.4.1", "bootstrap": "^4.2.1", "bootstrap-combobox": "^1.0.2", "bootstrap-datepicker": "^1.8.0", "bootstrap-select": "1.13.2", "bootstrap-toggle": "^2.2.2", "bootstrap-vertical-tabs": "1.2.2", "chart.js": "^2.7.1", "core-js": "2.5.3", "css": "2.2.1", "css-loader": "0.28.7", "divarea": "1.0.2", "event-source-polyfill": "0.0.12", "expose-loader": "0.7.4", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "html-loader": "0.5.1", "jquery": "^3.2.1", "json-loader": "0.5.7", "material-design-icons": "^3.0.1", "moment": "^2.18.1", "ng-bootstrap": "1.6.3", "ng-http-loader": "4.0.0", "ng2-charts": "1.6.0", "ng2-ckeditor": "^1.2.1", "ng2-currency-mask": "^5.3.1", "ng2-linq": "1.0.0", "ng2-toasty": "^4.0.3", "ngx-autosize": "1.1.3", "ngx-bootstrap": "3.0.1", "ngx-ckeditor": "^0.3.2", "ngx-ckeditor5": "^1.5.0-12", "ngx-moment": "3.1.0", "ngx-pipes": "2.3.5", "node-sass": "4.7.2", "npm-install-peers": "^1.2.1", "popper.js": "^1.14.3", "raw-loader": "0.5.1", "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2", "sass-loader": "6.0.6", "style-loader": "0.19.0", "titatoggle": "^2.1.2", "to-string-loader": "1.1.5", "typescript": "2.7.2", "url-loader": "0.6.2", "web-animations-js": "2.3.1", "webpack": "^3.10.0", "webpack-hot-middleware": "2.21.0", "webpack-merge": "4.1.1", "zone.js": "^0.8.26" }, "devDependencies": { "@types/chai": "4.0.10", "@types/jasmine": "2.8.2", "chai": "4.1.2", "copy-webpack-plugin": "^4.5.2", "jasmine-core": "2.8.0", "karma": "1.7.1", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2" }, "scripts": { "dev-build": "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js", "test": "karma start ClientApp/test/karma.conf.js" }, "keywords": [ "ng", "angular", "angular2", "angular5", "angularX", "aspnetcore", "aspnet-core", "startup", "template", "rad", "ng2", "ng5", "ngX" ] }

ghiscoding commented 5 years ago

However you are still using version 2.x of my lib, if you want to use it with Angular 6, then please use the version 1.x of my lib. There's a guy who also made a Starblitz that could maybe help you, see this same post

Just a reminder, version 2.x of my lib is only compatible with Angular 7+

tannenbaums commented 5 years ago

Sorry about that, didn't realize that! Regardless, I heeded your advice and upgraded angular to 7 and everything else to latest as well and now everything works!!! YAY!

Thank you so much! Sam

ghiscoding commented 5 years ago

Oh that is very good news 😄

If you like the lib, you can also up vote ⭐️ to make it more popular in the search

Thanks for using the lib 👍

tannenbaums commented 5 years ago

Sure, done, and very well deserved!!!

If you don’t mind just 2 more questions, I would very much appreciate it!

  1. I am using visual studio with .net core/angular, and whenever there’s a need for external libs I run into trouble. I tried adding all the slickgrid dependent scripts (such as jquery, and jqury-ui) to webpack but the grid did not recognize it. I ended up just doing a good old script tag on the main page, but I don’t think that’s such a good idea. Any thoughts on that?

  2. For some reason the grid is very small width, I can see that it’s generation style width=300 (as below). I just copied example #4 Client Side Sort/Filter. On the example it looks perfect (the width generated is 1382) but when I move it to my project I get this issue for some reason.

Thanks so much,

tannenbaums commented 5 years ago

Disregard my 2nd question. I was missing demo-container, sorry about that!

ghiscoding commented 5 years ago

The div container is for the grid auto-resize to work properly. I remember using different type of container classes with Bootstrap 3 versus Bootstrap 4. For that you can see both demos for Bootstrap 4 and for Bootstrap 3

tannenbaums commented 5 years ago

my bad, it's never good to ask too many questions :) The first question was much more important to me. But regardless, thank you so much again for all your help!