I have an Angular app based on Angular7 and there has been a very strange issue I am getting in the code.
When I load the same page multiple times then the app starts responding extremely slow and I am even unable to type in the form after repeated loading of same page.
This is not specific to only one page rather all the pages makes the app slow after repeated use of multiple pages.
Now, the concern is how to detect which code is creating this issue?
I tried to update the Angular packages but nothing helps.
Here is the package.json
{
"name": "apex",
"version": "6.0.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.5",
"#angular/animations": "7.0.1",
"#angular/common": "7.0.1",
"#angular/compiler": "7.0.1",
"#angular/core": "7.0.1",
"#angular/forms": "7.0.1",
"#angular/http": "7.0.1",
"#angular/platform-browser": "7.0.1",
"#angular/platform-browser-dynamic": "7.0.1",
"#angular/platform-server": "7.0.1",
"#angular/router": "7.0.1",
"#ng-bootstrap/ng-bootstrap": "4.1.3",
"#ng-select/ng-select": "^2.16.2",
"#ngx-translate/core": "10.0.2",
"#swimlane/ngx-datatable": "^14.0.0",
"#types/jquery": "3.3.21",
"bootstrap": "4.0.0",
"bourbon": "5.0.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"file-droppa": "^1.8.0",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng2-validation": "^4.2.0",
"ngx-bootstrap": "^4.0.1",
"ngx-chips": "^2.0.0-beta.0",
"ngx-toastr": "^9.1.2",
"ngx-ui-switch": "7.0.1",
"node-sass": "4.7.2",
"primeicons": "^1.0.0",
"primeng": "^7.1.2",
"resize-observer-polyfill": "1.4.2",
"rxjs": "6.3.3",
"screenfull": "3.3.1",
"web-animations-js": "2.2.5",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "7.0.3",
"#angular/compiler-cli": "7.0.1",
"#angular/language-service": "7.0.1",
"#types/jasmine": "2.8.6",
"#types/node": "9.4.7",
"codelyzer": "4.2.1",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "1.0.0",
"protractor": "5.3.0",
"rxjs-compat": "6.2.0",
"ts-node": "5.0.1",
"tslint": "5.7.0",
"typescript": "3.1.3",
"#angular-devkit/build-angular": "~0.6.8"
}
}
The question is too generic, you need to debug your code and see if you have any synchronic requests that might get stuck.
Related
We have below dependency error in security scan. these are giving vulnearability issue
qs
load-utils
but these dependencies are not in package.json. I have read in google that it can be indirect dependency.
How to check indirect dependency. is there any way to check.
below is my package.json
{
"name": "infy-02",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --base-href /finnacle-payment/ ",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#grapecity/wijmo.all": "5.20203.748",
"#grapecity/wijmo.angular2.all": "5.20203.748",
"ansi-html": "0.0.9",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.3",
"classlist.js": "^1.1.20150312",
"cookie-parser": "^1.4.4",
"dd-trace": "2.5.0",
"engine.io": "4.1.2",
"express": "^4.17.1",
"express-session": "^1.17.0",
"hammerjs": "^2.0.8",
"helmet": "^3.21.2",
"ini": "1.3.6",
"jquery": "3.5.1",
"jsonwebtoken": "^8.5.1",
"knex": "^0.20.11",
"minimatch": "3.0.6",
"morgan": "^1.9.1",
"node-forge": "1.0.0",
"passport": "^0.4.1",
"passport-github": "^1.1.0",
"passport-github2": "^0.1.12",
"passport-oauth2": "^1.5.0",
"passport-openidconnect": "0.0.2",
"rxjs": "~6.4.0",
"socket.io-parser": "3.3.2",
"tslib": "^1.10.0",
"wijmo": "5.20203.748",
"winston": "^3.2.1",
"xmlhttprequest-ssl": "1.6.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.19",
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.1.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
I have tried to search in google but not able to understand on which dependency qs or load-utils are dependent. could you please help on the same.
You can ask npm to explain why a package is needed, directly or indirectly:
$ npm explain qs
If it is an indirect dependency, there is not much you can do about that. You have to wait for the other packages to update their dependencies.
You can however update your own dependencies. This will also update indirect dependencies. For example, Angular is already at version 14 and you are still using Angular 8.
I'm trying to get my build much smaller to get my load time faster, but when I run
ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer and then run a lighthouse report from google dev tools
I get
what's odd is that it seems to have worked if I go into the dist folder to look at file sizes, which seem smaller that the lighthouse report.
So far to reduce the size by doing the following:
Removed old/unused package.json entries
changed all material imports to specific path like for paginator I'm importing now as
import { MatPaginator } from "#angular/material/paginator";
instead of import { MatPaginator } from "#angular/material/"; per the advice from other posts.
replaced moment with moment.min.js so that locales don't get added
added brotli for text compression.
Also I want to mention because I don't know if it's relevant, but I don't have a webpack.config.js file only a custom-webpack.config.js for brotli. The only thing I edited in angular.json to get webpack working was this for brotli
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
I've never used webpack before so this could be an issue, but I'm not sure.
package.json
{
"name": "mean-course",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --mode development --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon backend/server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "~8.2.2",
"#angular/common": "~8.2.4",
"#angular/compiler": "~8.2.4",
"#angular/core": "~8.2.4",
"#angular/forms": "~8.2.4",
"#angular/material": "^8.2.2",
"#angular/platform-browser": "~8.2.4",
"#angular/platform-browser-dynamic": "~8.2.4",
"#angular/router": "~8.2.4",
"#ng-bootstrap/ng-bootstrap": "^5.1.5",
"#ngrx/store": "^8.6.0",
"ably": "^1.1.22",
"angular-doka": "file:src/angular-doka",
"angular-filepond": "^1.0.5",
"azure-arm-rediscache": "^3.0.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"countdown": "^2.6.0",
"dotenv": "^8.2.0",
"filepond": "^4.13.4",
"filepond-plugin-file-encode": "^2.1.5",
"filepond-plugin-file-validate-size": "^2.2.0",
"filepond-plugin-file-validate-type": "^1.2.5",
"filepond-plugin-image-crop": "^2.0.3",
"filepond-plugin-image-edit": "^1.6.0",
"filepond-plugin-image-exif-orientation": "^1.0.7",
"filepond-plugin-image-preview": "^4.6.1",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.2",
"jquery": "^3.5.1",
"jsonwebtoken": "^8.5.1",
"lib-storage-service": "^1.0.2",
"material": "^0.4.1",
"moment-mini": "^2.24.0",
"ng-starrating": "^1.0.20",
"ngx-bar-rating": "^1.1.0",
"ngx-clipboard": "^12.3.0",
"ngx-device-detector": "^1.3.20",
"ngx-filepond": "^5.0.1",
"ngx-light-carousel": "^1.0.37-beta.8",
"ngx-pagination": "^5.0.0",
"ngx-simple-countdown": "^1.0.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.2.1",
"ngx-ui-carousel": "^1.3.2",
"numeral": "^2.0.6",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"tsoa": "^2.5.7",
"uid": "0.0.2",
"web-animations-js": "^2.3.2",
"yamljs": "^0.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-builders/custom-webpack": "8.4.1",
"#angular-devkit/build-angular": "^0.803.26",
"#angular/cli": "~8.3.2",
"#angular/compiler-cli": "~8.2.4",
"#angular/language-service": "~8.2.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.59",
"brotli-gzip-webpack-plugin": "^0.5.0",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"browser": {
"crypto": false
}
}
Here is a stats.json file when using ng build --prod
Here's a more detailed version as well
Remove libraries like ngx-spinner, filepond etc. which are huge as they are not treeshakable. Also if you have not configured your server to serve gzip files, do that. It will give you huge reduction in size. Also pre gzip your js files after build my using a utility like gzip-all.
https://www.npmjs.com/package/gzip-all
Also change your server max cache policy to get caching benefits.
I have Realtime database on Firebase.I am trying to fetch the data from the node
below is the image of my Realtime Database Firebase:-
I am trying to Fetch the Catagories Data into my Angular Project via following Code:-
getCatagories()
{
console.log("The Data is",this.db.list('/catagories').valueChanges());
return this.db.list('/catagories');
}
But when i print the data onto the Console it returns
something like :-
How i can retrieve the data from Real time Firebase database and displayed onto the html view
I am attaching my Package.json file for angular project:-
{
"name": "freelance-project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#ng-bootstrap/ng-bootstrap": "^2.0.0",
"angularfire2": "^5.0.2",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"firebase": "^5.5.5",
"firebase-tools": "^2.0.0",
"g": "^2.0.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "1.6.8",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Please help to Retrieve the data
Thank you in advance
I'm new in angular 5 and I'm developing a web app with it. The App works fine in Firefox but in Chrome, I get the following error:
zone.js:1666 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive'
to make the page more responsive ˋ
Package.json:
{
"name": "app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.10",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"alertify.js": "^1.0.12",
"core-js": "^2.4.1",
"crypto-js": "^3.1.9-1",
"jquery": "^3.3.1",
"ng4-geoautocomplete": "^0.1.0",
"ngx-cookie-service": "^1.0.10",
"ngx-filter-pipe": "^2.1.0",
"rxjs": "^5.5.6",
"socket.io-client": "^2.1.0",
"ts-md5": "^1.2.4",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~1.7.4",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^6.0.108",
"#types/socket.io-client": "^1.4.32",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}ˋ
I was getting this error because I have included smoothscroll.js in my angular-cli.json which contains this code affecting mouse scroll event in chrome:
var ischrome = /chrome/.test(navigator.userAgent.toLowerCase());
if (ischrome) {
ssc_addEvent("mousedown", ssc_mousedown);
ssc_addEvent("mousewheel", ssc_wheel);
ssc_addEvent("load", ssc_init)
}
after removing it, my app works perfectly fine.
I really don't know why but when I upgraded from Angular 4 => 5, ng serve doesn't seem to be working and is throwing an error:
ERROR in _this.host.getOutputName is not a function
webpack: Failed to compile.
This is what my package looks like:
{
"name": "website",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#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",
"#ng-bootstrap/ng-bootstrap": "^1.0.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"ngx-textarea-autosize": "^1.1.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.2.0",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.2.16",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.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",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
It's known issue https://github.com/angular/angular/issues/21621
Consider installing the same versions of angular dependencies:
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
but then in your devDependencies I see
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
try setting
"#angular/compiler-cli": "^5.0.0"
in your devDependencies