I cloned my angular application from remote and installed the dependencies. Then I tried to build an application locally using ng serve command which threw me this error as attached in the Error Image.
Error Image
I was able to bypass this by adding the below code in my tsconfig file. But I still couldn't find the reason behind it. Please let me know What's going wrong and thanks in advance.
"angularCompilerOptions":
{
"enableIvy": false
}
For reference, I am adding my package.json file
{
"name": "",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.0.6",
"#angular/cdk": "^8.2.3",
"#angular/common": "~9.0.6",
"#angular/compiler": "~9.0.6",
"#angular/core": "~9.0.6",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "~9.0.6",
"#angular/material": "^7.3.2",
"#angular/platform-browser": "~9.0.6",
"#angular/platform-browser-dynamic": "~9.0.6",
"#angular/router": "~9.0.6",
"aws-amplify": "^3.0.16",
"aws-amplify-angular": "^5.0.16",
"mat-progress-buttons": "^9.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.6",
"#angular/cli": "~9.0.6",
"#angular/compiler-cli": "~9.0.6",
"#angular/language-service": "~9.0.6",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
please follow up with this issue and check as this is a currently open ticket in amplify-js Github Repo. This seems to be the cause that gives that error.
Related
I work with an Angular project and received the following errors,
$ ng serve
Your global Angular CLI version (8.3.21) is greater than your local
version (7.0.7). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
Error: Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
at MergeMapSubscriber.project (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/#angular-devkit/core/src/workspace/workspace.js:215:42)
at MergeMapSubscriber._tryNext (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
at MergeMapSubscriber._next (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at MergeMapSubscriber.notifyNext (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at MapSubscriber._next (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/operators/map.js:55:26)
at MapSubscriber.Subscriber.next (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at SwitchMapSubscriber.notifyNext (/Users/Chaklader/WebstormProjects/Catalog/node_modules/#angular/cli/node_modules/rxjs/internal/operators/switchMap.js:86:26)
The package.json file is provided,
{
"name": "kboepdevxvd.angular",
"version": "0.0.0",
"private": true,
"dependencies": {
"rxjs": "6.5.4",
"tslib": "1.11.0",
"core-js": "2.6.11",
"zone.js": "0.10.2",
"jasmine-core": "2.99.1",
"#angular/core": "8.2.14",
"#angular/forms": "8.2.14",
"#angular/common": "8.2.14",
"#angular/router": "8.2.14",
"jasmine-marbles": "0.6.0",
"#angular/compiler": "8.2.14",
"web-animations-js": "2.3.2",
"#angular/animations": "8.2.14",
"#angular/platform-browser": "8.2.14",
"angular-in-memory-web-api": "0.8.0",
"#angular/platform-browser-dynamic": "8.2.14"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.900.3",
"#angular/cli": "~7.0.2",
"#angular/compiler-cli": "^9.0.2",
"#angular/language-service": "~7.0.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"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": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}
How do I solve the issue?
The question can be very obvious, but, this is the first time I started with the JavaScript language, so not to me.
Updated package.json from "#angular-devkit/build-angular": "^0.900.3" to "^0.12.4"
run npm install
Get this error after npm install:
+-- UNMET PEER DEPENDENCY #angular/common#6.1.10
+-- UNMET PEER DEPENDENCY #angular/core#6.1.10
`-- file-saver#1.3.8
Get this error after compile:
WARNING in ./node_modules/#agm/core/fesm5/agm-core.js
4538:120-128 "export 'ɵɵinject' was not found in '#angular/core'
WARNING in ./node_modules/#agm/core/fesm5/agm-core.js
4538:34-52 "export 'ɵɵdefineInjectable' was not found in '#angular/core'
my package.json is:
{
"name": "web-app",
"version": "2.1.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"public": "ng serve --port 8080 --host 0.0.0.0",
"build": "ng build --prod --build-optimizer",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/material": "^6.4.7",
"#angular/material-moment-adapter": "^6.4.2",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"#turf/turf": "latest",
"#types/file-saver": "^1.3.0",
"core-js": "^2.5.7",
"cron": "^1.7.2",
"enhanced-resolve": "^3.3.0",
"file-saver": "^1.3.8",
"hammerjs": "^2.0.8",
"highcharts": "^6.1.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"ngx-clipboard": "^11.1.1",
"ngx-gauge": "1.0.0-beta.7",
"progressbar.js": "^1.0.1",
"rxjs": "6.2.2",
"rxjs-compat": "6.2.2",
"screenfull": "^3.3.2",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"ts-helpers": "^1.1.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^1.6.6",
"#angular/compiler-cli": "^6.1.0",
"#types/googlemaps": "^3.30.16",
"#types/highcharts": "^5.0.25",
"#types/jasmine": "2.8.8",
"#types/node": "~8.0.0",
"#types/socket.io": "^1.4.36",
"#types/socket.io-client": "^1.4.32",
"codelyzer": "^4.4.2",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "2.0.5",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^5.10.0",
"typescript": "2.7.2"
},
"browserslist": [
"last 2 versions",
"ie 11"
]
}
In my case, I only changed version from "#agm/core": "^1.0.0-beta.5" to "#agm/core": "1.0.0".
For angular 7, 8 the new version "#agm/core": "1.1.0" doesn't work and "#agm/core": "^1.0.0-beta.5" neither.
Try removing your node_modules folder, and package-lock.json file, then rerun npm install
Or, run npm i --force, the force flag will force npm to fetch remote resources even if a local copy exists on disk.
And lastly, you can try reinstalling npm:
$ npm i -g npm
Yash,
I solved it by taking a clone of my project in a new folder and then upgraded the NPM version and installed node_modules again.
I solved this issue by opening node_modules/ and removing all occurrences of ɵɵinject and ɵɵdefineInjectable from #agm/core package.
This is my package.json
{
"name": "eterna-posta-web",
"version": "0.0.0",
"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.7",
"#agm/js-marker-clusterer": "^1.0.0",
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "^7.1.3",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#microsoft/signalr": "^5.0.3",
"#techiediaries/ngx-qrcode": "^9.1.0",
"core-js": "^2.5.4",
"js-marker-clusterer": "^1.0.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.8",
"#angular/cli": "~7.1.2",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
This is the original answer: answer
finally all I had to do was
npm i #agm/core#1.0.0
then my OLD project worked fine
just make #agm/core to #agm/core": "1.0.0"
and
hit "npm i"
this worked for me......after some research
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 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
I'm trying to import angular2-cookie in my angular4 project.
My project is built with angular-cli#1.2.7, here is my package.json:
{
"name": "ng-admin",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
"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",
"angular2-cookie": "^1.2.6",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
the angular2-cookie dochttps://github.com/salemdar/angular2-cookie#cli ask me to add something in angular-cli-build.js, but I have neither angular-cli-build.js nor systemjs.config.js
I import angular2-cookie in app.module.ts with:
import { CookieService } from 'angular2-cookie/services/cookies.service';
...
...
providers: [
CookieService
]
My project works well with ng server and it also works well in my chrome.
it is built successfully with ng build --prod, but when I run it in chrome or run it with ng server --aot , chrome console show this error:
ERROR Error: No provider for CookieOptions!
How can I solve this problem? Thanks all!
Add CookieOptions in your import statement like import { CookieService, CookieOptions } from 'angular2-cookie'; and then add both CookieService and CookieOptions in your Root Module's provider array.