Course Project: Lazy loading and environment variables

Author: Renante D. Entera

course-project/src/app/app-routing.module.ts

@@ -1,28 +1,26 @@
-import { NgModule } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 
 const appRoutes: Routes = [
-  { path: "", redirectTo: "/recipes", pathMatch: "full" },
+  { path: '', redirectTo: '/recipes', pathMatch: 'full' },
   {
-    path: "recipes",
-    loadChildren: () =>
-      import("./recipes/recipes.module").then(m => m.RecipesModule)
+    path: 'auth',
+    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
   },
-  {
-    path: "shopping-list",
-    loadChildren: () =>
-      import("./shopping-list/shopping-list.module").then(
-        m => m.ShoppingListModule
-      )
+  { 
+    path: 'recipes', 
+    loadChildren: () => import('./recipes/recipes.module').then(m => m.RecipesModule)
   },
-  {
-    path: "auth",
-    loadChildren: () => import("./auth/auth.module").then(m => m.AuthModule)
+  { 
+    path: 'shopping-list', 
+    loadChildren: () => import('./shopping-list/shopping-list.module').then(m => m.ShoppingListModule)
   }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(appRoutes)],
+  imports: [
+    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

course-project/src/app/auth/auth.service.ts

@@ -3,6 +3,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { catchError, tap } from 'rxjs/operators';
 import { throwError, BehaviorSubject } from 'rxjs';
+import { environment } from '../../environments/environment';
 
 import { User } from './user.model';
 
@@ -26,7 +27,7 @@ export class AuthService {
   signup(email: string, password: string) {
     return this.http
       .post<AuthResponseData>(
-        'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyDKcrz9ecyL7uH_fOrwtTunwEHikHmVwfM',
+        'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=' + environment.firebaseAPIKey,
         {
           email: email,
           password: password,
@@ -49,7 +50,7 @@ export class AuthService {
   login(email: string, password: string) {
     return this.http
       .post<AuthResponseData>(
-        'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyDKcrz9ecyL7uH_fOrwtTunwEHikHmVwfM',
+        'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=' + environment.firebaseAPIKey,
         {
           email: email,
           password: password,

course-project/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  firebaseAPIKey: 'AIzaSyDKcrz9ecyL7uH_fOrwtTunwEHikHmVwfM'
 };

course-project/src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebaseAPIKey: 'AIzaSyDKcrz9ecyL7uH_fOrwtTunwEHikHmVwfM'
 };
 
 /*