Angular中如何排除项目内的指定JavaScript文件？

当然有办法搞定这个问题！我之前处理过类似的场景，给你几个可行的方案，根据你的实际情况选择就好：

方案1：通过Angular CLI配置直接排除文件 #

这是最简单的方法，直接在angular.json里告诉CLI不要编译指定文件：

1. 打开项目根目录下的angular.json
2. 找到projects -> 你的项目名称 -> architect -> build -> options
3. 添加exclude数组，填入你要排除的文件/文件夹路径：

"architect": {
  "build": {
    "options": {
      // 其他原有配置...
      "exclude": [
        "src/your-server-folder/**/*" // 替换成你的服务端文件所在的子文件夹路径
      ]
    },
    "serve": {
      "options": {
        // 这里不需要额外配置，build的exclude规则会自动应用到serve命令
      }
    }
  }
}

这个配置会让Webpack完全忽略指定路径下的所有文件，不会尝试编译它们，完美适配你这种服务端专用文件的场景。

方案2：用自定义Webpack配置忽略文件（适合复杂规则） #

如果你的排除需求更复杂，或者需要自定义其他Webpack规则，可以借助@angular-builders/custom-webpack来实现：

1. 先安装依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建custom-webpack.config.js文件，内容如下：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /your-server-folder\/.*\.js$/ // 匹配你的服务端JS文件的正则
    })
  ]
};

3. 回到angular.json，修改build和serve的builder，并指定自定义配置文件：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 其他原有配置...
  }
}

这种方法灵活性更高，适合需要对Webpack做更多定制的场景。

方案3：把文件移到非src目录（最省心的方案） #

Angular CLI默认只会编译src目录下的文件（除非你特意配置了其他路径），所以如果你的服务端文件不需要放在src里，直接把它移到项目根目录下的独立子文件夹（比如server/），Webpack根本不会去扫描这个目录，自然就不会报错了。

注意事项 #

不管选哪个方案，都要确保你的服务端脚本在执行时能正确找到这个文件的路径，别因为移动或排除配置影响了服务端的正常运行。

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