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
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 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 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 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