Upgrade to Angular 17 and App Hosting (#786)

Co-authored-by: marktechson <2554588+MarkTechson@users.noreply.github.com>

Author: jhuleatt

angularfire-start/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+.angular

angularfire-start/angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -14,22 +15,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/friendlychat",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -49,9 +43,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -63,35 +55,27 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "friendlychat:build:production"
+              "buildTarget": "friendlychat:build:production"
             },
             "development": {
-              "browserTarget": "friendlychat:build:development"
+              "buildTarget": "friendlychat:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "friendlychat:build"
+            "buildTarget": "friendlychat:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         },
@@ -105,4 +89,4 @@
       }
     }
   }
-}
+}

angularfire-start/package.json

@@ -10,23 +10,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/fire": "^7.6.1",
-    "@angular/forms": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/router": "^16.0.0",
+    "@angular/animations": "^17.2.4",
+    "@angular/common": "^17.2.4",
+    "@angular/compiler": "^17.2.4",
+    "@angular/core": "^17.2.4",
+    "@angular/fire": "^17.0.1",
+    "@angular/forms": "^17.2.4",
+    "@angular/platform-browser": "^17.2.4",
+    "@angular/platform-browser-dynamic": "^17.2.4",
+    "@angular/router": "^17.2.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.4",
-    "@angular/cli": "~16.0.4",
-    "@angular/compiler-cli": "^16.0.0",
+    "@angular-devkit/build-angular": "^17.2.3",
+    "@angular/cli": "~17.2.3",
+    "@angular/compiler-cli": "^17.2.4",
     "@types/jasmine": "~4.3.0",
     "autoprefixer": "^10.4.14",
     "jasmine-core": "~4.6.0",
@@ -37,6 +37,6 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
-    "typescript": "~5.0.2"
+    "typescript": "~5.3.3"
   }
 }

angularfire-start/src/app/app.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { HeaderComponent } from './components/header/header.component';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  standalone: true,
+  imports: [HeaderComponent, RouterModule],
 })
 export class AppComponent {
   title = 'friendlychat';

angularfire-start/src/app/app.config.ts

@@ -0,0 +1,24 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { environment } from '../environments/environment';
+import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
+import { provideFirestore, getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
+import { provideFunctions, getFunctions, connectFunctionsEmulator} from '@angular/fire/functions';
+import { provideMessaging, getMessaging } from '@angular/fire/messaging';
+import { provideStorage, getStorage, connectStorageEmulator } from '@angular/fire/storage';
+import { routes } from './app.routes';
+import { provideRouter } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(
+      provideFirebaseApp(() => initializeApp(environment.firebase)),
+      provideFirestore(() => getFirestore()),
+      provideAuth(() => getAuth()),
+      provideFunctions(() => getFunctions()),
+      provideStorage(() => getStorage()),
+      provideMessaging(() => getMessaging())
+    ),
+    provideRouter(routes)
+  ],
+};

angularfire-start/src/app/app.module.ts

@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {
   AuthGuard,
@@ -11,7 +10,7 @@ import { ChatPageComponent } from './pages/chat-page/chat-page.component';
 const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
 const redirectLoggedInToHome = () => redirectLoggedInTo(['chat']);
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     component: LoginPageComponent,
@@ -31,9 +30,3 @@ const routes: Routes = [
     data: { authGuardPipe: redirectUnauthorizedToLogin },
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

…fire-start/src/app/app-routing.module.ts angularfire-start/src/app/app.routes.tsangularfire-start/src/app/app-routing.module.ts renamed to angularfire-start/src/app/app.routes.ts angularfire-start/src/app/app-routing.module.ts renamed to angularfire-start/src/app/app.routes.ts

@@ -7,37 +7,39 @@
                     Friendly Chat
                 </span>
             </a>
-            <div class="flex flex-wrap items-end auth" *ngIf="user$ | async as user">
-                <div class="flex flex-wrap justify-between text-white">
-                    <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
-                        [alt]="user?.displayName" />
-                    <span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
-                        {{user?.displayName}}
-                    </span>
-                    <div class="dropdown inline-block relative shadow-lg">
-                        <button class=" text-gray-700 py-2 px-4 rounded inline-flex items-center font-semibold">
-                            <img class="w-8 h-8 rounded-full" src="../../../assets/menu.svg" />
-                        </button>
-                        <ul class="dropdown-menu absolute hidden text-gray-700 pt-3 w-48 right-2">
-                            <li class="bg-white p-4 flex-row">
-                                <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
-                                    [alt]="user?.displayName" />
-                                <span
-                                    class="text-navy-200 text-md whitespace-nowrap px-4 lg:px-5 py-2 lg:py-2.5 mr-6">
-                                    {{user?.displayName}}
-                                </span>
-                            </li>
-                            <li class="">
-                                <a class="bg-white hover:bg-navy-20 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
-                                    href="/" (click)="this.chatService.logout()">
-                                    Logout
-                                </a>
-                            </li>
-                        </ul>
+            @if(user$ | async; as user) {
+                <div class="flex flex-wrap items-center content-center auth">
+                    <div class="hidden sm:flex flex-wrap items-center content-center text-white">
+                        <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
+                            [alt]="user?.displayName" />
+                        <span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
+                            {{user?.displayName}}
+                        </span>
                     </div>
+                        <div class="dropdown rounded-lg px-4 py-2 hover:bg-navy-700 transition-colors">
+                            <div class="flex items-center">
+                            <button class="text-gray-700 inline-flex items-center font-semibold">
+                                <img class="w-8 h-8" src="../../../assets/menu.svg" />
+                            </button></div>
+                            <ul class="dropdown-menu absolute hidden bg-white w-48 p-1 right-2 shadow-xl rounded-lg">
+                                <li class="bg-white flex flex-row gap-2 items-center px-4 py-4 rounded-lg">
+                                    <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
+                                        [alt]="user?.displayName" />
+                                    <span
+                                        class="text-navy-200 text-md whitespace-nowrap">
+                                        {{user?.displayName}}
+                                    </span>
+                                </li>
+                                <li>
+                                    <a class="bg-white hover:bg-navy-20 rounded-md mt-4 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
+                                        href="/" (click)="this.chatService.logout()">
+                                        Sign out
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
                 </div>
-
-            </div>
+            }
         </div>
     </nav>
 </header>

angularfire-start/src/app/components/header/header.component.html

@@ -1,10 +1,13 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { ChatService } from 'src/app/services/chat.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css'],
+  standalone: true,
+  imports: [AsyncPipe],
 })
 export class HeaderComponent {
   chatService = inject(ChatService);