Angular 4项目运行报错：加载common.umd.js/http时404未找到

嘿，我碰到过类似的问题，在添加新服务和安装moment后出现这种404，大概率是配置或者依赖出了问题，给你几个靠谱的排查步骤：

1. 先检查SystemJS的映射配置 #

Angular 4里的HttpClient相关模块需要在SystemJS里正确映射，不然服务器找不到对应的umd文件。打开你的systemjs.config.js，看看有没有加这行：

map: {
  // 其他已有的映射...
  '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
}

要是没加，添上之后重启开发服务，应该能解决路径找不到的问题。

2. 确保Angular依赖版本统一 #

安装moment的时候可能顺带更新了某些Angular包，导致版本不一致。打开package.json，检查所有@angular/开头的包版本是不是都是4.x.x的，比如@angular/common、@angular/core这些，要是有版本不一样的，改成统一版本后跑：

npm install

完了可以删掉node_modules文件夹和package-lock.json，再重新装一遍，确保依赖完全一致。

3. 检查代码里的导入路径有没有错 #

别不小心导入了Angular 5+的http模块！Angular 4里的HttpClientModule是在@angular/common/http下的，检查你的app.module.ts或者服务文件里的导入语句：

import { HttpClientModule } from '@angular/common/http';

要是写成了别的路径，赶紧改回来。

4. 确认后端服务器的静态资源配置 #

因为你的Angular和后端在同一个解决方案里，后端服务器（比如ASP.NET）可能没把node_modules设为可访问的静态资源目录：

• 要是用ASP.NET Core，去Startup.cs里看UseStaticFiles的配置，确保包含node_modules的路径；
• 传统ASP.NET的话，检查Web.config里的静态资源规则，允许访问node_modules下的文件。

5. 清缓存+重启服务试试老办法 #

有时候就是缓存搞的鬼：

• 浏览器按Ctrl+Shift+R强制刷新，清掉旧缓存；
• 关掉所有开发服务器，重新启动；
• 试试npm clean-install，彻底清理依赖后重新安装。

小提醒：装moment的时候选个兼容Angular 4的版本，比如moment@2.29.4，太高的版本可能会有兼容问题，执行npm install moment@2.29.4 --save就行。

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