I'm trying to use the example of Reusable Custom-Filter Components. If I check the provided Plunker example I changed the filter. After I clicked somewhere else the filter is reseted to default item. How can I achieve that the filter stays so I can do other stuff on grid?
Here an excerpt from package.json:
"#angular/animations": "^5.0.4",
"#angular/common": "~5.0.0",
"#angular/compiler": "~5.0.0",
"#angular/core": "~5.0.0",
"#angular/forms": "~5.0.0",
"#angular/http": "~5.0.0",
"#angular/platform-browser": "~5.0.0",
"#angular/platform-browser-dynamic": "~5.0.0",
"#angular/router": "~5.0.0",
"#angular/upgrade": "~5.0.0",
"#progress/kendo-angular-buttons": "^2.0.0",
"#progress/kendo-angular-dateinputs": "^1.4.1",
"#progress/kendo-angular-dialog": "^1.3.0",
"#progress/kendo-angular-dropdowns": "^1.2.2",
"#progress/kendo-angular-excel-export": "^1.0.4",
"#progress/kendo-angular-grid": "^1.6.0",
"#progress/kendo-angular-inputs": "^1.3.3",
"#progress/kendo-angular-intl": "^1.3.0",
"#progress/kendo-angular-l10n": "^1.0.5",
"#progress/kendo-data-query": "^1.1.0",
"#progress/kendo-drawing": "^1.4.0",
"#progress/kendo-theme-default": "^2.43.2",
"angular2-jwt": "^0.2.3",
"angular2-moment": "^1.7.0",
"angular2-toaster": "^4.0.1",
"animate.css": "3.5.2",
"awesome-bootstrap-checkbox": "1.0.0",
"bootstrap": "4.0.0-beta",
"cldr-data": "^32.0.0",
"core-js": "^2.4.1",
"font-awesome": "4.7.0",
"glyphicons-halflings": "1.9.0",
"ng2-redux": "^5.1.2",
"ngx-bootstrap": "2.0.0-beta.5",
"pace": "git://github.com/HubSpot/pace.git#v0.7.7",
"popper.js": "1.12.5",
"redux": "^3.7.2",
"reflect-metadata": "0.1.10",
"rxjs": "^5.5.0",
"tassign": "^1.0.0",
"widgster": "0.0.3",
"zone.js": "^0.8.4"
There was an issue with the DropDownList losing the value on blur, but it is fixed in the latest version of the DropDowns package:
DOCS Changelog
Upgrading to the latest versions of the Kendo UI for Angular packages should resolve the described problem.
Related
I have used a kendo virtualization local data sample in my application as it is for testing the virtualization scroll bar but it's not working
Virtualization with Local data from the official page
FYI instead of creating my own data, I have used the same kendo sample of virtualization with the local data sample from this doc Kendo virtualization with Local Data & following is the StackBlitz for same
Following is my package.json in case
"dependencies": {
"#angular/animations": "~12.2.0",
"#angular/cdk": "^12.2.0",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/localize": "~12.2.0",
"#angular/material": "^11.2.3",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#progress/kendo-angular-buttons": "^6.0.0",
"#progress/kendo-angular-common": "^2.0.0",
"#progress/kendo-angular-dateinputs": "^5.0.0",
"#progress/kendo-angular-dialog": "^5.2.3",
"#progress/kendo-angular-dropdowns": "^5.0.0",
"#progress/kendo-angular-excel-export": "^4.0.0",
"#progress/kendo-angular-grid": "^5.5.1",
"#progress/kendo-angular-icons": "^0.4.4",
"#progress/kendo-angular-indicators": "^1.1.1",
"#progress/kendo-angular-inputs": "^7.0.0",
"#progress/kendo-angular-intl": "^3.0.0",
"#progress/kendo-angular-l10n": "^3.0.0",
"#progress/kendo-angular-label": "^3.0.0",
"#progress/kendo-angular-layout": "^6.3.6",
"#progress/kendo-angular-menu": "^3.0.3",
"#progress/kendo-angular-pager": "^3.0.3",
"#progress/kendo-angular-pdf-export": "^3.0.0",
"#progress/kendo-angular-popup": "^4.0.0",
"#progress/kendo-angular-progressbar": "^2.0.0",
"#progress/kendo-angular-toolbar": "^4.1.3",
"#progress/kendo-angular-tooltip": "^3.1.6",
"#progress/kendo-angular-treeview": "^5.0.0",
"#progress/kendo-data-query": "^1.0.0",
"#progress/kendo-drawing": "^1.0.0",
"#progress/kendo-licensing": "^1.0.2",
"#progress/kendo-svg-icons": "^0.1.2",
"#progress/kendo-theme-default": "^4.42.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
Please let me know if this is related to the lower kendo package versions because in my case the page change event is not calling when i scroll the grid
This is how my application behaves
Application behavior after running the application
I had application in angular 6 with .net core 2.1 and now I upgraded into 11 with .Net 5 and its works fine in my local system but when I published to Azure virtual machine at that time it is giving me below error, I already update necessary package like Angular CLI and .NET runtime at vitual machine so not sure why this error appear
here is my package.json
"dependencies": {
"#agm/core": "1.0.0",
"#angular/animations": "^11.2.8",
"#angular/cdk": "^11.2.7",
"#angular/common": "11.2.8",
"#angular/compiler": "11.2.8",
"#angular/core": "11.2.8",
"#angular/forms": "11.2.8",
"#angular/http": "7.2.16",
"#angular/localize": "^11.2.8",
"#angular/platform-browser": "11.2.8",
"#angular/platform-browser-dynamic": "11.2.8",
"#angular/router": "11.2.8",
"#ng-bootstrap/ng-bootstrap": "^9.1.0",
"#nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.8",
"#ngx-translate/core": "^9.1.1",
"#ngx-translate/http-loader": "^2.0.1",
"#progress/telerik-angular-report-viewer": "^11.20.1021",
"#ryancavanaugh/jquery.prettyphoto": "^3.1.14-alpha",
"#types/googlemaps": "^3.43.3",
"#videogular/ngx-videogular": "^3.0.1",
"adal-angular4": "^3.0.16",
"angular-google-charts": "^0.1.6",
"angular-moment": "^1.3.0",
"angular-safeguard": "^2.1.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.6.0",
"core-js": "^2.6.12",
"file-saver": "^2.0.5",
"flexslider": "^2.7.2",
"font-awesome": "^4.7.0",
"google-code-prettify": "^1.0.5",
"html2canvas": "^1.0.0-alpha.12",
"jquery": "^3.6.0",
"jquery.easing": "^1.4.1",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"modernizr": "^3.11.6",
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"ng-drag-drop": "5.0.0",
"ng2-pdfjs-viewer": "^5.0.7",
"ngx-material-timepicker": "^3.3.1",
"ngx-sortablejs": "^11.1.0",
"ngx-spinner": "^6.1.2",
"popper.js": "^1.16.1",
"primeflex": "^2.0.0",
"primeicons": "^1.0.0",
"primeng": "^11.3.1",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"sequencejs": "^2.0.0",
"sortablejs": "1.7.0",
"videogular2": "^7.0.2",
"xlsx": "^0.16.9",
"yarn": "^1.22.10",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1102.6",
"#angular/cli": "^11.2.6",
"#angular/compiler-cli": "^11.2.8",
"#angular/language-service": "11.2.8",
"#types/core-js": "^0.9.46",
"#types/flexslider": "0.0.2",
"#types/jasmine": "^2.8.17",
"#types/jasminewd2": "^2.0.8",
"#types/jquery": "^3.5.5",
"#types/jspdf": "^1.3.3",
"#types/modernizr": "^3.5.3",
"#types/node": "^6.14.13",
"codelyzer": "^4.5.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^7.0.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "4.1.5"
}
Any help would be appreciated
This is likely an issue with one of your dependencies, which you should generally update alongside updating the framework.
I can see "ngx-spinner": "^6.1.2" in your package.json file, can you please check its version as well. It should be 11.0.2, try to install that specific version and check again.
I've upgraded to the latest nativescript, typescript and using angular. Now whenever I try to compile, I get this error, regardless of the platform I am compiling to.
Error: com.tns.NativeScriptException: Failed to find module: "#angular/compiler", relative to: app/tns_modules/
below are my package.json dependencies:
"dependencies": {
"#angular/animations": "~6.1.0",
"#angular/common": "~6.1.0",
"#angular/core": "~6.1.0",
"#angular/forms": "~6.1.0",
"#angular/http": "~6.1.0",
"#angular/platform-browser": "~6.1.0",
"#angular/platform-browser-dynamic": "~6.1.0",
"#angular/router": "~6.1.0",
"async-await": "^0.1.40",
"lodash": "^4.17.10",
"moment": "^2.22.0",
"nativescript-angular": "^6.1.0",
"nativescript-audio": "^5.0.0",
"nativescript-drop-down": "^4.0.1",
"nativescript-orientation": "^2.2.0",
"nativescript-theme-core": "^1.0.4",
"nativescript-ui-listview": "3.5.9",
"nativescript-ui-sidedrawer": "^4.1.1",
"nativescript-unit-test-runner": "^0.3.4",
"nativescript-videoplayer": "^4.1.0",
"nativescript-webview-interface": "^1.4.2",
"nativescript-xmlobjects": "^1.1.4",
"node-sass": "^4.9.2",
"reflect-metadata": "~0.1.8",
"rxjs": "^6.0.0",
"tns-core-modules": "^4.2.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.10.3",
"#angular/cli": "^7.0.3",
"#angular/compiler": "^6.1.10",
"#angular/compiler-cli": "~6.1.0",
"#types/lodash": "4.14.68",
"#types/node": "~6.0.60",
"babel-traverse": "^6.26.0",
"babel-types": "^6.26.0",
"babylon": "6.4.5",
"jasmine-core": "^3.1.0",
"karma": "^3.1.1",
"karma-jasmine": "^1.1.1",
"karma-nativescript-launcher": "^0.4.0",
"lazy": "1.0.11",
"nativescript-dev-sass": "^1.6.0",
"nativescript-dev-typescript": "^0.7.4",
"nativescript-dev-webpack": "^0.16.3",
"tns-platform-declarations": "^3.4.1",
"ts-node": "~3.3.0",
"tslint": "^5.8.0",
"typescript": "~2.7.2",
"webpack": "^4.23.1",
"webpack-dev-server": "^3.1.10"
},
#angular/compiler supposed to be under dependencies, not devDependencies. Also with latest version, they use #ngtools/webpack instead of the actual webpack package.
So it could be better if you compare your package.json with the one in the default template and make necessary changes.
I am trying to migrate web application I'm working on to Angular 5.2.
Followed the instructions on https://angular-update-guide.firebaseapp.com/ ,
I've been able to run the application in the development mode using 'ng serve -lr' as usually.
However, after application launches, multiple HTTP requests, which weren't triggering on Angular 4.4 are executing and eventually, webpack-dev-server disconnects.
My package.json on Angular 4.4, before update:
"dependencies": {
"#agm/core": "^1.0.0-beta.1",
"#angular/animations": "^4.4.0-RC.0",
"#angular/cdk": "^2.0.0-beta.10",
"#angular/common": "^4.4.4",
"#angular/compiler": "^4.4.4",
"#angular/core": "^4.4.4",
"#angular/forms": "^4.4.4",
"#angular/http": "^4.4.4",
"#angular/material": "^2.0.0-beta.10",
"#angular/platform-browser": "^4.4.4",
"#angular/platform-browser-dynamic": "^4.4.4",
"#angular/router": "^4.4.4",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"#types/jquery": "^3.2.12",
"angular2-multiselect-dropdown": "^1.3.6",
"angular2-text-mask": "^8.0.4",
"autoprefixer": "^7.1.1",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"ng2-daterangepicker": "^2.0.12",
"rxjs": "^5.1.0",
"tinymce": "^4.6.7",
"zone.js": "^0.8.4"
}, "devDependencies": {
"#angular/cli": "1.4.5",
"#angular/compiler-cli": "^4.4.4",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"concurrently": "^3.4.0",
"htmlhint-ng2": "0.0.13",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"json-server": "^0.10.1",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"sass-lint": "latest",
"scss-lint": "0.0.0",
"scss-lint-html-reporter": "^0.3.2",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
},
"sasslintConfig": "sass-lint.yml"
}
package.json after update to angular 5.2:
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular/animations": "^5.2.3",
"#angular/cdk": "^5.1.1",
"#angular/common": "^5.2.3",
"#angular/compiler": "^5.2.3",
"#angular/core": "^5.2.3",
"#angular/forms": "^5.2.3",
"#angular/http": "^5.2.3",
"#angular/material": "^5.1.1",
"#angular/platform-browser": "^5.2.3",
"#angular/platform-browser-dynamic": "^5.2.3",
"#angular/platform-server": "^5.2.3",
"#angular/router": "^5.2.3",
"#ng-bootstrap/ng-bootstrap": "^1.0.0",
"#types/jquery": "^3.2.12",
"angular2-multiselect-dropdown": "^1.3.6",
"angular2-text-mask": "^8.0.4",
"autoprefixer": "^7.2.5",
"bootstrap": "^4.0.0",
"core-js": "^2.5.3",
"file-loader": "^1.1.6",
"jquery": "^3.2.1",
"lodash": "^4.17.5",
"mixpanel-browser": "^2.17.0",
"moment": "^2.19.1",
"ng2-daterangepicker": "^2.0.12",
"node-sass": "^4.7.2",
"popper.js": "^1.12.9",
"rxjs": "^5.5.6",
"tinymce": "^4.7.6",
"zone.js": "^0.8.20"
},
"devDependencies": {
"#angular/cli": "^1.6.7",
"#angular/compiler-cli": "^5.2.3",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.96",
"codelyzer": "^4.1.0",
"concurrently": "^3.5.1",
"htmlhint-ng2": "0.0.13",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"json-server": "^0.10.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"sass-lint": "latest",
"scss-lint": "0.0.0",
"scss-lint-html-reporter": "^0.3.2",
"ts-node": "~2.0.0",
"tslint": "^5.9.1",
"typescript": "^2.6.2",
"webpack": "^3.10.0"
},
"sasslintConfig": "sass-lint.yml"
}
Unexpected requests in the network tab of Chrome Dev Tools
Browser console errors
Similar issue posted on angular-cli GitHub page
Seems like the problem was in webpack live reloading. Solved it by adding parameter to launch script, now it is
ng serve --public-host http://localhost:4200/ -lr
I have a project that was created with the angular cli. I generate new components with the cli and even the most basic tests fail when using PhantomJS with the following stack.
× should create an instance
PhantomJS 2.1.1 (Windows 8 0.0.0)
Failed: undefined is not a constructor (evaluating 'attr.name.startsWith(_I18N_ATTR_PREFIX)')
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48660:70
filter#[native code]
_visitAttributesOf#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48660:24
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48603:32
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
I suspect that there is some incompatibility with my combination of npm packages. Here is my package.json
"dependencies": {
"#angular/animations": "^5.0.2",
"#angular/common": "^5.0.2",
"#angular/compiler": "^5.0.2",
"#angular/core": "^5.0.2",
"#angular/forms": "^5.0.2",
"#angular/http": "^5.0.2",
"#angular/platform-browser": "^5.0.2",
"#angular/platform-browser-dynamic": "^5.0.2",
"#angular/router": "^5.0.2",
"angularfire2": "^5.0.0-rc.4",
"core-js": "^2.4.1",
"crds-styles": "^1.3.1",
"firebase": "^4.6.2",
"intl": "^1.2.5",
"ng2-toastr": "^4.1.2",
"ngx-bootstrap": "1.9.3",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.4",
"#angular/compiler-cli": "^5.0.2",
"#angular/language-service": "^5.0.2",
"#types/jasmine": "2.5.38",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.89",
"codelyzer": "^4.0.1",
"firebase-tools": "^3.15.4",
"jasmine-core": "~2.6.0",
"jasmine-spec-reporter": "~4.2.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "2.2.4",
"karma-phantomjs-launcher": "^1.0.4",
"karma-teamcity-reporter": "^1.0.0",
"prettier": "^1.9.2",
"protractor": "~5.1.2",
"replace": "^0.3.0",
"ts-node": "~2.0.0",
"tslint": "~5.7.0",
"tslint-config-prettier": "^1.6.0",
"typescript": "2.5.3"
}
Any ideas?
You use the startsWith() method which was introduced in ECMAScript 6. Phantom JS currently does not support this JS version. You can see the current status here : https://github.com/ariya/phantomjs/issues/14506 . You could use ChromeHeadless instead or skip the files that contain ES6 code (but they won't be tested).