Angular应用提交数据到json server时页面自动重载问题求助

问题根因 #

• 表单层面偶发原因：Angular表单提交事件未阻止原生默认提交行为，部分依赖版本下原生提交逻辑会触发页面重载
• 核心根本原因：你提交数据时json-server会修改db.json文件，如果该文件处于Angular开发服务器（ng serve）的监听目录范围内，dev server检测到文件变更就会自动重载页面，你关闭db.json监听后问题消失就是直接佐证
• 和package-lock.json的关联：此前你忽略lock文件，每次安装依赖会拉取符合版本规则的最新版，某次更新后要么是@angular/forms的提交逻辑有小调整，要么是json-server写入文件的触发时机变化，要么是Angular CLI的dev server监听规则变更，提交lock文件后依赖版本固定，问题就稳定复现，并非lock文件本身的错误

可落地的修复方案 #

1. 代码层面修复表单提交逻辑（优先处理） #

修改表单的事件绑定，传入事件对象并阻止默认行为：

<form #postForm="ngForm" (ngSubmit)="onAnnotateSelection($event, postForm.value)">
<!-- 其余表单代码保持不变 -->
</form>

对应组件的ts文件中修改方法定义：

onAnnotateSelection(event: Event, formValue: any) {
  // 加这行阻止原生表单默认提交行为
  event.preventDefault();
  // 你原本的提交逻辑完全保留即可
}

如果之前修改type="button"后无法提交，是因为没有绑定点击事件，补充绑定即可正常使用：

<button class="btn btn-outline-success" type="button" [disabled]="!postForm.valid" (click)="onAnnotateSelection(postForm.value)">
  Annotate your highlighted/selected Text
</button>

2. 彻底解决dev server自动重载问题（根本修复） #

不用关闭json-server的文件监听，只需在启动Angular开发服务器时添加忽略db.json的参数即可：

ng serve --ignore-path db.json

如果觉得每次输入麻烦，可以修改package.json中的启动脚本：

{
  "scripts": {
    "start": "ng serve --ignore-path db.json",
    // 其余脚本保持不变
  }
}

后续直接执行npm start启动项目即可，dev server会自动忽略db.json的变更，不会触发页面重载。
如果你的db.json放在assets等子目录下，把参数中的路径改成对应相对路径即可，比如--ignore-path src/assets/db.json。

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