Angular 18 build errors in AngularFire Quickstart

[DellaBitta]

The current example for getting started with AngularFire uses directives that have changed in Angular 18. Users creating a new Angular app from scratch using ng new and the AngularFire Quickstart will encounter numerous compilation errors. Such as:

NG8004: No pipe found with name 'async'. [plugin angular-compiler]

    src/app/app.component.html:235:54:
      235 │         <li class="text" *ngFor="let item of items$ | async">
          ╵                                                       ~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:19:15:
      19 │   templateUrl: './app.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~

Additionally, the example code should be updated to use the new @for directive instead of the older @ngFor. @for was introduced in Angular 17, and it looks like when that happened Anguar forced apps to explicitly import ngFor in their app components, but the example hasn't been updated to do that.

Therefore, the recommend changes are to:

• Update the example code for app.component.html to replace the usage of @ngFor with @for.
• Fix the imports for app.component.ts in the 3. Inject Firestore`` and ### 4. Bind a Firestore collection to a list steps.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.