This project was generated with Angular CLI version 12.1.3.
- Due to the huge size of the application, we'll enable app routing and enable lazy loading.
import { FacebookGuard } from './guards/facebook.guard';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule),
canActivate: [FacebookGuard]
},
{
path: 'login',
component: LoginComponent,
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- Occassionally you'll need to secure certain pages. Only then, authenticatecd users can access them.
- Set up project guards as below. set up
canActivate
as the implementation interface.
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ProjectGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return true;
}
}
- Features like
firebaseAuth
,firebaseHosting
are just afew of the cserverless candies that Firebase offers the developer and helps save time. - Install the Angular firebase firestore package into youtr project as below.
ng add @angular/fire
import {AngularFireModule} from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore/';
import {AngularFireAuthModule } from '@angular/fire/compat/auth';
@NgModule({
declarations: [
AppComponent,
// HomeComponent,
LoginComponent,
RegisterComponent
],
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireAuthModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
- As well, add the following firebase cofigs from your dfirebase console into your app
environment.ts
andenvironment.prod.ts
as below:
export const environment = {
production: true,
// Your web app's Firebase configuration
firebaseConfig: {
apiKey: 'AIzaSyD9Y3bz_a....pvzNyTj9Y1N-FlTno8',
authDomain: "facebook-....firebaseapp.com",
projectId: "facebook-...",
storageBucket: "facebook-....appspot.com",
messagingSenderId: '89307...4722',
appId: '1:...830716...:web:dea...0f44e0b5c58d9b'
}
};
- As well import the environmwent files into your
app.modules.ts
as below:
import { environment } from './../environments/environment';
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.