Angular CLI 9.1.1：ng build及ng build --prod后样式/脚本加载失败求助

嘿，我之前用Angular CLI老版本开发时也碰到过一模一样的情况，结合9.1.1版本的特性，给你几个实用的排查和解决方向：

• 检查base href配置
  Angular构建后的资源加载路径完全依赖base href参数，如果你的应用不是部署在服务器根目录，没设置这个就会导致资源找不到。你可以：

  • 构建时直接指定路径：ng build --prod --base-href "/your-app-deploy-path/"
  • 或者在angular.json的projects -> [你的项目名] -> architect -> build -> options里添加固定配置：

    "baseHref": "/your-app-deploy-path/"
    

• 确认构建输出与资源引用路径
  先核对angular.json里的outputPath是否正确，确保所有构建产物都生成在指定的dist子目录中。然后打开dist文件夹里的index.html，查看样式和脚本的引用路径，确认路径和实际部署的服务器路径匹配，避免出现绝对路径不匹配或者相对路径写错的情况。

• 排查文件权限问题
  如果是部署在Linux服务器上，有时候构建后的文件权限不足会导致服务器无法读取资源。进入dist目录执行以下命令，给所有文件设置可读可执行权限：

  chmod -R 755 ./
  

• 清理缓存后重新构建
  Angular CLI的缓存偶尔会导致构建产物异常，先清理缓存再重新构建试试：

  ng build --prod --no-cache
  

  也可以手动删除node_modules/.cache目录后再执行构建命令。

• 检查服务器部署配置
  如果用Nginx、Apache等服务器部署，要确保服务器根目录指向构建后的dist文件夹，同时配置好SPA的路由规则（比如Nginx需要添加重定向到index.html的规则），避免资源请求被错误的路由规则拦截。

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