initialize firebase in angular 6 without angularfire - javascript

I want had a project that initialize firebase by using AngularFire. However, during the entire development I didn't use much function from AngularFire. I always import the firebase/app at every services and use the respective function like firebase.auth() or firebase.database().
With that experience, I would like to initialize the firebase without AngularFire since I am not using the AngularFire methods.
Now come with my problem is I can't find any source to teach me how to initialize the firebase, and of course I am seeing error during importing the firebase at app.module.ts.
Below is my code:
Install the firebase by using: npm i firebase
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import * as firebase from 'firebase';
import { environment } from '../environments/environment'; //API key is imported
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
firebase.initializeApp(environment.firebase) //here shows the error
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
At the line of firebase.initializeApp(environment.firebase), it shows the error:
Type 'App' is not assignable to type 'any[] | Type<any> |
ModuleWithProviders<any>'.
Type 'App' is not assignable to type 'ModuleWithProviders<any>'.
Property 'ngModule' is missing in type 'App'.
Thanks in advance.

I would say you are having this error because firebase.initializeApp(environment.firebase) is not Angular Module.
I would suggest that you do this initialisation in one of your services or create a service for that effect.
#Injectable({
providedIn: 'root'
})
export class FirebaseService {
constructor() {
firebase.initializeApp(environment.firebase)
}
}

Well, you cannot import an object which is not an Angular module and you get that error because of that.
You can:
1. Use it in the AppModule constructor like:
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(){
firebase.initializeApp(environment.firebase);
}
}
2. Create a dedicated service for Firebase in which you will import 'firebase' lib (which is a good overall solution which will be probably used in your application globally).
#Injectable({
providedIn: 'root' // <-- If you are on Angular 6
})
export class FbService {
constructor() {
firebase.initializeApp(environment.firebase);
}
}

Just add firebase.initializeApp(environment.firebase); outside the module and the class, i.e:
import { environment } from '../environments/environment';
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
#NgModule({....
If you want to use it inside a service import firebase import * as firebase from 'firebase'; and use it as usual.

Related

How to properly inject provider in NestJS?

I create a Firebase provider like below(without using module file with exports and imports):
#Injectable()
export class FirebaseProvider {
public app: admin.app.App;
constructor() {
this.app = admin.initializeApp(config);
}
}
and add this provider to providers in AppModule:
providers: [AppService, FirestoreProvider, ClientService],
and in ClientModule:
providers: [CustomersService, FirestoreProvider],
so, now i want to use this provider in my ClientService, so I inject this provider via constructor like below:
constructor(
private readonly firestoreProvider: FirestoreProvider,
) {}
and now i have a problem, can somone tell me why NestJs inject me this provider more than one time and because of this firebase throw me this error:
The default Firebase app already exists. This means you called initializeApp() more than once without providing an app name as the second argument. In most cases you only need to call initializeApp() once. But if you do want to initialize multiple
apps, pass a second argument to initializeApp() to give each app a unique name.
I initialize this firebase only in this provider, so how to properly use this provider in services across the whole project?
thanks for any help!
I don't think you want to declare your FirestoreProvider in the provider:[] array of a module more than once. Try something like this:
#Module({
imports: [
FirestoreModule
],
})
export class AppModule{}
Now that you've imported the FirestoreModule, you can use it in any class that is in this AppModule. Example:
#Injectable()
export class FooService {
constructor(private firestore: FirestoreProvider) {}
}
The key here is to define your provider in its own module, then export it via the exports:[] array, and provide it via the providers:[] array of that module.
import { FirestoreProvider } from './FirestoreProvider'
#Module({
providers: [ FirestoreProvider ],
exports: [ FirestoreProvider ],
})
export class FirestoreModule{}
#Injectable()
export class FirestoreProvider {
public app: admin.app.App;
constructor() {
this.app = admin.initializeApp(config);
}
}

angular 8 crashed when importing OAS generated api

I am new to angular and construction my first angular front end to use an OAS generated angular-typescript package. The OAS is also generated from code and then used to generate the angular-typescript package (angular version 8.2.14). Then I just created a new angular project with "ng new ..." and installed the before generated package with "npm install local/dir --save". Then I imported the module in the app.module.ts with "import { ApiModule } from "package name". So far it works (but also nothing happens).
When I import he ApiModule in the #NgModule angular just stops working, no error, no debug. I tried using demo apis from HowTos, these to import without problems. So I guess that there is a problem with the generated package, everything I tried and change in the last weeks didn't help.
Maybe you have some ideas where I can start debugging. Thank you.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from "../environments/environment";
import { HttpClientModule } from "#angular/common/http";
import { ApiModule, BASE_PATH} from "#angular-schule/book-monkey-api"; // Works
// import { ApiModule, BASE_PATH} from "#jakoberpf/congstats-typescript-angular-api"; // Does not work
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ApiModule,
],
providers: [{ provide: BASE_PATH, useValue: environment.CONGSTATS_BASE_PATH }],
bootstrap: [AppComponent]
})
export class AppModule { }
Found the issue. When importing an using an open api or swagger generated package you have to not only import the HttpClientModule ( see angular issue 20575 ) but also provide it in the providers of the app module.
ISSUE FIXED

Angular4/5 dependency injection docs not working

https://angular.io/guide/architecture#services
I'm following the docs on angular.io to inject dependencies like services, etc. I did everything they said and when I try to run it, the console keeps telling me:
Uncaught ReferenceError: LedgerService is not defined
I am doing nothing crazy except creating a simple component with a service where both constructors have console.log commands (constructors in both the component and service). I've done everything Angular says to do in their 2 paragraphs that details this feature of Angular.
The component itself is being injected into the main app module (with the service being injected into the component) and both the component and service were created with the Angular CLI. So there isn't much I've even done at all minus trying to inject the service. So I'm not sure where it is going wrong but it is definitely not working and just shows a blank page (when it previously had basic content by default).
I created both units, tried to specify providers in both the app.module and the component.ts file and neither works and yields the same error--when Angular claims either could work. I've also specified it as a private service within the constructor of the component.ts file.
Everything I've seen relating to this is always for Angular 1 or 2. Neither of which are even remotely similar to Angular 4/5.
If you really want to see this code, fine but it's literally just framework and nothing else:
bookkeeper.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-bookkeeper',
templateUrl: './bookkeeper.component.html',
styleUrls: ['./bookkeeper.component.css'],
providers: [LedgerServiceService]
})
export class BookkeeperComponent implements OnInit {
constructor(private service: LedgerServiceService) { }
ngOnInit() {
console.log("Ledger component works!");
}
}
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { InterfaceComponent } from './interface/interface.component';
import { BookkeeperComponent } from './bookkeeper/bookkeeper.component';
#NgModule({
declarations: [
AppComponent,
InterfaceComponent,
BookkeeperComponent
],
imports: [
BrowserModule
],
providers: [
LedgerServiceService
],
bootstrap: [AppComponent]
})
export class AppModule { }
ledger-service.service.ts:
import { Injectable } from '#angular/core';
#Injectable()
export class LedgerServiceService {
constructor() {
console.log("wtf");
}
}
LedgerService is actually called LedgerServiceService because I initially created LedgerService manually and then tried to use the AngularCLI to generate a service and named it LedgerService and it created a service called LedgerServiceService. Naming is not what is wrong. I only initially called it simply LedgerService because I figured it would be confusing.
Your examples are missing the import.
Anywhere we use a custom type, we also need to import that type.
For that reason, in both the module and component you will need to add:
import { LedgerServiceService } from './your-path-here'
You can see this in the examples they give on https://angular.io/guide/dependency-injection

Creating Angular module which can be shared?

I am pretty new angular 2, I have a requirement to create a module say that account module which should be shared across two different projects say that project A and B.
I am not sure how to proceed with my design. Do I have to create an angular module in node JS? If anyone could help me on how to proceed to give some design idea I will take it further.
I tried googling it but no luck, to be frank, I don't know what to search for.
Note: I am using Angular 2
Create Module and export from NgModule
#NgModule({
declarations: [TestComponent],
exports: [TestComponent],
imports: [OtherModule],
providers: []
})
export class TestModule{}
and Import same Module from different project
import {TestModule} from '<path of Test Module>'
#NgModule({
declarations: [NewComponent],
exports: [NewComponent],
imports: [TestModule], // import that module in NgModule
providers: []
})
export class NewModule{}
Hope this is helpful for you
I think learning imports and NgModule in Angular 2 are good start
Module Holds all the services,component and other module which are required by the component in your case it is account module
Once you are done with create account component next step will be configuration of module.
let take AccountManagementComponent.ts
#Component({
selector: 'app-account-management',
templateUrl: './account-management.component.html',
styleUrls: ['./account-management.component.css']
})
export class AccountManagementComponent implements OnInit {
constructor(private accountservice: AccountService, ) {}
ngOnInit() {
}
}
Create New ts File Called Account Module in the same directory of AccountComponent.ts. Which includes all the services,component and other modules which are required to that component CommonModule is needed directive as used in your component such as NgIf, NgFor as follow:
import {NgModule} from "#angular/core";
import {CommonModule} from "#angular/common";
import {FormsModule} from "#angular/forms";
import {AccountService} from "../shared/services/Account-data.service";
import {AccountManagementComponent} from "./account-management.component";
#NgModule({
declarations: [AccountManagementComponent],
imports: [CommonModule, FormsModule],
providers: [AccountService],
})
export class AccountModule {}
Finally instead of importing Component and services required by the component
Need to import the module in the root module that is app.module.ts because that module contains all the things which are required to an component
In app.module.ts
#NgModule({
declarations: [],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AccountModule,
],

Unable to import the List module from immutable.js into Angular 2 project

I am trying to use the List module from immutable.js on a new Angular 2 project. When I do that, the browser tries to GET http://localhost:3000/immutable and fails with a 404 Not Found error.
Here is what I did:
I cloned the Angular 2 quickstart
repo from Github (https://github.com/angular/quickstart)
I ran npm install and npm install -D immutable
I then modified app.module.ts as follows:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { List } from 'immutable';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor() {
let list = List.of(1,2,3);
}
}
When I npm start the project, I get the 404 error.
Am I missing something obvious?
After more googling, I found that the answer was pretty easy. I just needed to add a new element to the map in systemjs.config.js:
// other libraries
[...]
'immutable': 'node_modules/immutable/dist/immutable.js'

Categories