Skip to content

Commit 967c2c0

Browse files
jhuleattMarkTechson
jhuleatt
and
MarkTechson
authored
Upgrade to Angular 17 and App Hosting (#786)
Co-authored-by: marktechson <2554588+MarkTechson@users.noreply.github.com>
1 parent 3c7f80a commit 967c2c0

16 files changed

+179
-159
lines changed

‎angularfire-start/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules
2+
/dist
3+
.angular

‎angularfire-start/angular.json

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
33
"version": 1,
44
"cli": {
5-
"packageManager": "npm"
5+
"packageManager": "npm",
6+
"analytics": false
67
},
78
"newProjectRoot": "projects",
89
"projects": {
@@ -14,22 +15,15 @@
1415
"prefix": "app",
1516
"architect": {
1617
"build": {
17-
"builder": "@angular-devkit/build-angular:browser",
18+
"builder": "@angular-devkit/build-angular:application",
1819
"options": {
1920
"outputPath": "dist/friendlychat",
2021
"index": "src/index.html",
21-
"main": "src/main.ts",
22-
"polyfills": [
23-
"zone.js"
24-
],
22+
"browser": "src/main.ts",
23+
"polyfills": ["zone.js"],
2524
"tsConfig": "tsconfig.app.json",
26-
"assets": [
27-
"src/favicon.ico",
28-
"src/assets"
29-
],
30-
"styles": [
31-
"src/styles.css"
32-
],
25+
"assets": ["src/favicon.ico", "src/assets"],
26+
"styles": ["src/styles.css"],
3327
"scripts": []
3428
},
3529
"configurations": {
@@ -49,9 +43,7 @@
4943
"outputHashing": "all"
5044
},
5145
"development": {
52-
"buildOptimizer": false,
5346
"optimization": false,
54-
"vendorChunk": true,
5547
"extractLicenses": false,
5648
"sourceMap": true,
5749
"namedChunks": true
@@ -63,35 +55,27 @@
6355
"builder": "@angular-devkit/build-angular:dev-server",
6456
"configurations": {
6557
"production": {
66-
"browserTarget": "friendlychat:build:production"
58+
"buildTarget": "friendlychat:build:production"
6759
},
6860
"development": {
69-
"browserTarget": "friendlychat:build:development"
61+
"buildTarget": "friendlychat:build:development"
7062
}
7163
},
7264
"defaultConfiguration": "development"
7365
},
7466
"extract-i18n": {
7567
"builder": "@angular-devkit/build-angular:extract-i18n",
7668
"options": {
77-
"browserTarget": "friendlychat:build"
69+
"buildTarget": "friendlychat:build"
7870
}
7971
},
8072
"test": {
8173
"builder": "@angular-devkit/build-angular:karma",
8274
"options": {
83-
"polyfills": [
84-
"zone.js",
85-
"zone.js/testing"
86-
],
75+
"polyfills": ["zone.js", "zone.js/testing"],
8776
"tsConfig": "tsconfig.spec.json",
88-
"assets": [
89-
"src/favicon.ico",
90-
"src/assets"
91-
],
92-
"styles": [
93-
"src/styles.css"
94-
],
77+
"assets": ["src/favicon.ico", "src/assets"],
78+
"styles": ["src/styles.css"],
9579
"scripts": []
9680
}
9781
},
@@ -105,4 +89,4 @@
10589
}
10690
}
10791
}
108-
}
92+
}

‎angularfire-start/package.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
},
1111
"private": true,
1212
"dependencies": {
13-
"@angular/animations": "^16.0.0",
14-
"@angular/common": "^16.0.0",
15-
"@angular/compiler": "^16.0.0",
16-
"@angular/core": "^16.0.0",
17-
"@angular/fire": "^7.6.1",
18-
"@angular/forms": "^16.0.0",
19-
"@angular/platform-browser": "^16.0.0",
20-
"@angular/platform-browser-dynamic": "^16.0.0",
21-
"@angular/router": "^16.0.0",
13+
"@angular/animations": "^17.2.4",
14+
"@angular/common": "^17.2.4",
15+
"@angular/compiler": "^17.2.4",
16+
"@angular/core": "^17.2.4",
17+
"@angular/fire": "^17.0.1",
18+
"@angular/forms": "^17.2.4",
19+
"@angular/platform-browser": "^17.2.4",
20+
"@angular/platform-browser-dynamic": "^17.2.4",
21+
"@angular/router": "^17.2.4",
2222
"rxjs": "~7.8.0",
2323
"tslib": "^2.3.0",
24-
"zone.js": "~0.13.0"
24+
"zone.js": "~0.14.4"
2525
},
2626
"devDependencies": {
27-
"@angular-devkit/build-angular": "^16.0.4",
28-
"@angular/cli": "~16.0.4",
29-
"@angular/compiler-cli": "^16.0.0",
27+
"@angular-devkit/build-angular": "^17.2.3",
28+
"@angular/cli": "~17.2.3",
29+
"@angular/compiler-cli": "^17.2.4",
3030
"@types/jasmine": "~4.3.0",
3131
"autoprefixer": "^10.4.14",
3232
"jasmine-core": "~4.6.0",
@@ -37,6 +37,6 @@
3737
"karma-jasmine-html-reporter": "~2.0.0",
3838
"postcss": "^8.4.24",
3939
"tailwindcss": "^3.3.2",
40-
"typescript": "~5.0.2"
40+
"typescript": "~5.3.3"
4141
}
4242
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { Component } from '@angular/core';
2+
import { HeaderComponent } from './components/header/header.component';
3+
import { RouterModule } from '@angular/router';
24

35
@Component({
46
selector: 'app-root',
57
templateUrl: './app.component.html',
68
styleUrls: ['./app.component.css'],
9+
standalone: true,
10+
imports: [HeaderComponent, RouterModule],
711
})
812
export class AppComponent {
913
title = 'friendlychat';

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
2+
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
3+
import { environment } from '../environments/environment';
4+
import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
5+
import { provideFirestore, getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
6+
import { provideFunctions, getFunctions, connectFunctionsEmulator} from '@angular/fire/functions';
7+
import { provideMessaging, getMessaging } from '@angular/fire/messaging';
8+
import { provideStorage, getStorage, connectStorageEmulator } from '@angular/fire/storage';
9+
import { routes } from './app.routes';
10+
import { provideRouter } from '@angular/router';
11+
12+
export const appConfig: ApplicationConfig = {
13+
providers: [
14+
importProvidersFrom(
15+
provideFirebaseApp(() => initializeApp(environment.firebase)),
16+
provideFirestore(() => getFirestore()),
17+
provideAuth(() => getAuth()),
18+
provideFunctions(() => getFunctions()),
19+
provideStorage(() => getStorage()),
20+
provideMessaging(() => getMessaging())
21+
),
22+
provideRouter(routes)
23+
],
24+
};

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

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎angularfire-start/src/app/app-routing.module.ts renamed to ‎angularfire-start/src/app/app.routes.ts

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NgModule } from '@angular/core';
21
import { RouterModule, Routes } from '@angular/router';
32
import {
43
AuthGuard,
@@ -11,7 +10,7 @@ import { ChatPageComponent } from './pages/chat-page/chat-page.component';
1110
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
1211
const redirectLoggedInToHome = () => redirectLoggedInTo(['chat']);
1312

14-
const routes: Routes = [
13+
export const routes: Routes = [
1514
{
1615
path: '',
1716
component: LoginPageComponent,
@@ -31,9 +30,3 @@ const routes: Routes = [
3130
data: { authGuardPipe: redirectUnauthorizedToLogin },
3231
},
3332
];
34-
35-
@NgModule({
36-
imports: [RouterModule.forRoot(routes)],
37-
exports: [RouterModule],
38-
})
39-
export class AppRoutingModule {}

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

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,39 @@
77
Friendly Chat
88
</span>
99
</a>
10-
<div class="flex flex-wrap items-end auth" *ngIf="user$ | async as user">
11-
<div class="flex flex-wrap justify-between text-white">
12-
<img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
13-
[alt]="user?.displayName" />
14-
<span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
15-
{{user?.displayName}}
16-
</span>
17-
<div class="dropdown inline-block relative shadow-lg">
18-
<button class=" text-gray-700 py-2 px-4 rounded inline-flex items-center font-semibold">
19-
<img class="w-8 h-8 rounded-full" src="../../../assets/menu.svg" />
20-
</button>
21-
<ul class="dropdown-menu absolute hidden text-gray-700 pt-3 w-48 right-2">
22-
<li class="bg-white p-4 flex-row">
23-
<img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
24-
[alt]="user?.displayName" />
25-
<span
26-
class="text-navy-200 text-md whitespace-nowrap px-4 lg:px-5 py-2 lg:py-2.5 mr-6">
27-
{{user?.displayName}}
28-
</span>
29-
</li>
30-
<li class="">
31-
<a class="bg-white hover:bg-navy-20 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
32-
href="/" (click)="this.chatService.logout()">
33-
Logout
34-
</a>
35-
</li>
36-
</ul>
10+
@if(user$ | async; as user) {
11+
<div class="flex flex-wrap items-center content-center auth">
12+
<div class="hidden sm:flex flex-wrap items-center content-center text-white">
13+
<img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
14+
[alt]="user?.displayName" />
15+
<span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
16+
{{user?.displayName}}
17+
</span>
3718
</div>
19+
<div class="dropdown rounded-lg px-4 py-2 hover:bg-navy-700 transition-colors">
20+
<div class="flex items-center">
21+
<button class="text-gray-700 inline-flex items-center font-semibold">
22+
<img class="w-8 h-8" src="../../../assets/menu.svg" />
23+
</button></div>
24+
<ul class="dropdown-menu absolute hidden bg-white w-48 p-1 right-2 shadow-xl rounded-lg">
25+
<li class="bg-white flex flex-row gap-2 items-center px-4 py-4 rounded-lg">
26+
<img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
27+
[alt]="user?.displayName" />
28+
<span
29+
class="text-navy-200 text-md whitespace-nowrap">
30+
{{user?.displayName}}
31+
</span>
32+
</li>
33+
<li>
34+
<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"
35+
href="/" (click)="this.chatService.logout()">
36+
Sign out
37+
</a>
38+
</li>
39+
</ul>
40+
</div>
3841
</div>
39-
40-
</div>
42+
}
4143
</div>
4244
</nav>
4345
</header>

‎angularfire-start/src/app/components/header/header.component.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
import { AsyncPipe } from '@angular/common';
12
import { Component, inject } from '@angular/core';
23
import { ChatService } from 'src/app/services/chat.service';
34

45
@Component({
56
selector: 'app-header',
67
templateUrl: './header.component.html',
78
styleUrls: ['./header.component.css'],
9+
standalone: true,
10+
imports: [AsyncPipe],
811
})
912
export class HeaderComponent {
1013
chatService = inject(ChatService);

0 commit comments

Comments
 (0)