I am using Ionic4 and #angular/fire to code an chat application, but I'm getting a white page and error message(F12) when I run my application.
Can someone help me ?
thank you.
app.module.ts
import { firebaseConfig } from '../environments/environment';
import { AngularFireModule } from '#angular/fire';
import { AngularFireAuthModule, AngularFireAuth } from '#Angular/fire/auth';
import { AngularFireDatabaseModule } from '#angular/fire/database';
// import { AngularFirestore } from '#angular/fire/firestore';
import { HttpClient } from '#angular/common/http';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
AngularFireDatabaseModule, ],
providers: [
StatusBar,
AngularFireModule,
AngularFireAuthModule,
AngularFireAuth
ERROR (F12) with Chrome
<!-- begin snippet: js hide: false console: true babel: false -->
When I go to the home page it works, it is only when i go to my login page
thanks alot to those who will help me
The error I made was in the thrid line, it is not #Angular but #angular. after changing that, everything work fine
Related
I'm trying to do authentication with AngularFire. During ng serve, any attempt to instantiate an auth provider (such as firebase.auth.GoogleAuthProvider) results in a crash. I'm doing the exact same thing as the AngularFireAuth quickstart example. Am I missing something?
My app is quite minimal:
// app.component.ts
import { Component } from "#angular/core";
import { AngularFireAuth } from '#angular/fire/auth';
import { auth } from 'firebase/app';
#Component({...})
export class AppComponent {
constructor(private afAuth: AngularFireAuth) { }
ngOnInit() {
this.afAuth.signInWithRedirect(new auth.GoogleAuthProvider());
}
}
// app.module.ts
import { AngularFireModule } from "#angular/fire";
import { AngularFireAuthModule } from '#angular/fire/auth';
...
#NgModule({
declarations: [AppComponent],
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// package.json
"dependencies": {
"#angular/core": "~9.1.4",
"#angular/fire": "^6.0.0-rc.2",
"firebase": "7.14.3",
...
},
I have found this question with a similar problem, but they're not using AngularFire, just plain Firebase. With AngularFire I don't think I'm supposed to manually include the Firebase scripts in my index.html.
I've found the real solution. "angular-auth-firebase" must be passed to initializeApp() when importing the AngularFire module in the app module:
#NgModule({
declarations: [ ... ],
imports: [
AngularFireModule.initializeApp(environment.firebase, "angular-auth-firebase"),
AngularFireAuthModule,
...
],
...
})
export class AppModule { }
Old answer (workaround):
I have found a workaround here. If I simply add import "firebase/auth"; to app.module.ts, everything works, though I'm not sure this should be the permanent fix.
In setuping angularfire2 documentation when I import AngularFireDatabaseModule,ngularFireAuthModule in ng module there is this bug :
cannot compile tns_modules/angularfire2/database.js.
What is the problem?
app.module.ts :
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
#Gandom as far as I saw the angularfire2 is not compatible with NativeScript as it depends on som browser specific modules. To use Firebase in NativeScript I would recommend using nativescript-plugin-firebase
I have a new CLI based Angular applicaiton that I am creating. I have followed the instructions on the ng-bootstrap site.
Installed Bootstrap: npm install bootstrap#4.0.0-alpha.6
Installed ng-bootstratp: npm install --save #ng-bootstrap/ng-bootstrap
Made sure my angular version was up to date "4.1.1"
Setup the app.module.ts correctly (I think)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { FileDataService, FILE_UPLOAD_URL } from './file-data.service';
import { AppComponent } from './app.component';
import { FileDetailComponent } from './file-detail/file-detail.component';
import { FileListComponent } from './file-list/file-list.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '#angular/router';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent,
FileDetailComponent,
FileListComponent,
NavbarComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot(),
RouterModule.forRoot([
{
path: 'filelist',
component: FileListComponent
}
]),
],
providers: [ FileDataService,
{ provide: FILE_UPLOAD_URL, useValue: 'http://localhost:8008' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
The CSS is being applied correclty and looks fine. The issue is that none of the javascript is getting executed. For example the toggle for the menu when it goes down to the hamberger does not work. Alerts that are supposed to be dismissable do not react to clicking the "X". I am not sure how to fix this. I don't have any errors in console.
Thanks for any help.
We are tried login with google authentication using (Firebase/ionic2/angularjs2).Our code
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
user: Observable<firebase.User>;
constructor(public navCtrl: NavController,public afAuth: AngularFireAuth) {
this.user = afAuth.authState;
}
login() {
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}
logout() {
this.afAuth.auth.signOut();
}
}
but we are getting error :
Error: Uncaught (in promise): Error: No provider for AngularFireAuth!
Error: No provider for AngularFireAuth!
Please guide to us what working in our code .
A clarification of what #rmalviya suggested, I assume you are currently on Ionic version 3.x.x, for this version you have two ways of importing a native plugin and adding the respective providers for the plugin.
1) You could add the provider in your current page typescript file. like so:
import { AngularFireAuth } from 'angularfire2/auth';
...
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [AngularFireAuth]
})
2) Second method you could import it in your app.modules.ts and add the plugin into the providers
import { AngularFireAuth } from 'angularfire2/auth';
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AngularFireAuth
]
resolve here https://github.com/iglewski/Annotator/issues/3
app.component.spec.ts :
import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
import { AngularFireAuth, AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { firebaseConfig } from './app.module';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [
AngularFireModule.initializeApp(firebaseConfig), //ajout
AngularFireAuthModule, //ajout
AngularFireDatabaseModule //ajout
],
}).compileComponents();
}));
If you're using the IonicPageModule system, then you'll need to import AngularFireAuth in your app.module.ts AND in your page.module.ts in the providers array.
app.module.ts:
#NgModule({
...
providers: [AngularFireAuth]
...
page.module.ts:
#NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage)
],
exports: [
SignupPage
],
providers: [
AngularFireAuth
]
})
I was facing the same issue but I managed to solved this by adding the following lines into my core modules.
CoreModule contains code that will be used to instantiate your app and load some core functionality.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
/* 3e. Import the angularfire2 thingy. */
**import {AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';**
import { AuthModule } from '../auth/auth.module';
import { AuthService } from '../core/auth.service';
#NgModule({
declarations: [],
imports: [
CommonModule,
/* To allow the db to talk to the form. */
**AuthModule,
AngularFireAuthModule,
AngularFireStorageModule,
AngularFirestoreModule,**
],
exports: [],
providers: [
AuthService,
]
})
export class CoreModule { }
This is a follow up to Angular 2.0 router not working on reloading the browser
Even if I configure the router to use the HashLocationStrategy I still get the url paths without #. I follow exactly the Angular2 docs https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
and set the location strategy as described here https://angular.io/docs/ts/latest/guide/router.html
My bootstrap:
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {
ROUTER_PROVIDERS,
LocationStrategy,
HashLocationStrategy
} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy })
]);
And the router config:
#RouteConfig([
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
}
])
I'd expect to see a url like http://localhost/#/dashboard in the browser, but I get http://localhost/dashboard.
What am I missing?
Try to move the ROUTER_PROVIDER and provide(..)-stuff into your app.component.ts file.
In there you should paste it into the #Component.providers-Array.
For a more detailed answer have a look at this post, it solved my problem which seems to be close to yours:
https://stackoverflow.com/a/35879541/4977476
My understanding (which might be wrong, I am just beginning with Angular2) is that the useAsDefault acts as a redirect. But this isn't needed when using hash locations, since from the server's point of view, all pages are on '/' anyway.
The problem seems to be, that the LocationStrategy has to be defined within the providers array, as pointed out by SilverJan and KochFolie. See HashLocationStrategy not working as expected
it's works for me:
...
import { RouterModule, Routes } from '#angular/router';
import {
APP_BASE_HREF,
LocationStrategy,
HashLocationStrategy
} from '#angular/common';
...
const appRoutes: Routes = [
{ path: '', loadChildren: './user-profile/user-profile.module#UserProfileModule'},
...
];
#NgModule({
...
providers: [ { provide: APP_BASE_HREF, useValue: "/core/user" }, {provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule { }