I've recently upgraded my Angular project to version 8, but I'm struggling to upgrade angularfire2 to version 5.2.1 which supports Angular 8. I constantly getting the error:
TypeError: app.auth is not a function...
I've already tried to uninstall and reinstall angularfire2. I also cleared the entire node modules folder and reinstalled all the packages.
This is what the dependencies look like:
"dependencies": {
"#angular/pwa": "^0.13.0",
"core-js": "^2.6.0",
"firebase-admin": "^7.0.0",
"firebase-functions": "^2.2.0",
"material-bottom-nav": "^1.0.6",
"ng": "0.0.0-rc6",
"ngx-infinite-scroll": "^7.0.1",
"time-ago-pipe": "^1.3.2",
"ts-deepcopy": "^0.1.4",
"tslib": "^1.9.0",
"update": "^0.7.4",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.800.6",
"#angular/animations": "^8.0.3",
"#angular/cdk": "^8.0.1",
"#angular/cli": "^8.0.6",
"#angular/common": "^8.0.3",
"#angular/compiler": "^8.0.3",
"#angular/compiler-cli": "^8.0.3",
"#angular/core": "^8.0.3",
"#angular/fire": "^5.2.1",
"#angular/flex-layout": "^8.0.0-beta.26",
"#angular/forms": "^8.0.3",
"#angular/language-service": "^8.0.3",
"#angular/material": "^8.0.1",
"#angular/platform-browser": "^8.0.3",
"#angular/platform-browser-dynamic": "^8.0.3",
"#angular/platform-server": "^8.0.3",
"#angular/router": "^8.0.3",
"#angular/service-worker": "^8.0.3",
"#types/core-js": "^0.9.46",
"#types/jasmine": "2.8.7",
"#types/lodash": "^4.14.126",
"#types/node": "^10.12.30",
"codelyzer": "~4.3.0",
"firebase": "^6.3.1",
"hammerjs": "^2.0.8",
"i": "^0.3.5",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.5",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.4.0",
"lodash": "^4.17.15",
"npm": "^6.9.0",
"protractor": "~5.3.2",
"rxjs": "^6.5.2",
"ts-node": "~6.0.5",
"tslint": "~5.10.0",
"typescript": "^3.4.5"
},
Did someone already upgrade to angularfire2 version 5.2.1 and can help me out with this?
Uninstalling the firebase-admin library from the project solved the issue.
npm uninstall firebase-admin
Related
I upgrade Angular 7 to 11 after that #hallysonh/ngx-imageviewer#2.0.4 (next, previous and zoom) options are not working. I tried with both node 12.20.0 and 14.15.0.I'm able to view the pdfthese buttons but previous, next, zoom buttons are not working. nothing is happening while clicking it. I guess my pdfjs-dist#2.0.489 is not compatible with Angular 11. May I know the pdfjs-dist suitable version for Angular11?
"dependencies": {
"#angular/animations": "^11.2.14",
"#angular/cdk": "^11.2.13",
"#angular/common": "~11.2.14",
"#angular/compiler": "~11.2.14",
"#angular/core": "~11.2.14",
"#angular/forms": "~11.2.14",
"#angular/material": "^11.2.13",
"#angular/platform-browser": "~11.2.14",
"#angular/platform-browser-dynamic": "~11.2.14",
"#angular/router": "~11.2.14",
"#hallysonh/ngx-imageviewer": "^2.0.4",
"#stomp/stompjs": "^4.0.7",
"#types/bootstrap": "^4.2.0",
"#types/highcharts": "^5.0.36",
"#types/jquery": "^3.3.29",
"#types/node": "^12.11.1",
"angular-user-idle": "^2.2.1",
"angular2-tree-diagram": "^1.0.6",
"bootstrap": "^4.1.3",
"core-js": "2.5.4",
"d3": "^5.7.0",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"fscreen": "^1.0.2",
"hammerjs": "^2.0.8",
"highcharts": "^7.0.3",
"highcharts-angular": "^2.4.0",
"jquery": "^3.3.1",
"material-design-icons": "^3.0.1",
"moment": "^2.23.0",
"moment-timezone": "^0.5.23",
"ng-sidebar": "^8.0.0",
"ng2-ace-editor": "^0.3.9",
"pdfjs-dist": "^2.0.489",
"popper.js": "^1.14.5",
"print-js": "1.0.47",
"proj4": "^2.5.0",
"rxjs": "~6.6.7",
"sockjs-client": "^1.3.0",
"tslib": "^2.3.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1102.18",
"#angular/cli": "~11.2.18",
"#angular/compiler-cli": "~11.2.14",
"#angular/language-service": "~11.2.14",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"glob-run": "^0.1.7",
"husky": "^4.2.5",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"js-beautify": "^1.11.0",
"karma": "~6.3.16",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.2.9",
"prettier": "^2.0.5",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"tslint-sonarts": "^1.9.0",
"typescript": "~4.0.8"
}
}
I've tried this. npx -p #storybook/cli sb init --type angular, on an existing project but fails with.
And dependancies look like :
"dependencies": {
"#angular/animations": "^9.0.6",
"#angular/cdk": "^9.1.2",
"#angular/common": "^9.0.6",
"#angular/compiler": "^9.0.6",
"#angular/core": "^9.0.6",
"#angular/forms": "^9.0.6",
"#angular/http": "^7.2.16",
"#angular/localize": "^9.0.6",
"#angular/material": "^9.1.2",
"#angular/platform-browser": "^9.0.6",
"#angular/platform-browser-dynamic": "^9.0.6",
"#angular/platform-server": "^9.0.6",
"#angular/router": "^9.0.6",
"#ng-bootstrap/ng-bootstrap": "^6.0.0",
"#nguniversal/express-engine": "^9.0.2",
"#nguniversal/module-map-ngfactory-loader": "^8.2.6",
"#swimlane/ngx-charts": "^13.0.2",
"#types/lodash": "^4.14.149",
"angular2-prettyjson": "^3.0.1",
"angularfire2": "^5.4.2",
"angularx-qrcode": "^2.1.1",
"archiver": "^3.1.1",
"body-scroll-lock": "^2.6.4",
"bootstrap": "^4.4.1",
"core-js": "^3.6.4",
"firebase": "^7.11.0",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"localforage": "^1.7.3",
"lodash": "^4.17.15",
"marked": "^1.1.0",
"moment": "^2.24.0",
"open-graph": "^0.2.4",
"rxjs": "^6.5.4",
"scss": "^0.2.4",
"ts-loader": "^6.2.1",
"ts-transformer-keys": "^0.4.1",
"turndown": "^6.0.0",
"underscore.string": "^3.3.5",
"zip-local": "^0.3.4",
"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",
"#babel/core": "^7.10.4",
"#storybook/addon-actions": "^5.3.19",
"#storybook/addon-links": "^5.3.19",
"#storybook/addon-notes": "^5.3.19",
"#storybook/addons": "^5.3.19",
"#storybook/angular": "^5.3.19",
"#types/bootstrap": "^4.3.1",
"#types/jasmine": "^3.5.9",
"#types/jasminewd2": "^2.0.8",
"#types/jquery": "^3.3.33",
"#types/node": "^13.9.1",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.7",
"codelyzer": "~5.2.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.2",
"node-sass": "^4.13.1",
"protractor": "~5.4.3",
"ts-node": "~8.6.2",
"tslint": "^6.1.1",
"typescript": "~3.7.5"
}
}
I've also tried removing node modules and installing again, it just comes back here.
it looks like there are 2 '}'s at the end, is that intentional? if not try removing one of them.
We've upgraded our application from Angular 5.2 to 7.2 and the styling got messed up. The spacing between some elements (for example: icons and text) has changed, disappeared or decreased.
Have any of you encountered an issue like this after upgrading an Angular application or the following packages?
I already reverted back every possible package to their staging versions, but it didn't solve the problem.
I have no idea where to start the troubleshooting to find the source of the problem. The styling and the HTML haven't been changed.
We updated:
Bootstrap: from 4.1.0 to 4.3.1
#ng-bootstrap/ng-bootstrap: from 1.1.2 to 4.0.0
ngx-bootstrap: from 2.0.5 to 4.0.0
The styling is global from the angular.json:
Where we import the used Bootstrap components:
The package.json look like this:
{
"private": true,
"dependencies": {
"#angular/animations": "7.2.11",
"#angular/common": "7.2.11",
"#angular/compiler": "7.2.11",
"#angular/core": "7.2.11",
"#angular/forms": "7.2.11",
"#angular/http": "7.2.11",
"#angular/platform-browser": "7.2.11",
"#angular/platform-browser-dynamic": "7.2.11",
"#angular/platform-server": "7.2.11",
"#angular/router": "7.2.11",
"#fortawesome/angular-fontawesome": "0.3.0",
"#fortawesome/fontawesome-svg-core": "1.2.12",
"#fortawesome/free-solid-svg-icons": "5.6.3",
"#ng-bootstrap/ng-bootstrap": "4.0.0",
"#nguniversal/express-engine": "7.1.1",
"#ngx-translate/core": "11.0.1",
"#ngx-translate/http-loader": "4.0.0",
"acorn": "6.1.1",
"angular2-image-zoom": "1.2.1",
"bootstrap": "4.3.1",
"braintree-web-drop-in": "1.16.0",
"core-js": "2.6.5",
"file-saver": "2.0.1",
"font-awesome": "4.7.0",
"htmllint": "0.7.3",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng-jhipster": "0.9.3",
"ng-recaptcha": "4.2.1",
"ng2-order-pipe": "0.1.5",
"ngx-bootstrap": "4.0.0",
"ngx-color-picker": "7.4.0",
"ngx-cookie": "4.1.2",
"ngx-webstorage": "3.0.2",
"popper.js": "1.14.7",
"print-js": "1.0.54",
"rxjs": "6.4.0",
"rxjs-compat": "6.4.0",
"tslib": "1.9.3",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.13.7",
"#angular/cli": "7.3.7",
"#angular/compiler-cli": "7.2.11",
"#angular/language-service": "7.2.11",
"#types/file-saver": "2.0.0",
"#types/hammerjs": "2.0.36",
"#types/jasmine": "3.3.12",
"#types/jasminewd2": "2.0.6",
"#types/node": "11.12.0",
"codelyzer": "5.0.0",
"jasmine-core": "3.3.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.0.1",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.0.5",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.0",
"node-sass": "4.11.0",
"protractor": "6.0.0",
"sort-json": "2.0.0",
"ts-node": "8.0.3",
"tslint": "5.14.0",
"typescript": "3.2.4"
}
}
I believe from Angular 6 the preserveWhitespace option is false by default. To turn it on again globally you can add an option in tsconfig.app.json:
"angularCompilerOptions": {
"preserveWhitespaces": true
}
Or you can use the directive ngPreserveWhitspaces on any elements where you need the whitespace to be preserved.
See here for some (quite hidden) documentation on it.
It was working fine without any issues. I tried to update the "#ionic-native/core": "3.12.1" to latest and then rolled back the version after that i am getting this error. Can somebody please let me know if there is any version mismatch ? Thank you.
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/barcode-scanner": "^4.4.0",
"#ionic-native/camera": "^4.4.2",
"#ionic-native/core": "3.12.1",
"#ionic-native/device": "^4.6.0",
"#ionic-native/fcm": "^4.6.0",
"#ionic-native/geolocation": "^4.4.2",
"#ionic-native/google-plus": "^4.6.0",
"#ionic-native/photo-library": "^4.4.2",
"#ionic-native/printer": "^4.6.0",
"#ionic-native/push": "^4.6.0",
"#ionic-native/splash-screen": "3.12.1",
"#ionic-native/status-bar": "3.12.1",
"#ionic/storage": "2.0.1",
"angular2-signaturepad": "^2.8.0",
"angularfire2": "^4.0.0-rc0",
"chart.js": "^2.7.1",
"cordova-android": "^7.0.0",
"cordova-ios": "^4.5.4",
"cordova-plugin-add-swift-support": "^1.6.0",
"cordova-plugin-camera": "^3.0.0",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-fcm": "^2.1.2",
"cordova-plugin-file": "^4.3.2",
"cordova-plugin-geolocation": "^3.0.0",
"cordova-plugin-googleplus": "^5.2.1",
"cordova-plugin-photo-library": "^2.1.0",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1",
"firebase": "^4.6.2",
"font-awesome": "4.7.0",
"ionic-angular": "3.6.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"phonegap-plugin-barcodescanner": "^7.0.0",
"phonegap-plugin-push": "^2.2.2",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#ionic/app-scripts": "2.1.3",
"#ionic/cli-plugin-cordova": "1.6.2",
"ionic": "3.7.0",
"typescript": "2.3.4"
},
Downgraded my firebase version to 3.9.* it worked.
I am new to angular + asp.net core
i am create sample project of angular 4 with .net core
but it keepshowing dependencies not installed
visual studio 15.5.2
Typescript version 2.6.2
Microsoft Typescript sdk 2.6.2
npm version 5.5.1
in my other machine its work perfectly but not in this pc
please help!!
MY package.json file is below
{
"name": "Angular_CRUD",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "4.2.5",
"#angular/common": "4.2.5",
"#angular/compiler": "4.2.5",
"#angular/compiler-cli": "4.2.5",
"#angular/core": "4.2.5",
"#angular/forms": "4.2.5",
"#angular/http": "4.2.5",
"#angular/platform-browser": "4.2.5",
"#angular/platform-browser-dynamic": "4.2.5",
"#angular/platform-server": "4.2.5",
"#angular/router": "4.2.5",
"#ngtools/webpack": "1.5.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/webpack-env": "1.13.0",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"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": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}
}
Run
npm install inside the folder to install the dependencies.
If this does not work, remove package-lock.json and try again