Angular2项目执行ng build生成dist文件夹报错求助

看起来你踩了一个典型的「新工具适配老项目」的坑——你的Angular 2项目是早期非CLI骨架项目，用的是SystemJS+手动TypeScript编译的方式，根本不是Angular CLI生成的项目，所以用ng build命令完全不对路，这就是你遇到各种配置文件找不到、依赖冲突的核心原因。

下面是一步步的解决方案，帮你顺利生成可部署的dist文件夹：

一、先重置项目到原始可用状态 #

你之前升级依赖导致了大量peer冲突，先回到原始骨架项目的依赖配置：

1. 把你的package.json替换成你提供的原始骨架版本：

   {"name": "angular2-skeleton","version": "1.0.0","description": "First Angular2 Skeleton Project","scripts": {"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w"},"license": "UNLICENSED","dependencies": {"@angular/common": "^2.1.0","@angular/compiler": "^2.1.0","@angular/core": "^2.1.0","@angular/forms": "^2.1.0","@angular/http": "^2.1.0","@angular/platform-browser": "^2.1.0","@angular/platform-browser-dynamic": "^2.1.0","@angular/router": "^3.1.0","@angular/upgrade": "^2.1.0","angular-in-memory-web-api": "0.1.13","bootstrap": "^3.3.7","core-js": "^2.4.1","reflect-metadata": "^0.1.8","rxjs": "5.0.0-beta.12","systemjs": "0.19.39","zone.js": "^0.6.25"},"devDependencies": {"@types/core-js": "^0.9.34","@types/node": "^6.0.46","concurrently": "^3.0.0","lite-server": "^2.2.2","typescript": "^2.0.3"}}
   

2. 删除项目根目录下的node_modules文件夹和package-lock.json文件（如果存在）
3. 运行npm install，重新安装匹配的依赖

二、配置TypeScript编译到dist文件夹 #

检查你的tsconfig.json，确保编译输出目录指向dist：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "./dist" // 关键：指定编译后的JS文件输出到dist
  },
  "exclude": [
    "node_modules"
  ]
}

三、添加构建脚本到package.json #

因为这个项目不用Angular CLI，我们需要手动写脚本完成「编译TypeScript + 复制静态资源」的流程：
在scripts字段中新增两个命令：

"scripts": {
  "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
  "lite": "lite-server",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "build": "tsc && npm run copy:assets",
  "copy:assets": "xcopy /E /I src\\assets dist\\assets && xcopy src\\index.html dist\\ && xcopy src\\systemjs.config.js dist\\"
}

注意：如果你用的是Mac/Linux系统，把copy:assets替换成下面的命令（用cp代替xcopy）：

"copy:assets": "cp -r src/assets dist/ && cp src/index.html dist/ && cp src/systemjs.config.js dist/"

四、执行构建生成dist #

运行npm run build，这个命令会：

1. 用tsc编译所有TypeScript文件到dist目录
2. 复制index.html、systemjs.config.js（模块加载配置）和assets文件夹到dist

完成后，你的dist文件夹就包含了所有可以部署到线上的文件了。

为什么之前用ng build不行？ #

Angular CLI是Angular 4之后才成为官方标准项目工具的，你的Angular 2骨架项目是CLI出现前的手动配置项目：

• 没有CLI所需的配置文件（.angular-cli.json或angular.json），所以ng build识别不了这个项目
• 老项目用SystemJS做模块加载，而CLI项目用Webpack，两者的构建逻辑完全不同
• 随意升级Angular依赖到新版本，会和Angular 2的核心包产生严重的peer依赖冲突

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