Angular CLI项目构建停在10%，本地页面空白问题求助

先帮你梳理下核心问题：你的自定义smart-box项目执行ng serve时卡在10%，打开页面是空白的，但用ng new my-app创建的新项目（同样卡在10%）却能正常显示默认页面。既然重装Angular和Node都没用，说明问题不在全局环境，大概率出在你项目的依赖冲突或配置上。

下面是按优先级排序的修复方案，针对性解决你的情况：

1. 修复@angular/http版本不兼容问题 #

从你的package.json能看到，你用的@angular/http@7.2.15和其他Angular核心包（8.2.3）版本完全不匹配。Angular 8已经彻底弃用了@angular/http，改用@angular/common/http下的HttpClient，这个版本冲突几乎肯定是导致构建卡住、页面空白的元凶。

修复步骤：

• 卸载过时的@angular/http：

  npm uninstall @angular/http
  

• 切换到HttpClient：
  1. 在app.module.ts中，把原来导入的HttpModule替换成@angular/common/http下的HttpClientModule
  2. 更新所有使用Http的服务代码，改用HttpClient（它的API更简洁，功能也更完善）

2. 删除手动安装的Webpack #

你在依赖里手动加了webpack@4.39.2，但Angular CLI会自动管理内部的Webpack版本，手动安装会和CLI自带的@ngtools/webpack@8.2.2产生版本冲突，引发构建停滞。

修复步骤：

• 卸载手动安装的Webpack：

  npm uninstall webpack
  

• 删除本地依赖和锁文件，重新安装确保依赖一致性：

  # Windows命令
  rmdir /s /q node_modules
  del package-lock.json
  npm cache clean --force
  npm install
  

3. 清理Angular和Node缓存 #

缓存文件损坏也会导致奇怪的构建问题，清空所有相关缓存试试：

• 清理Node缓存：

  npm cache clean --force
  

• 再执行上面步骤里的删除node_modules并重装依赖的操作

4. 查看详细构建日志 #

要精准定位卡在10%时的具体任务，用 verbose 模式启动构建：

ng serve --verbose

这会显示构建到10%时正在处理的文件或插件，能帮你发现比如resolve-url-loader这类工具的配置问题。

5. 检查resolve-url-loader配置 #

你安装了resolve-url-loader@3.1.0，这个工具需要和Sass配合特定配置才能正常工作：

• 确保项目里安装了sass-loader（Angular 8适配的是sass-loader@7.x版本，和resolve-url-loader 3.x兼容）
• 在angular.json的stylePreprocessorOptions里正确配置Sass路径
• 开启样式的sourceMap（resolve-url-loader需要依赖source map才能工作）

6. 禁用增量构建 #

Angular CLI的增量构建缓存偶尔会引发卡顿，试试关闭它启动构建：

ng serve --no-aot --no-watch

如果这样能正常运行，可以临时在angular.json的构建选项里关闭增量构建，直到根源问题解决。

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