Angular 2 Cli应用硬刷新404及生产构建TypeError报错求助

我来帮你拆解并解决这两个Angular项目部署时的常见问题：

一、ng build --prod 触发 "TypeError: Cannot convert undefined or null to object" 错误 #

这个报错在生产构建时出现，但开发模式正常，大概率是代码中存在对null/undefined对象执行Object类操作的场景——开发模式下Angular的调试机制可能没触发这个错误，但生产模式下的代码优化（比如tree-shaking、严格模式校验）会把这个问题暴露出来。

常见原因与解决步骤： #

• 先定位错误位置：执行 ng build --prod --source-map 生成源码映射文件，然后把构建后的文件部署到本地服务器，打开浏览器控制台查看具体报错的文件和行号，精准定位问题代码。
• 检查Object相关操作：比如你可能在某处用了 Object.keys()、Object.assign()、Object.entries() 这类方法，但传入的参数是未初始化的变量（undefined）或null。举个例子：

  // 错误写法：data未赋值，是undefined
  let data;
  Object.keys(data).forEach(key => { /* ... */ });
  

  改成安全的写法：

  // 先判断对象是否存在
  if (data) {
    Object.keys(data).forEach(key => { /* ... */ });
  }
  // 或者用空值合并运算符兜底
  Object.keys(data ?? {}).forEach(key => { /* ... */ });
  

• 排查第三方依赖问题：如果代码没问题，可能是某个第三方库在生产模式下存在兼容性bug。可以尝试更新该依赖的版本，或者临时关闭生产构建的buildOptimizer选项来验证：
  打开angular.json，找到build配置里的production项：

  "configurations": {
    "production": {
      "buildOptimizer": false,
      // 保留其他生产配置...
    }
  }
  

二、生产构建后硬刷新出现404错误 #

这个问题是Angular单页应用（SPA）的典型特性导致的：前端路由是在浏览器端解析的，当你硬刷新页面时，浏览器会直接向服务器请求对应路径的文件，但服务器上并没有这个文件（所有路由对应的内容都在index.html里），所以返回404。

解决方法分两种场景： #

1. 配置服务器重定向（推荐）

根据你使用的服务器，添加重写规则，让所有不存在的文件请求都跳转到index.html：

• Apache服务器：在项目根目录创建.htaccess文件，写入以下内容：

  RewriteEngine On
  # 如果请求的文件/目录不存在，重写到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ /index.html [L]
  

• Nginx服务器：在服务器配置文件的location块中添加：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

2. 使用Hash路由

如果无法修改服务器配置，可以改用HashLocationStrategy，路由路径会带上#（比如http://your-domain.com/#/dashboard），硬刷新时浏览器只会请求index.html，然后由Angular解析Hash部分的路由。配置方法：
在AppModule中修改路由提供商：

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  declarations: [/* ... */],
  imports: [/* ... */],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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