Angular 15仅开发环境出现readonly属性赋值错误，求生产环境无此问题原因

NgRx在开发模式下会自动对从Store取出的State对象做冻结（freeze）处理，核心目的是强制开发者遵守NgRx的不可变数据规范——State必须通过Action和Reducer来更新，不能直接赋值修改。这种机制能帮你提前发现不符合规范的代码，避免潜在的状态不一致问题。

而生产环境中，NgRx会关闭这个冻结逻辑：一方面是因为对象冻结会带来额外性能开销，生产环境需要极致的运行效率；另一方面，生产环境默认会启用代码优化，NgRx的开发模式检测代码也会被剔除，所以直接修改State属性不会触发只读错误，但这种写法本身是违规的，潜在bug依然存在，只是没被暴露出来。

结合你的配置细节来看：

• 开发环境的optimization和buildOptimizer都设为false，Angular没有做代码压缩优化，NgRx的开发模式检测逻辑完整保留，冻结机制正常工作；
• 生产环境开启了optimization: true，同时通过fileReplacements替换了生产环境配置（environment.prod.ts里应该设置了production: true），NgRx会基于这个环境变量自动切换到生产模式，禁用State冻结。

修复建议 #

绝对不要直接修改从NgRx Store获取的State属性，严格遵循不可变原则：

• 正确的更新方式：通过dispatch一个Action，在Reducer中返回全新的State对象；
• 如果需要临时修改State数据（比如用于表单绑定），先创建State的副本再操作，比如用扩展运算符、Object.assign或者Immer工具库：

错误示例：

const user = this.store.selectSnapshot(state => state.user);
user.name = '新名字'; // 直接修改原State，开发环境触发只读错误

正确示例：

// 方式1：通过Action更新State
this.store.dispatch(updateUser({ name: '新名字' }));

// 方式2：创建副本后修改（仅用于临时场景）
const userCopy = { ...this.store.selectSnapshot(state => state.user) };
userCopy.name = '新名字';

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