feat(deps): Upgrade angular to v20, others dependencies to latest, improve docs #902

rafikhan · 2025-08-20T17:28:24Z

This pull request upgrades the application from Angular v16 to v20 and all other dependencies to ensure compatibility. This major upgrade incorporates new features, performance improvements, and bug fixes.

Changes:

Dependency Upgrades:

Angular has been upgraded from v16 to v20.
Angular Material/CDK has been upgraded from v16 to v20.
@angular/fire has been upgraded from v7 to v20.
All other dependencies have been updated to be compatible with Angular 20.

Configuration Changes

angular.json
- browserTarget has been renamed to buildTarget for compatibility with the newer Angular CLI.
- A new schematics section has been added to enforce consistency in generated code.

Code Changes

app.module.ts:
- The imports and providers arrays were updated for compatibility with the new versions of Angular and @angular/fire. This involved moving BrowserAnimationsModule and the Firebase providers to the imports array, and adding RouterModule, FormsModule, and ReactiveFormsModule.
index.html
- The material-components-web stylesheet and script were removed to resolve conflicts with @angular/material.
- The mat-typography class was moved to the app-root element to follow best practices.
Standalone Components:
- All components have been explicitly marked as standalone: false to avoid ambiguity and prepare for future Angular updates.

Motviation

Stay up-to-date with the latest versions of Angular and its ecosystem.
Fix build errors and compatibility issues.
Improve code quality and maintainability.

Other Context

The documentation in the docs directory has been updated to reflect the changes in this pull request.
The README.md file has been updated to be more accurate and to point to the new documentation.

… package updates

Removes the incorrect `material-components-web` stylesheet and script from `index.html`. These were causing conflicts with the `@angular/material` styles that are included in the build. Also moves the `mat-typography` class from the `body` to the `app-root` element to follow best practices and avoid potential styling issues.

- Updates the README.md file to be more accurate and to point to the documentation in the docs/ directory. - Updates the documentation in the docs/ directory to be more complete and to correct stale information.

gemini-code-assist

Summary of Changes

Hello @rafikhan, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request performs a significant upgrade of the application's core framework and its associated dependencies. The primary goal is to migrate the Angular application from version 16 to version 20, along with updating Angular Material, CDK, and AngularFire to their latest compatible versions. Beyond dependency bumps, the PR includes necessary configuration adjustments, refactors core Angular modules and components for compatibility, and cleans up the main HTML file. A major part of this change also involves adding extensive new documentation to provide clearer guidance on the project's architecture, setup, and various components.

Highlights

Major Angular and Dependency Upgrades: The application's core framework, Angular, has been upgraded from version 16 to version 20. This includes corresponding updates to Angular Material/CDK and @angular/fire to ensure full compatibility and leverage the latest features and performance enhancements.
Configuration Adjustments: Key configuration files like angular.json have been updated. This includes renaming browserTarget to buildTarget for modern Angular CLI compatibility and introducing a schematics section to standardize code generation practices.
Core Module and Component Updates: The app.module.ts file has been refactored to correctly handle imports and providers for the new Angular and Firebase versions. Additionally, all Angular components (app.component, filter-dialog, homepage, restaurant-card, restuarant-page, review-list, sign-in-modal, submit-review-modal) have been explicitly marked with standalone: false.
HTML Structure Refinements: The index.html file has been cleaned up by removing conflicting material-components-web imports and relocating the mat-typography class to the app-root element for better integration with Angular Material.
Extensive Documentation Improvements: A comprehensive set of new documentation files has been added to the docs directory, covering architecture, backend, data model, frontend, and setup instructions. Existing README.md files have also been updated to reflect these changes and provide more accurate information.
Backend Dependency Updates: Backend dependencies in firestore/functions/package.json have been updated, including firebase-admin, firebase-functions, and typescript, ensuring the serverless functions are running on the latest stable versions.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request successfully upgrades Angular from v16 to v20 and brings other dependencies up to date. The extensive documentation additions are a great improvement, making the project much easier to understand and set up. I've found a few minor issues in the documentation and one potential improvement in the Angular module configuration that I've detailed in the comments.

firestore/docs/frontend.md

firestore/functions/GEMINI.md

firestore/README.md

firestore/src/app/app.module.ts

firestore/docs/overview.md

firestore/docs/setup.md

firestore/docs/architecture.md

firestore/docs/overview.md

firestore/docs/backend.md

amysorto · 2025-08-20T19:02:15Z

firestore/src/app/app.component.ts

@@ -22,6 +22,7 @@ import { Router } from "@angular/router";
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
+  standalone: false


this and other standalone: true should be removed in a separate PR so that they are standalone components

After upgrading to Angular 20 and @angular/fire 20, all tests were failing due to an incorrect TestBed configuration. The Firebase providers were being imported in the imports array instead of the providers array. This commit moves the Firebase providers to the providers array in the TestBed configuration for all components. It also adds any missing module dependencies to the imports array. With these changes, all tests now pass.

rafikhan added 16 commits August 19, 2025 20:52

Adding an initial gemini file

18697f3

Adding gemini generated documentation on the codebase

3c46fac

feat(deps): upgrade angular from v16 to v17

e38f003

feat(deps): upgrade angular from v17 to v18

205cb0c

feat(deps): upgrade angular from v18 to v19

171cf38

feat(deps): upgrade angular from v19 to v20

ca65876

feat(deps): upgrade @angular/cdk and @angular/material to v17

5e23179

feat(deps): upgrade @angular/cdk and @angular/material to v18

e883e86

feat(deps): upgrade @angular/cdk and @angular/material to v19

16a9bfb

feat(deps): upgrade @angular/cdk and @angular/material to v20

bb9f421

feat(deps): upgrade tooling dependencies

74c0dfe

feat(deps): upgrade backend dependencies

ce7143e

feat(deps): upgrade rxjs and tslib

c1cc976

fix(build): fixing build errors in app.module.ts caused by the recent…

e636409

… package updates

docs: update and correct documentation

3c13462

- Updates the README.md file to be more accurate and to point to the documentation in the docs/ directory. - Updates the documentation in the docs/ directory to be more complete and to correct stale information.

gemini-code-assist bot reviewed Aug 20, 2025

View reviewed changes

firestore/docs/frontend.md Show resolved Hide resolved

firestore/functions/GEMINI.md Outdated Show resolved Hide resolved

firestore/README.md Outdated Show resolved Hide resolved

firestore/src/app/app.module.ts Outdated Show resolved Hide resolved

rafikhan added 2 commits August 20, 2025 13:44

fix(app): address code review feedback

7a2ef69

style(app): correct indentation of @component decorators

6bcb27e

rafikhan force-pushed the khanrafi/gemini branch from f1c8716 to 6bcb27e Compare August 20, 2025 18:37

akekeke reviewed Aug 20, 2025

View reviewed changes

firestore/docs/overview.md Outdated Show resolved Hide resolved

akekeke reviewed Aug 20, 2025

View reviewed changes

firestore/docs/setup.md Outdated Show resolved Hide resolved

chore(docs): Fixing angular urls

7cf2d13

amysorto reviewed Aug 20, 2025

View reviewed changes

rafikhan added 2 commits August 20, 2025 15:36

chore(docs): Removing url paths that don't exist

e8669cc

rafikhan force-pushed the khanrafi/gemini branch from 57e5732 to e887746 Compare August 21, 2025 17:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(deps): Upgrade angular to v20, others dependencies to latest, improve docs #902

feat(deps): Upgrade angular to v20, others dependencies to latest, improve docs #902

Uh oh!

rafikhan commented Aug 20, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amysorto Aug 20, 2025

Uh oh!

rafikhan Aug 20, 2025

Uh oh!

Uh oh!

feat(deps): Upgrade angular to v20, others dependencies to latest, improve docs #902

Are you sure you want to change the base?

feat(deps): Upgrade angular to v20, others dependencies to latest, improve docs #902

Uh oh!

Conversation

rafikhan commented Aug 20, 2025

Changes:

Dependency Upgrades:

Configuration Changes

Code Changes

Motviation

Other Context

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amysorto Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

rafikhan Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!