如何在现有项目中通过Angular CLI添加Angular应用并统一管理package.json

我来帮你一步步实现这个需求——把Angular应用放在client文件夹里，同时整个项目只用一个根目录的package.json。下面分两种情况说明（对应Angular CLI的新旧版本）：

情况1：使用Angular 5及更早版本（配置文件为.angular-cli.json） #

1. 确保全局安装Angular CLI #

如果还没装，先跑这个命令：

npm install -g @angular/cli@1.x

2. 完善.angular-cli.json配置 #

你已经有一个基础的配置文件了，把它替换成下面的内容，注意把your-project-name改成你实际的项目名：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "your-project-name"
  },
  "apps": [
    {
      "root": "client",
      "outDir": "dist/client",
      "assets": ["assets", "favicon.ico"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": ["styles.css"],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "client/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "client/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

这个配置核心是告诉Angular CLI：你的应用根目录是client，构建产物输出到dist/client。

3. 生成client目录的Angular项目结构 #

跑下面的命令，它会在client目录生成完整的Angular初始文件，但不会单独安装依赖（因为我们要共用根目录的package.json）：

ng new --skip-install --directory client your-project-name

如果提示是否覆盖文件（比如根目录的package.json），选择N（不覆盖）。

4. 安装所有依赖到根目录 #

回到项目根目录，安装Angular所需的所有依赖：

npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic @angular/router rxjs zone.js typescript --save

npm install @angular/cli @angular/compiler-cli @types/jasmine @types/node jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-jasmine-html-reporter protractor ts-node tslint --save-dev

5. 测试运行与构建 #

• 启动开发服务器：ng serve，访问http://localhost:4200就能看到Angular应用了
• 构建生产环境产物：ng build --prod，产物会生成在dist/client目录

情况2：使用Angular 6及以上版本（配置文件为angular.json） #

如果你的Angular CLI是新版本，用这个流程更合适：

1. 确保全局安装最新Angular CLI #

npm install -g @angular/cli

2. 创建angular.json配置文件 #

在项目根目录新建angular.json，内容如下（同样替换your-project-name）：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": ".",
  "projects": {
    "client": {
      "root": "",
      "sourceRoot": "client/src",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "client/src/index.html",
            "main": "client/src/main.ts",
            "polyfills": "client/src/polyfills.ts",
            "tsConfig": "client/tsconfig.app.json",
            "assets": ["client/src/favicon.ico", "client/src/assets"],
            "styles": ["client/src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "client/src/environments/environment.ts",
                  "with": "client/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "client"
}

3. 生成client目录的项目结构 #

同样用ng new命令跳过安装：

ng new --skip-install --directory client your-project-name

4. 安装依赖 #

和前面一样，在根目录运行：

npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic @angular/router rxjs zone.js typescript --save

npm install @angular/cli @angular/compiler-cli @types/jasmine @types/node jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-jasmine-html-reporter protractor ts-node tslint --save-dev

5. 测试运行 #

• 启动开发服务器：ng serve
• 构建生产包：ng build --prod

额外优化：共享shared目录的代码 #

如果想让client和server都能使用shared里的代码，可以在client/tsconfig.app.json的compilerOptions里添加路径映射：

"compilerOptions": {
  // 其他配置...
  "paths": {
    "@shared/*": ["../shared/*"]
  }
}

之后在Angular组件里就能这样导入共享代码：

import { YourSharedService } from '@shared/services/your-shared.service';

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