如何使用 Angular-CLI 从 Angular 构建中排除文件？

Question

如何使用 Angular-CLI 从 Angular 构建中排除文件？我刚刚在

tsconfig.json

和

tsconfig.app.json

文件中添加了要排除的路径，但是当我运行

ng serve

时，Angular 仍在尝试编译这些文件。

有什么想法吗？

Answer 1

使用

exclude

 的 

tsconfig.json 属性（在根级别），即：

{
   "exclude": [
       "node_modules",
       "**/*.spec.ts"
   ]
}

Answer 2

在 angular.json 文件中，编辑构建部分，如下所示：

...
  "assets": [
    "src/assets",
    "src/favicon.ico"
  ],
  "styles": [
    "src/styles.scss"
  ],
  "scripts": []
},
"configurations": {
  "production": {
    "assets": [
      {
        "glob": "**/*",
        "input": "src/assets/",
        "ignore": [
          "**/test.json",
          "**/test"
        ],
        "output": "/assets/"
      },
      {
        "glob": "favicon.ico",
        "input": "src/",
        "output": "/"
      }
    ],
...

这仍然会执行所需的默认导入，但在运行 ng build --prod 时删除指定的文件/目录（test.json 和 /test），但是它们仍然可以通过 ngserve 获得，这对于本地开发非常有用。

如果您的

.gitignore

文件中包含敏感信息，请记住将这些文件排除在外。

我在编辑时无法让它工作

tsconfig.json

，但是上面的效果就像一个魅力！

基于此处

找到的示例的解决方案

Answer 3

我注意到如果你在路径前面放一个

.

它将起作用：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    ...
  },
  "exclude": [
    ...
    "./yourPathToExclude/**/*"
  ]
}

Answer 4

角7

我将要从构建中排除的文件的正则表达式添加到

src/tsconfig.app.json

。

示例：

假设我添加了文件

./src/app/components/my-component/my-component.stub.ts

来帮助进行单元测试。

默认情况下，

npm run build

和

ng serve --prod=true

命令仅排除以

...spec.ts

结尾的文件并包含所有其他文件。

为了排除上述文件，请在

src/tsconfig.app.json

中添加正则表达式，如下：

"exclude": [
    "**/*.stub.ts"
]

Angular 将从构建命令中排除项目中以

.stub.ts

结尾的任何文件。

完整

src/tsconfig.app.json

示例：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts",
    "**/*.stub.ts"
  ]
}

Answer 5

这是另一种在某些情况下可能有效的解决方案。

在 angular.json（位于 Angular 项目的根目录中）中，默认情况下，您将在生产环境的构建配置中看到此文件替换块。

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

只需在那里添加您自己的文件替换，替换文件中的任何内容都不会被编译到应用程序中。

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  },
  {
    "replace": "src/yourconfig.ts",
    "with": "src/yourconfig.prod.ts"
  }
],

被替换文件不再使用的导入也将被应用程序忽略，因此，使用上面的示例，如果被忽略的配置文件引用了一堆其他环境特定文件，它们也将被忽略。

您还可以对任意数量的环境执行此操作：https://angular.io/guide/build

Answer 6

您可以使用

ng eject

来获取 webpack.config.js。您可以根据需要修改它。但是，此后您将无法使用

ng serve

或

ng build

。

要再次使用这些命令，您必须修改

.angular-cli.json

。删除属性“projects.ejected”或将其设置为 false。 如何撤消 Angular 2 Cli ng-eject

Answer 7

我没有找到仅在生产模式下删除文件夹的方法。 使用

tsconfig

或使用

angular.json

构建配置

我发现做到这一点的唯一方法（不是“干净”）是在构建后删除该文件夹。

比如我的

package.json

:

    ...
    "build": "ng build",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production && npm run removeMocks",
    "removeMocks": "rimraf dist/myProject/mocks"
    ...

此 Angular CLI 线程已关闭但未得到答复： https://github.com/angular/angular-cli/issues/6050#issuecomment-422288566