Angular集成FireStore报注入错误 联系表单运行异常无法提交

问题背景 #

• 已完成Firebase依赖安装，TypeScript代码静态校验无报错，项目启动后控制台抛出错误
• 项目仅使用Angular Material、Bootstrap作为样式依赖，未定位到明确报错触发点
• 已在app.module.ts中导入Firebase配置文件，联系表单模块未单独创建service文件，仅包含组件TS逻辑与HTML模板

问题相关代码 #

contact-us.component.ts #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-contact-us',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.css']
})
export class ContactUsComponent implements OnInit {

  contactForm !:FormGroup ;
  isSubmit= true;
  submitMessage = '' ;
  private myForm !: AngularFirestoreCollection <any>;

  constructor(
    private FormBuild:FormBuilder,
    private Firestore:AngularFirestore,
  ) { }

  ngOnInit(): void {
    this.myForm=this.Firestore.collection('equiry');

    this.contactForm =this.FormBuild.group({
      name:[null,Validators.required],
      email:[null,[Validators.required,Validators.email]],
      subject:[null,Validators.required],
      message:[null,Validators.required]
    })
  }

  submitData(value:any){
    this.myForm.add(value).then(res=>{
      this.submitMessage='submit successfull...';
    }).catch(
      err=>{
        console.log(err);
      }
    );

    console.log(value);
    this.submitMessage='submiting successfully...'
    setTimeout(()=>{
      this.isSubmit=false
    },8000);
  }

}

contact-us.component.html #

<div class="container">
    <h1>Let us help you!</h1>
    <p>If you wish to get in touch with us for bookings, queries, comments or anything else you may need, please feel free to contact us via any of the following ways:</p>
    <form [formGroup]="contactForm" class="form-group">
            <mat-form-field appearance="fill">
                <mat-label>Your Name</mat-label>
                <input matInput formControlName="name">
            </mat-form-field>

            <mat-form-field appearance="fill">
                <mat-label>E-mail</mat-label>
                <input matInput formControlName="email">
            </mat-form-field>

            <mat-form-field appearance="fill">
                <mat-label>REASON FOR INQUIRY</mat-label>
                <mat-select  formControlName="subject">
                <mat-option value="one">Make or change reservation</mat-option>
                <mat-option value="two">wedding / Renewal of vow</mat-option>
                <mat-option value="tree">Airport tranfer</mat-option>
                <mat-option value="four">Urgent Request</mat-option>
                <mat-option value="five">General question</mat-option>
                <mat-option value="six">plan an event</mat-option>
                <mat-option value="seven">Experience / recration action</mat-option>
                <mat-option value="eight">Surfing</mat-option>
                <mat-option value="nine">Lost items</mat-option>
                <mat-option value="ten">Dinning expirence</mat-option>
                <mat-option value="eleven"> comment or feedback</mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field appearance="fill">
                <mat-label>Textarea</mat-label>
                <textarea matInput formControlName="message"></textarea>
                
                <button mat-button color="primary" [disabled]="contactForm.invalid" (click)="submitData(contactForm.value)">Submit</button>
                <p *ngIf="isSubmit">{{submitMessage}}</p>
                
            </mat-form-field>
    </form>
</div>

修复方案 #

按以下顺序排查修复即可解决问题：

1. 删除模板冗余脚本：原模板头部错误引入了AngularJS 1.x版本的外部脚本，和当前使用的Angular 2+框架完全不兼容，会直接引发运行时冲突，直接删除该行脚本标签即可。
2. 补全模块导入：在app.module.ts中确认已导入所有必须模块，缺失任意模块都会导致注入失败、模板解析报错：
   • 从@angular/forms导入ReactiveFormsModule，用于响应式表单指令解析
   • 从@angular/material对应路径导入用到的Material组件模块：MatInputModule、MatFormFieldModule、MatSelectModule、MatButtonModule、BrowserAnimationsModule（Material依赖动画模块）
   • 从@angular/fire/compat导入AngularFireModule（调用initializeApp方法传入Firebase配置参数初始化）、AngularFirestoreModule，仅导入配置文件不导入Firestore模块会导致服务注入失败。
3. 修正提交逻辑bug：原有提交逻辑在Firestore异步写入操作未返回结果时，就提前设置了提交成功状态，逻辑错误，修正后的提交方法代码如下：

submitData(value:any){
  this.submitMessage='提交中...';
  this.myForm.add(value).then(()=>{
    this.submitMessage='提交成功！';
    this.contactForm.reset();
    setTimeout(()=>{
      this.isSubmit=false
    },3000);
  }).catch(err=>{
    this.submitMessage='提交失败，请稍后重试';
    console.log(err);
  });
}

4. 调整Firestore规则：Firebase控制台默认的数据库规则禁止未授权用户写入数据，开发测试阶段可临时将规则设置为允许读写，正式上线前必须替换为带身份校验的安全规则，否则会抛出权限拒绝错误。

内容的提问来源于stack exchange，提问作者Wihangi Sakunika