I'm using NativeScript plugin carousel to get carousel in my app.
nativescript-carousel
I need to show bit of previous and next slides so that user can know there is more slides exist.
I checked issues on its GitHub repo. I can not set width to a slide as default it'll take 100% off the screen. Can anyone suggest an alternate way or plugin for this, for NativeScript?
version info- package.json
"dependencies": {
"#angular/animations": "~8.2.0",
"#angular/cdk": "^8.2.3",
"#angular/common": "~8.2.0",
"#angular/compiler": "~8.2.0",
"#angular/core": "~8.2.0",
"#angular/forms": "~8.2.0",
"#angular/http": "8.0.0-beta.10",
"nativescript-angular": "^8.2.2",
"nativescript-carousel": "^6.1.1",
"tns-core-modules": "~6.3.0"
},
"devDependencies": {
"nativescript-dev-webpack": "^1.3.0"
}
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
We have an app written in NativeScript Angular and based on BottomNavigation and TabView.
I've posted before about issues we have had building our app after migrating from NativeScript 6 to 8.
I can't share our code base so I have taken the legacy code in {N} 6 and stripped out all of our own components to leave just the bare bones.
There is a public repo here: https://github.com/syborp/testapp
It builds and runs fine in {N} 6 and there is a screenshot on the GitHub README.
When we migrate to {N} 8 we keep ending up at this error.
Searching for devices...
Preparing project...
webpack is watching the files...
C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40
throw new Error("The target entry-point \"" + invalidTarget.entryPoint.name + "\" has missing dependencies:\n" +
^
Error: The target entry-point "undefined" has missing dependencies:
- nativescript-angular/element-registry
at TargetedEntryPointFinder.findEntryPoints (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
at C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:28:29)
at C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59
at SyncLocker.lock (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
at SingleProcessExecutorSync.execute (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
at Object.mainNgcc (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\main.js:74:25)
at Object.process (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\index.js:29:23)
at NgccProcessor.processModule (C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ngcc_processor.js:175:16)
at C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ivy\host.js:146:18
at C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ivy\host.js:76:24
at Array.map (<anonymous>)
at Object.host.resolveModuleNames (C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ivy\host.js:74:32)
at actualResolveModuleNamesWorker (C:\Users\user\testapp\node_modules\typescript\lib\typescript.js:109497:133)
at resolveModuleNamesWorker (C:\Users\user\testapp\node_modules\typescript\lib\typescript.js:109760:26)
at resolveModuleNamesReusingOldState (C:\Users\user\testapp\node_modules\typescript\lib\typescript.js:109857:24)
Executing webpack failed with exit code 1.
It sounds like the entry point main.ts cannot be found but I think it looks ok in package.json.
"description": "Test App",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"scripts": {
"lint": "tslint \"app/**/*.ts\""
},
"dependencies": {
"#angular/animations": "^12.2.5",
"#angular/common": "^12.2.5",
"#angular/compiler": "^12.2.5",
"#angular/core": "^12.2.5",
"#angular/forms": "^12.2.5",
"#angular/http": "8.0.0-beta.10",
"#angular/platform-browser": "^12.2.5",
"#angular/platform-browser-dynamic": "^12.2.5",
"#angular/router": "^12.2.5",
"#master.technology/permissions": "^2.0.1",
"#nativescript/angular": "^12.2.0",
"#nativescript/core": "~8.1.1",
"#nativescript/fingerprint-auth": "^8.0.0",
"nativescript": "^6.5.0",
"nativescript-app-sync": "^2.0.0",
"nativescript-bottom-navigation": "^2.0.5",
"nativescript-camera": "^4.0.2",
"nativescript-drop-down": "^5.0.6",
"nativescript-fancyalert": "^3.0.9",
"nativescript-fingerprint-auth": "^7.0.2",
"nativescript-fontawesome": "^1.0.0",
"nativescript-gradient": "^2.0.1",
"nativescript-imagepicker": "^7.1.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-modal-datetimepicker": "^1.1.4",
"nativescript-pdf-view": "^2.1.0",
"nativescript-permissions": "^1.3.12",
"nativescript-theme-core": "~1.0.4",
"nativescript-toast": "^1.4.6",
"nativescript-ui-listview": "^10.0.2",
"reflect-metadata": "~0.1.10",
"ruby": "^0.6.1",
"rxjs": "~7.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.2.5",
"#angular/cli": "^12.2.5",
"#angular/compiler-cli": "^12.2.5",
"#nativescript/android": "~8.1.1",
"#nativescript/webpack": "~5.0.0",
"#ngtools/webpack": "^12.2.5",
"#types/node": "14.6.2",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"codelyzer": "~4.5.0",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"sass": "~1.39.0",
"tslint": "~5.12.1",
"typescript": "~4.3.5",
"uglifyjs-webpack-plugin": "^2.2.0"
},
"main": "./app/main.ts"
}
Or is it a webpack issue?
Any advice much appreciated.
TIA.
Server rendered pages contain non-minified css and served without gzipping. Can anyone suggest a solution to cater this as when I include material 5.0.0-rc0 and some of my css in the application then the static server rendered page size reaches to at least a 300kb.
package.json:
"#angular/animations": "^5.0.0",
"#angular/cdk": "^5.0.0-rc0",
"#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/material": "^5.0.0-rc0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"babel-runtime": "^6.20.0",
"meteor-node-stubs": "~0.3.0",
"meteor-rxjs": "^0.4.8",
"rxjs": "^5.5.0",
"zone.js": "^0.8.16"
Compiler Versions:
angular-compilers#0.2.8_1
angular-html-compiler#0.2.8
angular-scss-compiler#0.2.8
angular-typescript-compiler#0.2.8_1
babel-compiler#6.24.7
babel-runtime#1.1.1
Try adding material theme files to global stylesheet main.scss in client folder in your application source files.
I just enhanced my app with kendo's DialogModule, and now webpacks fails to compie, due to this error:
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/intl.service.d.ts (1,117): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/cldr-intl.service.d.ts (1,117): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/date.pipe.d.ts (3,35): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/number.pipe.d.ts (3,37): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/intl-members.d.ts (1,117): Cannot find module '#telerik/kendo-intl'.
ERROR in ./~/#progress/kendo-angular-intl/dist/es/intl-members.js
Module not found: Error: Can't resolve '#telerik/kendo-intl' in '/Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es'
# ./~/#progress/kendo-angular-intl/dist/es/intl-members.js 1:0-44
# ./~/#progress/kendo-angular-intl/dist/es/main.js
# ./~/#progress/kendo-angular-grid/dist/es/grid.module.js
# ./~/#progress/kendo-angular-grid/dist/es/main.js
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
this is my package.json content:
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"#progress/kendo-angular-buttons": "^1.0.4",
"#progress/kendo-angular-dateinputs": "^1.0.4",
"#progress/kendo-angular-dialog": "^1.0.3",
"#progress/kendo-angular-dropdowns": "^0.1.0",
"#progress/kendo-angular-excel-export": "^1.0.2",
"#progress/kendo-angular-grid": "^1.2.0",
"#progress/kendo-angular-inputs": "^1.0.5",
"#progress/kendo-angular-intl": "^1.2.0",
"#progress/kendo-angular-l10n": "^1.0.1",
"#progress/kendo-angular-layout": "^1.0.4",
"#progress/kendo-data-query": "^1.0.4",
"#progress/kendo-drawing": "^1.1.0",
"#progress/kendo-theme-default": "^2.37.5",
"angular2-google-maps": "^0.17.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.7.1",
"rxjs": "^5.4.1",
"zone.js": "^0.8.12"
}
I'm aware i'm using angular4, so far it never caused any problem
I am using a setup of Angular 4.2.6 and Kendo UI. Try the following dependencies in your package.json. It works for me.
"dependencies": {
"#angular/animations": "4.2.6",
"#angular/common": "4.2.6",
"#angular/compiler": "4.2.6",
"#angular/core": "4.2.6",
"#angular/forms": "4.2.6",
"#angular/http": "4.2.6",
"#angular/material": "2.0.0-beta.7",
"#angular/platform-browser": "4.2.6",
"#angular/platform-browser-dynamic": "4.2.6",
"#angular/router": "4.2.6",
"#progress/kendo-angular-buttons": "1.0.5",
"#progress/kendo-angular-dialog": "1.0.4",
"#progress/kendo-angular-dropdowns": "1.1.2",
"#progress/kendo-angular-grid": "1.2.3",
"#progress/kendo-angular-inputs": "1.0.7",
"#progress/kendo-angular-intl": "1.2.1",
"#progress/kendo-angular-l10n": "1.0.2",
"#progress/kendo-angular-label": "1.0.2",
"#progress/kendo-angular-layout": "1.0.5",
"#progress/kendo-data-query": "1.0.5",
"#progress/kendo-theme-default": "2.38.1",
"core-js": "2.4.1",
"rxjs": "5.4.2",
"zone.js": "0.8.13"
}
I hope the current versions of the Kendo UI dialog and intl package fix your issue.
"#progress/kendo-angular-intl": "1.2.1"
"#progress/kendo-angular-dialog": "1.0.4"
Update: Angular 4.3.0 is out - you may try this version instead of 4.2.6
I am using Ionic 2 RC1. I want to know how to include source maps for every .ts file that is transpiled into main.js file and include their mappings in main.js.map.
Somehow when trying to debug the app loaded into an iPad connected to my Mac from Safari, I don't see .map file being loaded/visible in the network tab or resource tab. I turned on Web Inspector on my iPad.
How do I troubleshoot source map missbehaviour and what can I do to make it available in Safari, Chrome and other browsers.
Thanks,
Rad
Update 1:
I am using these npm packages:
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/compiler-cli": "0.6.2",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/platform-server": "2.0.0",
"#ionic/storage": "1.1.6",
"ionic-angular": "2.0.0-rc.1",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.21"
},
"devDependencies": {
"#ionic/app-scripts": "^0.0.36",
"typescript": "^2.0.3"
},
you should use "#ionic/app-scripts": "0.0.36" in your dependencies packages.json file - this should do the work .