I'm still new with firebase. Is there any way that we can use firebase performance monitoring to monitor our web app screen by screen automatically from the console? I checked the documentation and it says we need to put some traces in the code to trace (correct me if i'm mistaken).
Performance Monitoring automatically provides a trace for page load when you add AngularFirePerformanceModule into your App Module's imports.
import { AngularFireModule } from '#angular/fire';
import { AngularFirePerformanceModule, PerformanceMonitoringService } from '#angular/fire/performance';
import { environment } from '../environments/environment';
#NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirePerformanceModule,
...
],
providers: [
PerformanceMonitoringService
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Check documentation here: https://github.com/angular/angularfire/blob/master/docs/performance/getting-started.md and some tutorial here: https://labs.thisdot.co/blog/intro-to-performance-analytics-with-firebase
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.
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
I know this isn't a new question but I didn't find a working solution. I'm working on a project using HashLocationStrategy and I need to remove # sign from url. I'm tryng to change to PathLocationStrategy following various posts but anyone works for me. My app.module is:
import { routing } from './app.route';
#NgModule({
...
imports: [
routing
],
providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy },
... ]
})
app.route is:
export const routes: Routes = [
{ path: "myComponent", component: MyComponent },
path: "**", component: HomeComponent }
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
I need to build the project and put it in a specific folder on server, so in index.html I put:
<base href="/myapp/">
When I run the app and try to reach a page using path like "http://myServer/myApp/myComponent" I get 404 error, but with "http://myServer/myApp/#/myComponent" it works.
Is there any change to do to pass to PathLocationStrategy?
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.
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 { }