无.angular-cli.json的ASP.NET MVC+Angular5项目环境配置代码放置位置咨询

嘿，我懂你作为Angular新手遇到的困惑——ASP.NET MVC集成的Angular项目结构确实和标准CLI初始化的项目不太一样，有时候会缺省.angular-cli.json这个核心配置文件。别担心，咱们一步步来搞定：

方案1：手动创建.angular-cli.json（推荐，匹配你参考的文章逻辑） #

你用的是Angular 5，标准CLI项目的核心配置就是这个文件，所以直接手动创建就行：

1. 找到项目中Angular代码的根目录（就是包含src文件夹的那个目录），新建一个名为.angular-cli.json的文件。
2. 把你提供的配置片段放到这个文件的apps数组里，确保整个JSON格式完整，参考完整结构如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "你的项目名称"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "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",
        "staging": "environments/environment.staging.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    }
  ],
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

3. 确保src/environments文件夹下存在对应的环境文件：environment.ts、environment.staging.ts、environment.prod.ts，每个文件导出配置对象，比如：

// environment.ts（开发环境）
export const environment = {
  production: false,
  apiBaseUrl: "http://dev-your-api.com"
};

4. 修改package.json中的scripts，添加不同环境的构建命令：

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:staging": "ng build --env=staging",
  "build:prod": "ng build --env=prod --prod"
}

之后你就可以通过npm run build:staging这类命令，构建对应环境的Angular代码了。

方案2：如果项目用Webpack直接构建（无CLI） #

如果你的项目是通过Webpack直接打包Angular代码（而非Angular CLI），那需要修改Webpack配置来实现环境变量：

1. 在Webpack配置文件（比如webpack.config.js）中添加DefinePlugin插件，注入环境变量：

const webpack = require('webpack');
const env = process.env.NODE_ENV || 'development';

module.exports = {
  // ...其他Webpack配置项
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(env),
        API_BASE_URL: JSON.stringify(
          env === 'prod' ? 'http://prod-your-api.com' : 
          env === 'staging' ? 'http://staging-your-api.com' : 
          'http://dev-your-api.com'
        )
      }
    })
  ]
};

2. 在package.json的scripts中添加环境构建命令：

"scripts": {
  "build:dev": "webpack --mode development",
  "build:staging": "NODE_ENV=staging webpack --mode production",
  "build:prod": "NODE_ENV=production webpack --mode production"
}

3. 在Angular代码中直接使用process.env.API_BASE_URL来获取对应环境的配置。

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