rebased firebase, added @angular/fire

firebase.json

@@ -0,0 +1 @@
+{}

package.json

@@ -15,11 +15,13 @@
     "@angular/common": "^14.0.0-next.0",
     "@angular/compiler": "^14.0.0-next.0",
     "@angular/core": "^14.0.0-next.0",
+    "@angular/fire": "^7.4.1",
     "@angular/forms": "^14.0.0-next.0",
     "@angular/material": "^14.2.2",
     "@angular/platform-browser": "^14.0.0-next.0",
     "@angular/platform-browser-dynamic": "^14.0.0-next.0",
     "@angular/router": "^14.0.0-next.0",
+    "bootstrap": "^5.2.1",
     "firebase": "^9.9.4",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -38,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
-}
+}

src/app/app.module.ts

@@ -5,10 +5,17 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
-
-
-import { FirebaseAuthComponent } from './firebase-auth/firebase-auth.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+// Firebase service
+import { FirebaseAuthComponent } from './firebase-auth/firebase-auth.component';
+import { AngularFireModule } from '@angular/fire/compat';
+import { AngularFireAuthModule } from '@angular/fire/compat/auth';
+import { AngularFireStorageModule } from '@angular/fire/compat/storage';
+import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
+import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
+import { environment } from '../environments/environment';
+
 import { HeaderComponent } from './header/header.component';
 
 @NgModule({
@@ -22,7 +29,12 @@ import { HeaderComponent } from './header/header.component';
     AppRoutingModule,
     MatInputModule,
     BrowserAnimationsModule,
-    MatButtonModule
+    MatButtonModule,
+    AngularFireModule.initializeApp(environment.firebaseConfig),
+    AngularFireAuthModule,
+    AngularFirestoreModule,
+    AngularFireStorageModule,
+    AngularFireDatabaseModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/firebase-auth/firebase-auth.component.ts

@@ -11,39 +11,10 @@ import { getAnalytics } from "firebase/analytics";
 export class FirebaseAuthComponent implements OnInit {
 
   constructor() {
-    /*
-    const firebaseConfig = {
-      apiKey: "AIzaSyCYOq1jv8IRfGhs2NPoXhmOUSPVnyxq3vw",
-      authDomain: "angular-login-abe92.firebaseapp.com",
-      projectId: "angular-login-abe92",
-      storageBucket: "angular-login-abe92.appspot.com",
-      messagingSenderId: "1050503165651",
-      appId: "1:1050503165651:web:894ceb5c86ada15a2ac626",
-      measurementId: "G-N34588MQT5",
-     
-    };
-    
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-
-    const auth = getAuth();
-    createUserWithEmailAndPassword(auth, "marcus@weifer.de", "abcdefgh")
-      .then((userCredential) => {
-
-        const user = userCredential.user;
-        alert(userCredential.user.toJSON)
-        console.log("New user added!")
-      })
-      .catch((error) => {
-        const errorCode = error.code;
-        const errorMessage = error.message;
-        
-      });
-      */
-   }
+  }
 
   ngOnInit(): void {
- 
+
   }
 
 }

src/app/firebase-auth/firebase.ts

@@ -1,22 +0,0 @@
-// Import the functions you need from the SDKs you need
-
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
-
-// Your web app's Firebase configuration
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
-
-const firebaseConfig = {
-  apiKey: "AIzaSyCYOq1jv8IRfGhs2NPoXhmOUSPVnyxq3vw",
-  authDomain: "angular-login-abe92.firebaseapp.com",
-  projectId: "angular-login-abe92",
-  storageBucket: "angular-login-abe92.appspot.com",
-  messagingSenderId: "1050503165651",
-  appId: "1:1050503165651:web:894ceb5c86ada15a2ac626",
-  measurementId: "G-N34588MQT5",
- 
-};
-
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);

src/environments/environment.ts

@@ -3,7 +3,16 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebaseConfig: {
+    apiKey: "AIzaSyCYOq1jv8IRfGhs2NPoXhmOUSPVnyxq3vw",
+    authDomain: "angular-login-abe92.firebaseapp.com",
+    projectId: "angular-login-abe92",
+    storageBucket: "angular-login-abe92.appspot.com",
+    messagingSenderId: "1050503165651",
+    appId: "1:1050503165651:web:894ceb5c86ada15a2ac626",
+    measurementId: "G-N34588MQT5"
+  }
 };
 
 /*