Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

In Windows PowerShell:

1.               Install Angularfire2

 

npm install angularfire2 firebase --save

 

 

After installation

 

PS D:\Programmierung\Angular\Kurs\firebase-notizen> cd D:\Programmierung\Angular\Kurs\firebase-notizen

PS D:\Programmierung\Angular\Kurs\firebase-notizen> npm install angularfire2 firebase --save

npm WARN deprecated angularfire2@5.4.2: AngularFire has moved, we're now @angular/fire

 

> protobufjs@6.10.2 postinstall D:\Programmierung\Angular\Kurs\firebase-notizen\node_modules\protobufjs

> node scripts/postinstall

 

npm WARN @angular/fire@5.4.2 requires a peer of @angular/common@>=6.0.0 <9 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.

npm WARN @angular/fire@5.4.2 requires a peer of @angular/core@>=6.0.0 <9 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.

npm WARN @angular/fire@5.4.2 requires a peer of @angular/platform-browser@>=6.0.0 <9 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.

npm WARN @angular/fire@5.4.2 requires a peer of @angular/platform-browser-dynamic@>=6.0.0 <9 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.

npm WARN @angular/fire@5.4.2 requires a peer of firebase@>= 5.5.7 <8 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 

+ angularfire2@5.4.2

+ firebase@8.2.1

added 87 packages from 75 contributors and audited 1555 packages in 42.706s

 

82 packages are looking for funding

  run `npm fund` for details

 

found 0 vulnerabilities

 

PS D:\Programmierung\Angular\Kurs\firebase-notizen>

 

Consequence:

As a result, the dependencies entries were made in the Angular project:

 

In package.json->dependencies

 

    "angularfire2""^5.4.2",

    "firebase""^8.2.1",

 

 

1.               Installing Firebase

And in addition, the npm install command

 

Firebase with version install

 

npm install firebase@7.24.0 angularfire2 --save

 

 

 

1.               App.Module Customize

 

Firebase in the project:

app.module

1.               Import AngularFireModule

In the Angular project you can now enter the reference to Firebase in the app.module file

 

import {AngularFireModulefrom 'angularfire2';

 

 

1)    app.Module: Export firebaseConfig

 

export const firebaseConfig={

  apiKey: "AIzaSyBM9RH3gsj0oZRyVpvK_xdwkypVfMOSRl0",

  authDomain: "angular-kurs-codedocu.firebaseapp.com",

  projectId: "angular-kurs-codedocu",

  storageBucket: "angular-kurs-codedocu.appspot.com",

  messagingSenderId: "169921771955",

  appId: "1:169921771955:web:787664c132f03431c7f3c6",

  measurementId: "G-1CHF3CX0YG"

}

 

 

And in @NgModule->imports: you have to enter the FirebaseConfig

 

,

    AngularFireModule.initializeApp(firebaseConfig)

 

 

1.               compontent.ts anpassen

 

2)    app.component.ts -> Import AngularFireModule

damit die Firebase in der Ausgabe Codebehind Datei angewandt werden kann, muss man in der .compontent.ts mit Import das AngularFireModule einbinden.

import { AngularFireModule  } from 'angularfire2';

 

 

 

Gesamter Angular Datei Code

App.module

 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {AngularFireModulefrom 'angularfire2';

 

import { AppComponent } from './app.component';

export const firebaseConfig={

  apiKey: "AIzaSyBM9RH3gsj0oZRyVpvK_xdwkypVfMOSRl0",

  authDomain: "angular-kurs-codedocu.firebaseapp.com",

  projectId: "angular-kurs-codedocu",

  storageBucket: "angular-kurs-codedocu.appspot.com",

  messagingSenderId: "169921771955",

  appId: "1:169921771955:web:787664c132f03431c7f3c6",

  measurementId: "G-1CHF3CX0YG"

}

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AngularFireModule.initializeApp(firebaseConfig)

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

 

2.               Code in app.component.ts

3.      import { Component } from '@angular/core';

4.      import { AngularFireModule  } from 'angularfire2';

5.       

6.      @Component({

7.        selector: 'app-root',

8.        templateUrl: './app.component.html',

9.        styleUrls: ['./app.component.css']

10.    })

11.    export class AppComponent {

12.      title = 'firebase-notizen';

13.      constructor(af:AngularFireModule)

14.      {

15.        console.log(af);

16.      }

17.    }

18.     

19.            

 

 

 

 

Mobile
»
Angular Firebase Example 2021 AngularFireDatabase
»
Angular Firebase output single node
»
Exampel Code Connect data from Firebase in Angular
»
Angular Firebase Error: permission_denied Client doesn t have permission to access the desired data.
»
Firebase into Angular in 2021
»
Setting Firebase for easy reading of data
»
Firebase: Allow reading and writing
»
Firebase: Edit data manually
»
Install Firebase in Angular Project
»
How much does Firebase cost?

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de