I unzipped a angular application and did a npm install it worked well and later did ng serve but when i did i got the below issue
I install node-sass and cleared node cache also and deleted node_nodules & deleted package-lock.json and re installed again issue still persists.
I am using primeng 8.0,boostrap5.1.1,angular8,gojs
local development setup info using
Angular 12 , Node 14
angular.json
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/draggableLinks",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/saga-blue/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
],
"scripts": []
},
package.json
"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": "~8.2.3",
"#angular/common": "~8.2.3",
"#angular/compiler": "~8.2.3",
"#angular/core": "~8.2.3",
"#angular/forms": "~8.2.3",
"#angular/platform-browser": "~8.2.3",
"#angular/platform-browser-dynamic": "~8.2.3",
"#angular/router": "~8.2.3",
"bootstrap": "^5.1.1",
"gojs": "^2.0.16",
"primeicons": "^4.1.0",
"primeng": "^8.0.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.0",
"#angular/cli": "~8.3.0",
"#angular/compiler-cli": "~8.2.3",
"#angular/language-service": "~8.2.3",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.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.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"
}
}
Try modifying stylesheet urls in angular.json by removing './' as below.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
]
Related
I wanted to deploy an almost finished Angular project and for deployment I executed ng build --prod. It created a dist which than I deployed to the server. All understood and Ok till here but now when I change stuff in the project and execute 'ng serve -o' I don't see console messages that I set in those components where I wrote those console.log messages but rather these are being referred from 'main.js:1' and 'polyfills.js:1'.
I am still getting those console messages but I don't know in which component it is being printed on the console.
ERROR TypeError: Cannot read property 'UserzAccessStatus' of undefined
at main.js:1
at i.<computed> (polyfills.js:1)
at e.invokeTask (polyfills.js:1)
at Object.onInvokeTask (main.js:1)
at e.invokeTask (polyfills.js:1)
at t.runTask (polyfills.js:1)
at t.invokeTask (polyfills.js:1)
at invoke (polyfills.js:1)
at r.args.<computed> (polyfills.js:1)
Console.log() messages in chrome's console
package.json file
{
"name": "gbcl",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.0.0",
"#angular/common": "~12.0.0",
"#angular/compiler": "~12.0.0",
"#angular/core": "~12.0.0",
"#angular/forms": "~12.0.0",
"#angular/platform-browser": "~12.0.0",
"#angular/platform-browser-dynamic": "~12.0.0",
"#angular/router": "~12.0.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"jquery": "^3.6.0",
"mongoose": "^5.12.8",
"mongoose-unique-validator": "^2.0.3",
"popper.js": "^1.16.1",
"rxjs": "~6.5.3",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.0.0",
"#angular/cli": "^12.0.0",
"#angular/compiler-cli": "^12.0.0",
"#types/jasmine": "~3.7.2",
"#types/jasminewd2": "~2.0.9",
"#types/node": "^15.0.3",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.6.0",
"nodemon": "^2.0.7",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
}
}
tsconfig.app.json file
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"angularCompilerOptions":{
"enableIvy": true,
"strictTemplates": true,
"strictInjectionParameters": true
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
If further information about any file is required than please ask.
To see the exact location of the error in production environment
ng build --prod --build-optimizer --sourceMap=true
you can get build.
Your error is most likely "???????" There is no "UserzAccessStatus" key in the object you print with its name.
You have to update the serve configuration part in your angular.json according to this reply
Angular 12 'ng serve' builds apps slowly, almost like production builds
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.
I am a student learning Angular by building project. When i do ng build it works but ng build --prod gives an error.
I have tried removing node_modules and then reinstalling it again.
The error says as follows:
ERROR in ./src/app/app.module.ngfactory.js 41:3371-3377 "export 'ɵa'
(imported as 'i12') was not found in '#angular/common'
Here is my package.json file.
"name": "angular-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.0",
"#angular/cdk": "^8.1.3",
"#angular/common": "~8.2.0",
"#angular/compiler": "~8.2.0",
"#angular/core": "~8.2.0",
"#angular/forms": "~8.2.0",
"#angular/platform-browser": "~8.2.0",
"#angular/platform-browser-dynamic": "~8.2.0",
"#angular/router": "~8.2.0",
"#ng-bootstrap/ng-bootstrap": "^5.1.0",
"#types/socket.io-client": "^1.4.32",
"avatar-name-initials": "^2.0.5",
"bootstrap": "^4.3.1",
"express": "^4.17.1",
"ng2-file-upload": "^1.3.0",
"path": "^0.12.7",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.4",
"socket.io-client": "^2.3.0",
"sweetalert2": "^8.16.1",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.802.1",
"#angular/cli": "^8.3.0",
"#angular/compiler-cli": "^8.2.3",
"#angular/language-service": "~8.2.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"enhanced-resolve": "^3.3.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.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"
}
}
Production Configuration
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
Note: If i turn aot and buildOptimizer to false, it works and no error is thrown.
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'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.