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.
Related
I'm trying to create an Angular 8 project, but I always end up having an error when I try to compile the resulting app due to a wrong path in my node_modules folder; specifically in the file located at #angular/cli/commands/add-impl.d.ts, which contains this:
import { Arguments } from '../models/interface';
import { SchematicCommand } from '../models/schematic-command';
import { Schema as AddCommandSchema } from './add';
export declare class AddCommand extends SchematicCommand<AddCommandSchema> {
readonly allowPrivateSchematics = true;
readonly allowAdditionalArgs = true;
readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager;
run(options: AddCommandSchema & Arguments): Promise<number | void>;
reportAnalytics(paths: string[], options: AddCommandSchema & Arguments, dimensions?: (boolean | number | string)[], metrics?: (boolean | number | string)[]): Promise<void>;
private isPackageInstalled;
private executeSchematic;
private findProjectVersion;
private hasMismatchedPeer;
}
The line reading readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager; always gives an error since the specified path can't find the file its pointing to; I checked and I actually don't see any folder called dist-schema/packages, and I don't know what its purpose is; if I change the route to: #/angular/cli/lib/config/schema the error goes away and everything works fine, but if generate the node_modules folder again, the error comes back since the route is again specified as before.
I haven't been able to find much information regarding this, and nothing at all that points me to a solution; I've tried upgrading my Angular version to the latest 8.x.x version, deleting my package-lock.json file, deleting node_modules and installing again and none seem to work.
This is my package.json file:
{
"name": "opti-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"watch": "gulp watch",
"dev": "gulp development",
"prod": "gulp production",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "^8.2.3",
"#angular/common": "~8.0.1",
"#angular/compiler": "~8.0.1",
"#angular/core": "~8.0.1",
"#angular/forms": "~8.0.1",
"#angular/google-maps": "^9.0.0-rc.0",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.0.1",
"#angular/platform-browser-dynamic": "~8.0.1",
"#angular/router": "~8.0.1",
"#ckeditor/ckeditor5-angular": "^1.1.2",
"#gvreddy04/ckeditor5-build-classic-all-features": "^16.11.0",
"#mdi/font": "^3.9.97",
"#ngu/carousel": "^1.5.5",
"#swimlane/ngx-charts": "^13.0.2",
"#swimlane/ngx-datatable": "^15.0.2",
"#types/googlemaps": "^3.39.2",
"#types/html2canvas": "0.0.35",
"#types/jspdf": "^1.3.2",
"angular-fusioncharts": "^3.0.3",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.2",
"fusioncharts": "^3.14.1",
"google-libphonenumber": "^3.2.6",
"gulp": "^4.0.2",
"gulp-replace": "^1.0.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.1",
"html2pdf.js": "^0.9.1",
"intl-tel-input": "^14.1.0",
"jquery": "^3.5.1",
"jspdf": "^1.5.3",
"material-design-icons": "^3.0.1",
"ng-recaptcha": "^5.0.0",
"ng2-pdf-viewer": "^6.1.2",
"ng2-table": "^1.3.2",
"ngx-bootstrap": "^5.2.0",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^8.2.0",
"ngx-gauge": "^1.0.0-beta.11",
"ngx-highlightjs": "^4.0.0",
"ngx-hotjar": "^8.0.2",
"ngx-image-cropper": "^3.2.1",
"ngx-intl-tel-input": "^2.3.1",
"ngx-mat-select-search": "^2.0.0",
"popper.js": "^1.16.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.8",
"#angular/cli": "^8.3.18",
"#angular/compiler-cli": "~8.0.1",
"#angular/language-service": "~8.0.1",
"#types/jasmine": "^3.4.6",
"#types/jasminewd2": "^2.0.8",
"#types/node": "~8.9.4",
"codelyzer": "^5.2.0",
"dotenv": "^8.2.0",
"gulp-file": "^0.4.0",
"gulp-rename": "^1.4.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"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.4.5"
}
}
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 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.
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
I am trying to use d3.js in angular2
Iam using the below command to install d3 in Angular2
npm install --save d3
install --save-dev #types/d3
my package.json look like
{
"name": "my-app",
"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": "^4.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"core-js": "^2.4.1",
"d3": "^4.10.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.2.1",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/d3": "^4.10.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#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"
}
}
and i add path to .angular-cli.json
some of the properties i cant access like d3.svg(), d3.scale() and some others
It returns error.
what could be the reason?
You can import the specific method from d3, the same way rxjs operators.
import { scaleLinear } from 'd3-scale';
You can use the method without the d3 namespace as:
var x = scaleLinear();
Alternatively, you can import all
import * as d3 from "d3";
var x = d3.scaleLinear();
Note that there is no scale in d3.v4