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?

Solution 1

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

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

Solution 2

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

Solution 3

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

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

Solution 4

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"
  ]
}

Solution 5

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

View more solutions