Angular项目本地localhost运行正常 部署GitHub Pages添加功能报错

问题现象 #

• 本地localhost环境运行支持刷新数据持久化的Angular待办清单应用时，添加条目功能正常，新增条目可正常展示在添加按钮下方
• 项目部署到GitHub Pages后，点击添加按钮无任何响应
• 相关地址：
  • GitHub Repo
  • GitHub Pages 线上地址

控制台报错 #

触发错误时浏览器控制台输出如下：

ERROR TypeError: Cannot read properties of null (reading 'push')
    at e.addTodo (main.2beb7ccacdd609b1.js:1:139904)
    at main.2beb7ccacdd609b1.js:1:140617
    at Qh (main.2beb7ccacdd609b1.js:1:60440)
    at i (main.2beb7ccacdd609b1.js:1:60625)
    at HTMLFormElement.<anonymous> (main.2beb7ccacdd609b1.js:1:107043)
    at v.invokeTask (polyfills.a66b249bad4eb06b.js:1:7168)
    at Object.onInvokeTask (main.2beb7ccacdd609b1.js:1:82284)
    at v.invokeTask (polyfills.a66b249bad4eb06b.js:1:7089)
    at M.runTask (polyfills.a66b249bad4eb06b.js:1:2563)
    at m.invokeTask [as invoke] (polyfills.a66b249bad4eb06b.js:1:8219)

错误提示addTodo方法中尝试读取null值的push属性。

根因分析 #

报错的核心原因是待办列表变量初始化时缺失空值兜底：

• localStorage数据按源（协议+域名+端口）隔离，本地localhost环境和GitHub Pages线上环境属于完全独立的存储空间
• 本地调试时，浏览器localStorage中已经存入了合法的待办列表数组数据，初始化读取时能拿到有效值，因此push操作正常
• 首次访问GitHub Pages线上地址时，对应存储key不存在，localStorage.getItem()返回null，经过JSON.parse(null)处理后得到null值，直接赋值给待办列表变量，后续执行push操作时就会触发空值报错。

修复方法 #

找到项目中从localStorage读取数据初始化待办列表的代码，增加空值兜底逻辑，保证待办列表变量初始化后始终为数组类型：

// 原错误写法（无兜底，读取到null时会导致后续push报错）
todos: Todo[] = JSON.parse(localStorage.getItem('todos'));

// 基础修复：无存储数据时默认初始化为空数组
todos: Todo[] = JSON.parse(localStorage.getItem('todos') || '[]');

如果要兼容localStorage被意外写入非数组格式数据的场景，可以增加类型校验：

const storedData = localStorage.getItem('todos');
let todos: Todo[] = [];
if (storedData) {
  const parsed = JSON.parse(storedData);
  todos = Array.isArray(parsed) ? parsed : [];
}

修改完成后重新执行打包命令，将生成的产物重新部署到GitHub Pages即可恢复功能。

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