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.
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'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.
I'm creating a ASP.NET Core 2.0 MVC application and integrating with Angular 4. I created a NPM package configuration file called package.json and saved in the root folder.
I don't want to use angular-cli, but use Gulp to compile and bundle the angular files.
I'm getting errors when the Visual Studio 2017 install the packages. Should I use devDependencies or dependencies in the package.json file.
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"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",
"core-js": "^2.4.1",
"gulp": "^3.9.1",
"gulp-babel": "7.0.0",
"gulp-concat": "2.6.1",
"gulp-sourcemaps": "2.6.1",
"gulp-typescript": "3.2.1",
"minimatch": "3.0.4",
"minimist": "1.2.0",
"rimraf": "2.6.1",
"require-dir": "0.3.2",
"rxjs": "^5.4.2",
"systemjs-builder": "0.16.9",
"zone.js": "^0.8.14",
"typescript": "2.4.2"
},
"devDependencies": {
"#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",
"core-js": "^2.4.1",
"gulp": "^3.9.1",
"gulp-babel": "7.0.0",
"gulp-concat": "2.6.1",
"gulp-sourcemaps": "2.6.1",
"gulp-typescript": "3.2.1",
"minimatch": "3.0.4",
"minimist": "1.2.0",
"rimraf": "2.6.1",
"require-dir": "0.3.2",
"rxjs": "^5.4.2",
"systemjs-builder": "0.16.9",
"zone.js": "^0.8.14",
"typescript": "2.4.2"
}
}
the short answer is you should use both, dependencies for UI libraries that you want to bundle, and devDependencies for those that allow you to develop the app.
there's an awesome explanation in this post: https://stackoverflow.com/a/22004559/1303897
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
After adding the following "Angular 2" dependencies to MVC wwwroot folder
(Copying from "node_modules" to "wwwroot/lib/ng2")
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/compiler-cli": "0.5.0",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.17",
I got the following error when trying to rebuild the project
Error MSB6006 "tsc.exe" exited with code 1. Project.Name "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" 214
The project compiles successfully when I deleted the folder "wwwroot/lib/ng2/#angular/compiler-cli". but I don't know yet if this will affect angular2 development or not?