Angular模板表单校验运行时出现404访问失败与TS2531空对象报错排查

一、页面访问返回Cannot Get / 404未找到问题 #

触发原因 #

这个错误是本地开发服务层面的静态资源匹配失败，和Angular内置路由逻辑无关，常见触发点：

• 启动路径错位：在非项目根目录执行了静态服务启动命令，服务把非Angular项目的目录当成了静态资源根，无法匹配到根路径对应的入口资源，就会抛出Cannot Get /的404提示
• 入口文件配置不匹配：index.html没有放在angular.json配置的默认入口路径下，构建流程找不到入口文件，最终启动的服务也没有对应资源可以响应根路径请求
• 端口映射错位：ng serve启动时因为默认端口4200被占用，自动切换到了其他端口，但浏览器还在访问旧的错误地址

修复步骤 #

• 确认在项目根目录（即包含angular.json、package.json文件的目录层级）执行标准启动命令ng serve，不要在子目录下零散启动服务
• 核对启动后终端输出的实际访问地址，如果端口被占用自动切换，要使用终端给出的真实地址访问，不要自行臆测访问路径
• 检查angular.json中build配置的index字段值，确保指向真实存在的入口html文件，默认路径为src/index.html，如果文件有移动要同步修改配置

二、模板访问ngModel.errors触发TS2531空引用错误 #

触发原因 #

这个错误是Angular版本迭代后的类型检查规则收紧导致的：

• 旧版本Angular默认开启宽松模板检查，直接访问ngModel.errors属性不会触发报错，大量老教程的示例代码都采用这类无空值防护的写法
• Angular 12之后默认开启严格模板类型检查，而NgModel实例的errors属性原生类型定义为ValidationErrors | null，也就是在表单控件初始化阶段、校验规则尚未执行时，这个属性的取值就是null
• 模板中没有对null状态做防护就直接访问errors下的具体校验规则字段，就会被静态编译检查拦截，抛出TS2531错误。姓名、手机号、地址等所有配置了校验规则的字段都会报这个错，因为所有NgModel实例的errors属性都遵循相同的类型定义

修复方案 #

不要为了绕过检查关闭tsconfig.json里的严格模板校验，那会丢失模板的类型保护能力，按照以下方式修改模板即可：

• 所有访问errors属性的位置统一使用可选链语法做空值保护，这是Angular官方推荐的兼容写法，从Angular 13+版本开始原生支持
• 代码对比例示：
  1. 原错误写法（触发TS2531）：

  <input name="name" ngModel required minlength="2" #name="ngModel">
  <div *ngIf="name.invalid && name.errors.required">姓名为必填项</div>
  

  2. 修改后正确写法：

  <input name="name" ngModel required minlength="2" #name="ngModel">
  <div *ngIf="name?.invalid && name?.errors?.required">姓名为必填项</div>
  

• 所有涉及minlength、maxlength等其他校验规则的判断逻辑，都按照这个方式在属性访问前加?.，覆盖全部字段后TS2531报错就会全部消失

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