Preventing the Generation of .spec.ts Test Files in Angular 9 with TypeScript and CLI

Although it may not be the best practice, please hear me out:

I've been using Angular-CLI, specifically ng g to create all of my classes. However, I don't want any *.spec.ts test files. I know that there are options like --inline-template and --inline-style to handle inline CSS and HTML instead of separate files. The --spec flag is automatically set to true for generating spec files.

So, for each generation, I can use 

ng g c foo --it --is --spec=false
.

But how can I globally disable the creation of test files? Is there a default setting for this?

I tried a few things (that didn't work), such as:

ng set spec=false --global

I also attempted to configure my src/tsconfig.json file by adding to the exclude array:

"exclude": [
    "**/*.spec.ts"
]
angulartypescriptangular-cliangular2-cli

Answer №1

Customization for Angular 9+ (version 6+ below)

1) To configure settings globally, paste the snippet in the root of angular.json.
2) For project-specific settings, place the snippet in the root of a specific project (projects.your-project-name) in angular.json.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "skipTests": true
  },
  "@schematics/angular:class": {
    "skipTests": true
  },
  "@schematics/angular:directive": {
    "skipTests": true
  },
  "@schematics/angular:pipe": {
    "skipTests": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  }
},

Explore all configurable options per file type at Schematic Options:

"schematics": {
  "@schematics/angular:component": {
    "changeDetection": "Default",
    "entryComponent": false,
    "export": false,
    "flat": false,
    "inlineStyle": false,
    "inlineTemplate": false,
    "module": "",
    "prefix": "",
    "selector": "",
    "skipImport": false,
    "spec": true,
    "style": "css",
    "viewEncapsulation": "Emulated",
    "skipTests": "false"
  },
  ...
},

For Angular 6+

1) Copy the snippet to the root of angular.json, (to apply changes globally).
2) Or copy it to a specific project's root (projects.your-project-name) within angular.json (for project-specific configurations).

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss",
    "spec": false
  },
  ...
},

Check out all customizable options for each file type in Schematic Options:

"schematics": {
  "@schematics/angular:component": {
    "changeDetection": "Default",
    ...
  },
  ...
},

Angular CLI Configuration using Angular CLI

CAUTION:

The command 

ng set defaults.spec.component false
triggers an error: 
get/set have been deprecated in favor of the config command.

To resolve this issue, replace ng set with ng config.

Utilizing the Angular CLI (config command specifics):

The specifications for generating specs, inline templates, inline styling, etc., are now stored within 

schematics.@schematics/angular.<file-type>.<setting>
in angular.json.

Type 

ng config schematics.@schematics/angular.component.spec false
to set up spec configurations for components. This command inserts the setting in the schematics property of angular.json.

Angular CLI workspace file (angular.json) on Angular Github

View Schematic options inside schema.json

Learn How to Perform X in Angular CLI v6

Answer №2

If you are working with version 6 and need to make changes to your angular.json file

You have the ability to customize the schematics for your specific project.

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss",
      "spec": false
    },
    "@schematics/angular:class": {
      "spec": false
    },
    "@schematics/angular:directive": {
      "spec": false
    },
    "@schematics/angular:guard": {
      "spec": false
    },
    "@schematics/angular:module": {
      "spec": false
    },
    "@schematics/angular:pipe": {
      "spec": false
    },
    "@schematics/angular:service": {
      "spec": false
    }
  },

Answer №3

To prevent the generation of spec files for a specific file type, you can use this command:

ng set defaults.spec.FILETYPE false

For instance:

ng set defaults.spec.component false // Spec files for .component files will not be generated

Alternatively, you have the option to disable spec file generation altogether by modifying the angular-cli.json file.

{
  ...
  "defaults": {
    "spec": {
      "class": false,
      "component": false,
      "directive": false,
      "module": false,
      "pipe": false,
      "service": false
    }
  }
}

Answer №4

Update for Angular 9+:

The configuration in Angular.json has been modified, leading to changes in previous configuration setups. This adjustment is highlighted in a GitHub issue related to Angular/CLI.

Incorporating insights from @sacgrover's input and my own observations:

Previously:

"@schematics/angular:component": {
    // true => DO generate spec files, false => DON'T generate them
    "spec": true,
    "styleext": "scss"
}

New approach:

"@schematics/angular:component": {
    // true => DON'T generate spec files, false => DO generate them
    "skipTests": true,
    "style": "scss"
}

For further details, visit the Angular Docs section on CLI Generate Command

Answer №5

Updating Sabbir Rahman's response:

For version 2.0.1 of the CLI, you'll need to specify the spec file as false for each type individually. See the sample configuration below:

"defaults": {
    "styleExt": "sass",
    "component": {
      "spec": false
    },
    "service": {
      "spec": false
    },
    "directive": {
      "spec": false
    },
    "class": {
      "spec": false // Default is set to false
    },
    "module": {
      "spec": false // Default is set to false
    },
    "pipe": {
      "spec": false
    }
  }

Answer №6

One way to prevent generating spec.ts files is by adding --skipTests=true|false flag with Angular CLI commands.

For instance, you can use 

ng g component componentName --skipTests=true

This option will skip the creation of any spec.ts files for the specified component.

UPDATE:

It's worth noting that starting from Angular 7, this feature no longer works despite being mentioned on the official Angular website. You can check it out here: https://angular.io/cli/generate#component

Answer №7

try using the flag --spec=false

for instance

ng generate component home --spec=false

output will show

CREATE src/app/home/home.component.scss (0 bytes)
CREATE src/app/home/home.component.html (23 bytes)
CREATE src/app/home/home.component.ts (262 bytes)
UPDATE src/app/app.module.ts (467 bytes)

Answer №8

If you are working with angular 8 or higher:

The use of "spec" option is no longer recommended. Instead, utilize the "skipTests" option when creating a new component like this:

ng g c my-new-component --skipTests=true

Answer №9

"@schematics/react:component": {"style": "scss","skipTests": true}

To fix the issue, simply insert "skipTests":true into your react.json configuration file.

Answer №10

If you want to skip running tests when creating your app, you can use the --skip-tests command like this:

ng new yourProjectName --skip-tests

Answer №11

Follow these steps for successful results:

Create a new component using the following command:
ng generate component freshFile --skip-tests

Answer №12

One way to prevent the generation of spec files is by adding --skipTests=true to your command.

For example:

ng g s core/services/auth/auth-guard --skipTests=true

The output log will show:

CREATE src/app/core/services/auth/auth-guard.service.ts (138 bytes)

Answer №13

You can insert the following snippet in your Angular.json file:

"schematics": {
    "@schematics/angular": {
      "component": {
        "spec": false
      }
    }
  }

Answer №14

To deactivate the generation of Angular component specs, you can simply execute the following command: 

ng config schematics.@schematics/angular.component.spec false

Answer №15

Best practice for avoiding unnecessary files in Angular 18 using the command line interface as outlined in the official documentation: Check out the Options Section here:

https://i.sstatic.net/82euy9fT.png

If you wish to exclude the *.spec.ts file when generating a custom component

CMD

ng g c components/my-component-name --skip-tests=true

https://i.sstatic.net/H3KaAibO.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2: Navigate without displaying information in the URL bar

Is there a method in Angular 2 to navigate and transmit data that is not visible in the URL? I am interested in developing a component that accepts a complicated object without revealing it in the URL. Appreciate any insights on this matter! ...

angular

The absence of the 'subscribe' property on the 'void' type in Angular 2 with asp.net core is causing an issue

Whenever I attempt to use the subscribe function, an error pops up. I faced a similar issue with .map, but it was resolved by replacing the file found at https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js I have recen ...

javascriptangulartypescript

Is it possible to invoke a method using a jQuery id selector within an Angular 2 template?

Is it possible to pass an id selector to a method from a template? <ul> <div id="temp">some text</div> <button (click)="methodName1(is it possible somehow? --> $('#temp'))">Label</button> </ul> ...

angular

Guidelines for incorporating Dropdown menus in a Multi-level Carousel themed SideNav using Angular 5 Material

https://i.sstatic.net/cbmuA.gif Hey there, World! I've been working on a sidenav with tabs that has the perfect transition effect I was looking for. Now, I want to add functionality so that when users click on "Option 1, Option 2 or Option 3", the tab ...

angulartypescriptangular-materialangular5components

Using TypeScript with axios and encountering an undefined property

Currently, I am encountering an issue while attempting to type the axios response. Here is a glimpse of how the response type appears: export interface GetBreedsResponse { data: { message: Breed[] } } Within my router file, I have implemented the ...

typescriptexpressaxios

Error encountered with TypeScript compiler when using a React Stateless Function component

I am attempting to create a React Stateless Function component using TypeScript. Take a look at the code snippet below: import * as React from 'react'; import {observer} from 'mobx-react'; export interface LinkProps { view: any; ...

reactjstypescriptmobxmobx-react

Exploring the intricacies of a specific Angular route through dialogue

Currently, I am working on enhancing the user experience by allowing data editing through dialogs. I have opted to move this functionality to a separate component so that it can read and edit the designated data efficiently without cluttering the main page ...

angularmaterial-uiroutesdialog

Managing clearing values/strings for different input types like text/password upon form submission in Angular2

Here is a code snippet for an HTML form: <div> <form class="form-horizontal" role="form" (ngSubmit)="createUser(Username.value, Password.value)"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <input type="text" class=" ...

angularangular2-forms

Neglectful TypeScript null checks overlooking array.length verification

When TypeScript is compiled with strict null checks, the code snippet below does not pass type checking even though it appears to be correct: const arr: number[] = [1, 2, 3] const f = (n: number) => { } while (arr.length) { f(arr.pop()) } The comp ...

javascripttypescripttypesnulltype-inference

What is the best way to utilize moment.js for adding days while excluding weekends?

I have a requirement to set a default follow-up date that is two days ahead of the current date. The existing code for this functionality is as follows: const Notify = moment().add(2, 'days').toDate(); Now, I need to modify this code to exclude ...

javascriptnode.jsangulartypescriptmomentjs

Azure Function responding with a 401 error code upon passing parameters through a proxy

I have a situation where I am working with an Angular service that includes a GET request with parameters currentPage and postsPerPage. In my efforts to pass these parameters to an Azure function, I came across a tutorial advising me to set up proxies. Wh ...

node.jsangularazureazure-functions

Sending data to an API in order to update an object can be accomplished when the controller is handling an Observable within Angular 6

Currently I am utilizing Angular 6 for creating a few basic features and encountering some difficulties with Observables. In one of my components, I retrieve a project on initialization: ngOnInit() { this.project$ = this.route.paramMap.pipe( sw ...

angularobservablereactive-programming

What is causing Angular services to malfunction when used within setTimeout and setInterval functions?

manage-tasks.component.html <p>manage-tasks works!</p> <form #taskForm="ngForm"> <input type="text" name="task_name" palceholder="Task Name" [(ngModel)]="task_service.selected_task.name& ...

javascriptangulartypescript

How to fetch and parse a JSON file in Angular using HTTP request

Looking to access a JSON file within my local project for some basic configuration. Here is the code snippet: myM: any; constructor(private http: Http) { this.http.get('config.json') .map((res: Response) => res.json()) ...

javascriptjsonangular

Losing the generic type in nested interfaces

Having issues with generics and 'nested' interfaces when working with ReadonlyArray. Is there a way to utilize the filterList function without losing the type for the list parameter? interface INumber { value: number } interface IState { ...

typescript

Encountering an issue while utilizing `createContext` in typescript

I am currently attempting to create a context using hooks in React with TypeScript. Here is the code snippet: // StateGlobalContext.ts import React, { Dispatch, ReactNode, SetStateAction } from "react"; export interface StateGlobalContextType { ...

reactjstypescriptreact-context

Multiple components are returned with switch case

I am trying to iterate over an object and display a result based on Object.entries. However, the loop currently stops at the first return statement. Is there a way for me to capture and display all components returned simultaneously, perhaps using a vari ...

javascriptreactjstypescript

How can I display or hide a specific div when it is clicked?

I have a list of icons that look like this: <ul> <li [ngClass]="iconM ? 'active': 'notactive'" title="Kontakti"><span (click)="showHide = !showHide"><i class="fa fa-user"></i><i class="fa fa-angl ...

javascriptangular

challenges encountered while integrating an external library into Angular 8

I am currently experimenting with implementing a profitWell script in my angular application. Here is the script I am working with: <script id="profitwell-js" data-pw-auth="XXX"> (function(i,s,o,g,r,a,m){i[o]=i[o]||function(){(i[o].q=i[o].q| ...

angular

Expanding constructor in TypeScript

Can the process described in this answer be achieved using Typescript? Subclassing a Java Builder class This is the base class I have implemented so far: export class ProfileBuilder { name: string; withName(value: string): ProfileBuilder { ...

angulartypescript