What is the Firebase Authentication import for Angular 14 - firebase

https://github.com/angular/angularfire/blob/HEAD/docs/auth/getting-started.md#5-getting-started-with-firebase-authentication
I'm trying to use new firebase.authGoogleAuthProvider() and I can't import firebase. I've installed:
"dependencies": {
"#angular/common": "^14.0.0",
"#angular/core": "^14.0.0",
"#angular/fire": "^7.4.1",
"#angular/forms": "^14.0.0",
"#angular/platform-browser": "^14.0.0",
"#angular/platform-browser-dynamic": "^14.0.0",
"#angular/router": "^14.0.0",
"#ionic-native/google-plus": "^5.36.0",
"#ionic-native/sign-in-with-apple": "^5.36.0",
"#ionic/angular": "^6.1.9",
"#jest/globals": "^28.1.1",
"#microsoft/applicationinsights-web": "^2.8.5",
"angularfire2": "^5.4.2",
"cordova-plugin-googleplus": "^8.5.2",
"cordova-plugin-sign-in-with-apple": "^0.1.2",
"firebase": "^7.9.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
Here's a screenshot of the node_modules/#firebase
Here's one of the node_modules/firebase
Somewhere I found that I should use this import but as you see, this path doesn't exist. Any suggestions?
import firebase from 'firebase/compat/app';

firebase/compat appeared only in firebase v9, i see you are using "firebase": "^7.9.0" in your package json so npm will install latest version prior to v8.
To check installed firebase version - see package.json file inside node_modules/firebase directory.
To use import firebase from 'firebase/compat/app'; as per your guides - update firebase version in your package.json file and rerun npm install. Latest version is 9.9.0 so it will be "firebase": "~9.9.0" or "firebase": "^9.9.0"
More details at https://firebase.google.com/docs/web/modular-upgrade

Related

#ngrx/store asking to install #angular/core#^10.0.0 however we have "#angular/core": "^11.0.5"

When trying to latest ngrx/store in angular 11, it is giving warning to install angular 10.
#ngrx/store#10.1.2 requires a peer of #angular/core#^10.0.0 but none is installed. You must install peer dependencies yourself.
Following is package json
"dependencies": {
"#angular/animations": "^11.0.5",
"#angular/cdk": "^11.0.3",
"#angular/common": "^11.0.5",
"#angular/compiler": "^11.0.5",
"#angular/core": "^11.0.5",
"#angular/forms": "^11.0.5",
"#angular/material": "^11.0.3",
"#angular/material-moment-adapter": "^11.0.3",
"#angular/platform-browser": "^11.0.5",
"#angular/platform-browser-dynamic": "^11.0.5",
"#angular/router": "^11.0.5",
"#fortawesome/fontawesome-free": "^5.15.1",
"#ngrx/store": "^10.1.2",
"#popperjs/core": "^2.6.0",
"bootstrap": "^4.5.3",
"classlist.js": "1.1.20150312",
"core-js": "^3.8.1",
"jquery": "^3.5.1",
"moment": "^2.29.1",
"oidc-client": "^1.10.1",
"popper.js": "^1.16.1",
"rxjs": "~6.6.3",
"sass-loader": "~6.0.7",
"tslib": "^2.0.3",
"web-animations-js": "^2.3.2",
"zone.js": "^0.10.3"
}
npm install gives following WARN
npm WARN #ngrx/store#10.1.2 requires a peer of #angular/core#^10.0.0 but none is installed. You must install peer dependencies yourself.
How to handle this situation?
that's totally, fine.
Currently (01.01.2021), there is no ngrx version for A11 (no version 11), but version 10 works perfectly with A11 and you can use it, despite the warning.
If this is the only warning you get, then feel free to add --force flag to proceed with the upgrade.

ERROR Error: Uncaught (in promise): TypeError: i.BehaviorSubject is not a constructor in Angular 10 SSR

I'm getting this issue after build successfully and run on browser with angular universal
Here is my package json :
{
"name": "ssr",
"version": "1.0.0",
"private": true,
"dependencies": {
"#angular/animations": "10.0.5",
"#angular/cdk": "10.1.0",
"#angular/common": "10.0.5",
"#angular/compiler": "10.0.5",
"#angular/core": "10.0.5",
"#angular/fire": "^6.0.2",
"#angular/forms": "10.0.5",
"#angular/http": "^7.2.16",
"#angular/localize": "^10.0.5",
"#angular/material": "10.1.0",
"#angular/material-moment-adapter": "10.1.0",
"#angular/platform-browser": "10.0.5",
"#angular/platform-browser-dynamic": "10.0.5",
"#angular/platform-server": "^10.0.5",
"#angular/router": "10.0.5",
"#ng-bootstrap/ng-bootstrap": "^7.0.0",
"#ng-toolkit/universal": "^8.1.0",
"#nguniversal/express-engine": "^10.0.1",
"#types/jquery": "^3.5.1",
"#types/node": "^8.10.62",
"angular-in-memory-web-api": "^0.11.0",
"angular-ng-autocomplete": "^2.0.1",
"classlist.js": "^1.1.20150312",
"codelyzer": "^6.0.0",
"core-js": "2.6.9",
"crypto-js": "^3.3.0",
"express": "^4.15.2",
"firebase": "^7.17.1",
"hammerjs": "^2.0.8",
"jquery": "^3.5.1",
"localstorage-polyfill": "^1.0.1",
"moment": "2.24.0",
"ng2-slim-loading-bar": "^4.0.0",
"ng5-slider": "^1.1.14",
"ngx-order-pipe": "^2.0.4",
"ngx-pagination": "^3.2.1",
"ngx-spinner": "^10.0.1",
"rxjs": "^6.6.0",
"rxjs-compat": "^6.6.0",
"sweetalert2": "^8.19.0",
"tslib": "^1.13.0",
"web-animations-js": "^2.3.2",
"whatwg-fetch": "^3.2.0",
"zone.js": "0.10.3"
},
I just updated my project to Angular 10 and started facing this issue.
What i did was , wherever I had BehaviorSubject imports ,
i changed them from import { BehaviorSubject } from "rxjs/Rx"; to import { BehaviorSubject } from "rxjs";
This makes production build work without any error.
I got solution, use rxjs-tslint and migrate all rxjs syntax : https://www.npmjs.com/package/rxjs-tslint
I am able to solve this by using the build command as ng build --configuration=prod --aot= false --build-optimizer=false. Application is up and running for us now. But it's a work around only. We are trying to check few more ways without setting optimiser to false.Will update you.
I guess your question is solved,
I fixed it using ng build instead of ng build --prod. I am now investigating why the --prod command line compile my app differently
I guess your question is solved,
I fixed it using ng build instead of ng build --prod. I am now investigating why the --prod command line compile my app differently

cannot find module "firebase-functions"

I imported and downloaded: firebase-functions and firebase-admin using npm i <package> but it give me a lint error like: cannot find module "firebase-functions". I also restarted vscode, but problem persists..
Could it be problem with webpack or tsconfig?
Some important packages in package.json:
{
"dependencies": {
"#angular/animations": "^5.2.3",
"#angular/cdk": "^5.1.1",
"#angular/common": "^5.2.2",
"#angular/compiler": "^5.2.2",
"#angular/core": "^5.2.2",
"#angular/forms": "^5.2.2",
"#angular/http": "^5.2.2",
"#angular/material": "^5.0.2",
"#angular/material-moment-adapter": "^5.2.3",
"#angular/platform-browser": "^5.2.2",
"#angular/platform-browser-dynamic": "^5.2.2",
"#angular/platform-server": "^5.2.3",
"#angular/router": "~5.2.2",
"core-js": "^2.5.3",
"express": "^4.16.2",
"firebase": "^4.9.1",
"firebase-admin": "~5.8.1",
"firebase-functions": "^0.8.1",
"zone.js": "0.8.18"
},
"private": true,
"devDependencies": {
"#angular/cli": "^1.6.7",
"#angular/compiler-cli": "^5.2.2",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"angular-universal-express-firebase": "0.0.4",
"babel-preset-es2015": "^6.24.1",
"codelyzer": "~3.1.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",
"npm-run-all": "^4.1.2",
"protractor": "~5.1.2",
"ts-loader": "^3.4.0",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "^2.4.2",
"webpack": "^3.8.1",
"webpack-node-externals": "^1.6.0"
}
}
npm install firebase-functions
npm install firebase-admin
You can try the following commands:
firebase use --add
firebase init functions
To get your project. Sometimes, its a permission problem. What you can try is creating a new account on your computer and doing the same commands, that almost always works.
I handled this problem with these steps. I don't really know whether exact solution is delete and initialize firebase functions again. Also I thought that problem is not specific only firebase-functions or firebase-admin. It can be missing node_modules packages.
delete node_modules in functions
firebase init functions. Update tsconfig and package.json and install dependencies.
restart vscode
#Shaybakov answer was the solution to my problem.
I recently switched the location of my project on my local machine. This meant that firebase libraries were not imported into the local directory and I either had to reconfigure the entire firebase CLl or just manually update the firebase libraries in the local directory with the commands that #Shaybakov stated.
npm install firebase-functions
npm install firebase-admin
step 1. npm install firebase-admin
step 2. npm install firebase-functions

Typescript error: cannot run ionic2 app when including "#ionic/cloud-angular"

I'm trying to do push notifications with an ionic2 app so that I need to import classes from "#ionic/cloud-angular".
However, I got lots of typescript errors in "ionic serve" when doing this, for example:
TypeScript error:
/.../ionic2/ionic2-angularfire-sample-master/node_modules/#ionic/db/node_modules/rxjs/scheduler/VirtualTimeScheduler.d.ts(30,76):
Error TS1005: ')' expected.
TypeScript error:
/.../ionic2/ionic2-angularfire-sample-master/node_modules/#ionic/db/node_modules/rxjs/scheduler/VirtualTimeScheduler.d.ts(31,1):
Error TS1128: Declaration or statement expected.
These are my information about ionic configuration :
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
OS: OS X Yosemite
Node Version: v6.10.0
And here is my package.json :
{
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "2.0.0-rc.2",
"#ionic/cloud-angular": "^0.11.0",
"angularfire2": "2.0.0-beta.2",
"es6-shim": "0.35.0",
"firebase": "3.3.0",
"ionic-angular": "2.0.0-beta.11",
"ionic-native": "^2.5.1",
"ionicons": "3.0.0",
"moment": "2.13.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
},
"devDependencies": {
"del": "2.2.0",
"gulp": "3.9.1",
"gulp-tslint": "^5.0.0",
"gulp-watch": "4.3.5",
"ionic-gulp-browserify-typescript": "^1.1.0",
"ionic-gulp-fonts-copy": "^1.0.0",
"ionic-gulp-html-copy": "^1.0.0",
"ionic-gulp-sass-build": "^1.0.0",
"ionic-gulp-scripts-copy": "^2.0.0",
"ionic-gulp-tslint": "^1.0.0",
"run-sequence": "1.1.5",
"tslint": "^3.10.1",
"tslint-ionic-rules": "^0.0.3"
},
"cordovaPlugins": [],
"cordovaPlatforms": [],
"name": "fbtest",
"description": "fbtest: An Ionic project"
}
I hope someone could help that I can do to use import "#ionic/cloud-angular". Thank you.
I also encountered trouble the first time I used Ionic Cloud and solved it by reinstalling the Client from scratch. Have you tried to redo the installation step by step? (http://docs.ionic.io/setup.html)
Make sure that you have the latest version as suggested: sudo npm install -g ionic
Create your app ID on your online account with ionic io init (this will also modify your ionic.config.json)
Modify your app.module.ts like this:
Import the modules: import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
Define a CloudSettings (don't forget to replace the APP_ID by your own):
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID'
}
};
Inside the imports of your #NgModule, add: CloudModule.forRoot(cloudSettings)
PS: sorry, this maybe go to comment, but I haven't enough reputation points to comment yet.

Unable to resolve modules: "angular2-meteor/build/meteor_component"

I have a project using meteor.js and Angular2.
This is how my package.json looks:
"dependencies": {
"#angular/common": "2.0.0-rc.3",
"#angular/compiler": "2.0.0-rc.3",
"#angular/core": "2.0.0-rc.3",
"#angular/forms": "0.1.1",
"#angular/http": "2.0.0-rc.3",
"#angular/platform-browser": "2.0.0-rc.3",
"#angular/platform-browser-dynamic": "2.0.0-rc.3",
"#angular/router": "3.0.0-alpha.8",
"#angular/upgrade": "2.0.0-rc.3",
"angular2-meteor": "^0.5.6",
"angular2-meteor-polyfills": "0.1.1",
"angulartics2": "^1.1.1",
//more dependencies...
}
After installing dependencies with meteor npm install and then launching app with meteor I get errors:
off course I tried meteor npm install --save angular2-meteor, but I get same error.
Then I read somewhere to update node and npm, I did I have tried with node 5*, 6* and latest npm. But I still get error with Angular2 dependencies.

Resources