使用ng build --prod无法构建Angular 2项目求助

Hey there! 我看到你用Angular Material搭了Angular 2项目，部署Firebase时服务器能正常跑，但构建环节掉链子了。虽然看不到你的错误截图，但根据这类场景的常见坑，我整理了几个大概率的排查方向和解决方案，你可以挨个试试：

1. 先检查Angular Material和核心Angular版本是否匹配 #

Angular 2对依赖版本的兼容性要求特别严格，要是Material版本和你的Angular核心包（比如@angular/core、@angular/common）不对应，十有八九会触发构建错误。

• 先跑命令看看当前版本：

  npm list @angular/core @angular/material
  

• 确保@angular/material和@angular/cdk的版本和Angular核心包完全一致（比如Angular是2.4.10，那Material就得用2.0.0-beta.12这类对应版本）。版本不匹配的话，执行安装命令修正：

  npm install @angular/material@你的Angular版本对应号 @angular/cdk@同版本号 --save
  

2. 确认Material模块是否正确导入到项目中 #

要是你在组件里用了Material组件（比如按钮、对话框），但没在对应的NgModule里导入对应的Material模块，构建时会直接报错找不到组件。
举个例子，如果你用了MatButton，就得在app.module.ts里这么加：

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
// 其他必要导入...

@NgModule({
  imports: [
    // 你的其他模块（比如BrowserModule）
    MatButtonModule // 把要用的Material模块加到这里
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

记得用哪个组件就导入对应的Module，别漏了！

3. 检查Firebase和Angular的构建配置 #

有时候不是代码的问题，是部署配置写错了：

• 打开firebase.json，检查hosting部分：确保public字段指向Angular的构建输出目录（Angular 2默认是dist文件夹），predeploy命令是正确的ng build或者ng build --prod。
• 再检查Angular的配置文件（Angular 2用的是angular-cli.json），看看defaults -> build里有没有错误的参数，比如输出路径写错了之类的。

4. 本地先跑生产构建看具体错误 #

Firebase部署时一般会执行生产模式构建（ng build --prod），这个模式下会开启AoT编译和严格类型检查，很多开发模式下能“混过去”的问题（比如模板变量拼写错、类型不匹配）都会在这时候暴露出来。
你直接在本地终端跑：

ng build --prod

这时候终端会输出具体的错误信息（比截图清晰多了），根据错误提示直接定位修复就行——比如模板里绑定了不存在的变量，或者TypeScript里有未声明的类型。

5. 清理依赖缓存，重新安装 #

有时候node_modules里的依赖文件损坏或者缺失，也会导致构建失败，这时候可以试试“重置”依赖：

• 删除node_modules文件夹和package-lock.json文件；
• 重新执行npm install；
• 再清理Angular CLI的缓存：旧版本用ng cache clean，新版本用ng cache clear。

如果试了这些还没解决，把ng build --prod输出的具体错误信息贴出来，我就能更精准地帮你定位问题啦！

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