Exclude files from build in Angular 2

Question

How to exclude files from the Angular build using Angular-CLI. I've just added the path to exclude in the tsconfig.json and tsconfig.app.json files, but when I run ng serve, Angular is still trying to compile the files.

Any ideas?

it would be really great if you could just put ng-exclude or something at the top of a file. editing an entirely separate file seems a bit much. I dog vs a lot, but 'right click-exclude file' really comes in handy in many scenarios.... credit where credit is due... — greg, Sep 28 '19 at 00:59
Sometimes it's just easier to go to the documentation! https://www.typescriptlang.org/tsconfig — Simon_Weaver, Jun 01 '21 at 06:05

score 20 · Answer 1 · edited Jul 09 '18 at 18:18

20

Using exclude property of tsconfig.json (at root level), i.e.:

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

edited Jul 09 '18 at 18:18

Simon_Weaver

140,023
84
646
689

answered Jul 06 '17 at 15:18

Roman C

49,761
33
66
176

3

That is what I tried but it still trying to compile the typescript files – Matías González Jul 06 '17 at 15:47
What typescript files? – Roman C Jul 06 '17 at 15:48
I have some typescript files in a folder, but I don't want to compile them. – Matías González Jul 06 '17 at 15:49
post your typscript files and all related artifacts. – Roman C Jul 06 '17 at 16:01
I just want that the compiler ignore a folder, is it important the files content? – Matías González Jul 06 '17 at 17:24
17

I think another issue is that if any of the files that are included reference files that are excluded it still gets compiled. – seescode Jul 08 '17 at 00:09
What's the difference between doing this in `tsconfig.json` (root) vs `tsconfig.app.json`? – Kyle Vassella Aug 14 '18 at 23:38
Regarding the difference between different tsconfig files see https://stackoverflow.com/questions/54898013/difference-between-tsconfig-json-and-tsconfig-app-json-files-in-angular – Simon_Weaver Jun 01 '21 at 06:03
I want to exclude the folder ```src/assets/mock```. I tried with ```{ "exclude": [ "src/assets/mock" ] }```, ```{ "exclude": [ "/src/assets/mock" ] }```, ```{ "exclude": [ "./src/assets/mock" ] }```, ```{ "exclude": [ "**/src/assets/mock" ] }```, ```{ "exclude": [ "**/mock" ] }```, ```{ "exclude": [ "**/mock/**" ] }``` and many other combinations that I had the patience to try. I tried these values in tsconfig.json, in tsconfig.app.json, as well as angular.json wiht "ignore" instead of "exclude". As with many things Angular, it doesn't "just work". – user1969903 May 26 '22 at 13:31
This worked for me. – fonzane Jun 07 '23 at 13:12

score 13 · Answer 2 · edited Mar 29 '22 at 16:33

In your angular.json file,edit the build section as follows :

...
  "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": "/"
      }
    ],
...

This will still do the default imports required,but remove the specified files/directories(test.json & /test) when running ng build --prod,however they will still be available via ng serve,which is great for local development.

Remember to also exclude in your .gitignore file if you have sensitive information in those files.

I could not make it work when editing tsconfig.json,but the above worked like a charm!

Solution based on an example found here

score 3 · Answer 3 · answered Nov 07 '18 at 22:49

3

I noticed if you put a . in front of the path it will work:

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

answered Nov 07 '18 at 22:49

Shawn Dotey

616
8
11

Can this be per build type? – Odys Feb 02 '22 at 10:23

score 3 · Answer 4 · answered Mar 26 '20 at 15:04

Angular 7

I added the regex for the files to exclude from the build to src/tsconfig.app.json.

Example:

Suppose I added the file ./src/app/components/my-component/my-component.stub.ts to help in unit tests.

npm run build and ng serve --prod=true commands by default exclude only files ending with ...spec.ts and include all other files.

In order to exclude the above file, add a regular expression to the src/tsconfig.app.json as follows:

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

Angular will exclude any file in the project that ends with .stub.ts from the build commands.

Full src/tsconfig.app.json example:

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

score 1 · Answer 5 · answered Jul 17 '17 at 11:55

You can use ng eject to get the webpack.config.js. You can modify this to your needs. However, you will not be able to use ng serve or ng build after that.

For using these commands again, you have to modify .angular-cli.json. Remove the property 'projects.ejected' or set it to false. How to undo Angular 2 Cli ng-eject

score 1 · Answer 6 · answered Nov 13 '19 at 03:24

Here's another solution that might work in some situations.

In angular.json (located in an Angular project's root directory), you will see this file replacement block in the build configurations for the production environment by default.

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

Just add your own file replacements there, and anything in the replaced file will not be compiled into the app.

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

Imports no longer used by the replaced file will also be ignored by the app, so, using the above example, if the ignored config file references a bunch of other environment specific files, they will also be ignored.

You can also do this for any number of environments: https://angular.io/guide/build

score 0 · Answer 7 · edited Mar 27 '20 at 10:30

I don't found a way to remove a folder ONLY in production mode. With tsconfig either with angular.json build config

The only way (not "clean") i found to do that is to remove the folder after the build.

For instance my 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"
    ...

This Angular CLI thread is closed but not answered : https://github.com/angular/angular-cli/issues/6050#issuecomment-422288566

Exclude files from build in Angular 2

7 Answers7

Angular 7

Example:

Linked