ERROR TypeError: Object(...) is not a function - typeerror

I have this error with angular-material in a mat-select tag. The option tag is a *ngFor list from a service. I get this error in the prod mode, but not in development mode.
ERROR TypeError: Object(...) is not a function ...
my package.json:
"dependencies": {
"#angular/animations": "^10.0.11",
"#angular/common": "^10.0.11",
"#angular/compiler": "^10.0.11",
"#angular/cdk": "^10.1.3",
"#angular/core": "^10.0.11",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "^10.0.11",
"#angular/google-maps": "^10.1.3",
"#angular/localize": "^10.0.11",
"#angular/material": "^10.1.3",
"#angular/material-moment-adapter": "^10.1.3",
"#angular/platform-browser": "^10.0.11",
"#angular/platform-browser-dynamic": "^10.0.11",
"#angular/router": "^10.0.11",
...
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1000.7",
"#angular/cdk": "^10.1.3",
...

I resolved this issue by changing:
if (isArray(json)) {
json = json.pop();
}
with
if (Array.isArray(json)) {
json = json.pop();
}
Because isArray was a homemade class that crashed.

Related

Angular 10 npm error hasBindingPropertyName is not a function

I am getting this error all of sudden in Jenkins build, i tried upgrading to latest Angular that is 10.1 but even after upgrading issue is not resolved. So i rolled back to Angular 10.0, package.json dependencies below
[09/11/2020 03:26:56.420] - Build:: Compiling
#angular/platform-browser-dynamic/testing : es2015 as esm2015
[09/11/2020 03:27:09.120] - Build:: Error: Error on worker #5:
TypeError: dir[ioType].hasBindingPropertyName is not a function
[09/11/2020 03:27:09.120] - Build:: at
Project_folder/node_modules/#angular/compiler/bundles/compiler.umd.js:30061:79
[09/11/2020 03:27:09.120] - Build:: at Array.find ()
[09/11/2020 03:27:09.120] - Build:: at setAttributeBinding
Package.json
"dependencies": {
"#angular-devkit/build-angular": "0.1000.4",
"#angular/animations": "^10.0.7",
"#angular/common": "^10.0.7",
"#angular/compiler": "^10.0.7",
"#angular/core": "^10.0.7",
"#angular/forms": "^10.0.7",
"#angular/platform-browser": "^10.0.7",
"#angular/platform-browser-dynamic": "^10.0.7",
"#angular/router": "^10.0.7",
"#ng-idle/core": "^8.0.0-beta.4",
"#ng-idle/keepalive": "^8.0.0-beta.4",
"#nguniversal/express-engine": "^9.1.1",
"#nguniversal/module-map-ngfactory-loader": "^8.1.1",
"async-exit-hook": "^2.0.1",
"body-parser": "^1.18.3",
"cfenv": "^1.2.2",
"classlist.js": "^1.1.20150312",
"core-js": "^3.0.0",
"crypto-js": "3.1.9-1",
"d3": "^5.9.2",
"dotenv": "^8.1.0",
"eureka-js-client": "^4.4.2",
"file-saver": "^2.0.1",
"google-maps": "^4.3.2",
"healthcheck-ping": "^2.0.1",
"hystrixjs": "^0.2.0",
"jsnlog": "^2.29.0",
"json-logic-js": "^1.2.2",
"jsrsasign": "^8.0.20",
"memory-cache": "^0.2.0",
"morgan": "^1.9.1",
"ng2-cookies": "^1.0.12",
"ng2-slimscroll": "^2.0.1",
"ngx-ui-loader": "^9.1.1",
"ngx-webstorage": "^5.0.0",
"node-fetch": "^2.3.0",
"preboot": "^7.0.0",
"reflect-metadata": "^0.1.13",
"source-map-support": "^0.5.11",
"string-to-json": "^0.1.0",
"text-mask-addons": "^3.8.0",
"tslib": "^2.0.0",
"web-animations-js": "^2.3.2",
"weighted-round-robin": "^2.0.2",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular/cli": "^10.0.4",
"#angular/compiler-cli": "^10.0.7",
"#angular/language-service": "^10.0.7",
"#types/express": "^4.17.7",
"#types/google-maps": "^3.2.2",
"#types/jasmine": "^3.5.11",
"#types/jasminewd2": "^2.0.6",
"#types/node": "^14.0.23",
"#types/node-fetch": "^2.5.5",
"browserstack-local": "^1.3.7",
"codelyzer": "^6.0.0",
"cpx": "^1.5.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^10.0.0",
"npm-run-all": "^4.1.5",
"protractor": "~7.0.0",
"rimraf": "^3.0.0",
"ts-loader": "^7.0.5",
"ts-node": "^8.10.2",
"tslint": "~6.1.0",
"typescript": "3.9.7",
"webpack-bundle-analyzer": "^3.1.0",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^1.7.2"
}
It seems there is an issue in #angular/compiler 10.1.1.
This isn't a solution for that problem, but I was able to workaround the issue by downgrading both #angular/compiler and #angular/compile-cli to 10.0. An update to package.json alone wasn't sufficient. I also needed to clean up node_modules to revert the code.
The steps I took that resulted in a successful build...
Update package.json
"dependencies": {
...
"#angular/compiler": "~10.0.3",
...
},
"devDependencies": {
...
"#angular/compiler-cli": "~10.0.3",
...
}
Note the tilde (~) instead of caret (^) above so that npm doesn't automatically give you 10.1.1.
rm -rf node_modules
npm update && ng build --prod
Sometimes it occurs due to extra or less closing tag in HTML.
Check your latest changes in html template file.

Angular 6 aspnetcore angular/compiler-cli to be 2.3.1 or greater

I create an application with visual studio 2017
ASP.Net core
angular
the template come with angular 4
I updated for angular 6.1.3
but I get this error
crit: Microsoft.AspNetCore.Hosting.Internal.WebHost[6]
Application startup exception
System.AggregateException: One or more errors occurred. (Version of #angular/compiler-cli needs to be 2.3.1 or greater. Current version is "6.1.3".
here is my package.json
{
"name": "WebApplication1",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "6.1.3",
"#angular/common": "6.1.3",
"#angular/compiler": "6.1.3",
"#angular/compiler-cli": "^6.1.3",
"#angular/core": "6.1.3",
"#angular/forms": "6.1.3",
"#angular/http": "6.1.3",
"#angular/platform-browser": "6.1.3",
"#angular/platform-browser-dynamic": "6.1.3",
"#angular/platform-server": "6.1.3",
"#angular/router": "6.1.3",
"#ngtools/webpack": "1.5.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/webpack-env": "1.13.0",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.3",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "^4.1.3",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "6.2.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.9.2",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.26"
},
"dependencies": {
"#angular/cli": "^6.1.4",
"popper.js": "^1.14.4",
"rxjs-compat": "^6.0.0-rc.0"
}
}

stop wacth files with tsc -w in npm

I am working on angular2 and I want to stop the browser from refresh every change in every file.I have call in package.json to
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
if I remove the tsc from the start, I cant see change in files even after refersh the browser.
any idea how to stop the watch on files and still be able to refersh the browser and see changes?
this is the full package.json
{
"name": "product-management",
"version": "1.0.0",
"author": "avi golan",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"angular2-cookie": "^1.2.5",
"angular2-highcharts": "^0.4.1",
"bootstrap": "^3.3.6",
"chart.js": "^2.4.0",
"core-js": "^2.4.1",
"highcharts": "^5.0.5",
"moment": "^2.16.0",
"ng2-bootstrap": "^1.1.16",
"ng2-charts": "^1.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}
just added bs-config.json file with to the root folder
{
"codeSync": false
}

upgrade angular2 rc6 to rc7

How can I upgrade my angular2 project from rc6 to rc7 ?
After hours of googling, I haven't find a solution.
This command line:
npm update angular2
Say that there are no update available.
First: The official 2.0.0 Release is there! :)
To face your problem, just change your package.json.
From this:
"dependencies": {
"#angular/common": "2.0.0-rc.x",
"#angular/compiler": "2.0.0-rc.x",
"#angular/core": "2.0.0-rc.x",
"#angular/forms": "2.0.0-rc.x",
"#angular/http": "2.0.0-rc.x",
"#angular/platform-browser": "2.0.0-rc.x",
"#angular/platform-browser-dynamic": "2.0.0-rc.x",
"#angular/router": "3.0.0-rc.x",
...
},
To this:
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"core-js": "^2.4.1", // !! UPDATE THESE ENTRIES TOO !!
"rxjs": "5.0.0-beta.12", // !! UPDATE THESE ENTRIES TOO !!
"ts-helpers": "^1.1.1", // !! UPDATE THESE ENTRIES TOO !!
"zone.js": "^0.6.23" // !! UPDATE THESE ENTRIES TOO !!
},
and run in the same directory npm i or the long command: npm install

npm downloading hundreds of packages?

I'm working on an Angular2 (currently on RC1) project in Visual Studio 2015; and straining my understanding of NPM.
Looking in the Dependencies/npm folder, and /node_modules there are hundreds of npm packages. Most of which are labeled as extraneous by Visual Studio (in Dependencies/npm)
I went through and removed all the extraneous packages manually (npm prune did nothing).
I apparently accidentally removed a non-extraneous package, which I attempted to restore. NPM went ahead and re-downloaded all 500+ extraneous packages again...
What am I missing?
My package.json:
{
"name": "MySite",
"version": "0.0.1",
"description": "My Site",
"repository": "./src",
"license": "UNLICENSED",
"dependencies": {
"#angular/common": "^2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "^2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/router": "^2.0.0-rc.1",
"es6-promise": "3.1.2",
"es6-shim": "0.35.0",
"jquery": "2.2.2",
"jquery-validation": "1.15.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-cssmin": "0.1.7",
"gulp-concat": "2.6.0",
"gulp-sass": "2.3.1",
"typings": "0.8.1",
"typescript": "^1.8.10",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"webpack-merge": "0.12.0"
},
"scripts": {
"postinstall": "typings install"
}
}