Generating Component without spec.ts file in Angular 2+

Question

Is there a way to get rid of the spec.ts file in Angular 2+, whenever I create a new component. I know this is for testing purpose but what if I don't need it.

May be there is some setting to disable this specific testing file.

When you create a new component with Angular CLI? – LoïcR Dec 06 '16 at 07:53 — LoïcR, Dec 06 '16 at 07:53
yes exactly when we generate component from Angular cli. – saadeez Dec 06 '16 at 07:56 — saadeez, Dec 06 '16 at 07:56
Angular 7/8 CLI its --skipTests=true|false – Code Spy Jun 14 '19 at 10:04 — Code Spy, Jun 14 '19 at 10:04

Poul Kruijt · Accepted Answer · 2021-04-19T05:34:00.950

289

Updated for Angular >=8 CLI

For one component use the following command:

ng generate component --skip-tests=true component-name

For a single project, change or add the following in your angular.json:

{ 
  "projects": {
    "{PROJECT_NAME}": {
      "schematics": {
        "@schematics/angular:component": {
          "skipTests": true
        }
      }
    }
  }
}

For a global setting for all your projects, change or add the following in your angular.json:

{ 
  "schematics": {
    "@schematics/angular:component": {
      "skipTests": true
    }
  }
}

Or by using the command line

ng config schematics.@schematics/angular:component.skipTests true

< Angular 8

Inside your angular-cli.json set the spec.component parameter to false:

{
   ...
   "defaults" : {
       ...
       "spec": {
           ...
           "component": false
       }
   }
}

or use the --spec=false option during creation

ng generate component --spec=false component-name

edited Apr 19 '21 at 05:34

answered Dec 06 '16 at 07:57

Poul Kruijt

69,713
12
145
149

@Pierre - What about if I dont want folder too – Hidayt Rahman Oct 15 '17 at 19:25
It works but there is no "spec" inside defaults object so maybe it's updated by Angular on later version. The new solution should be like that"defaults": { "class": { "spec": false }, "component": { "spec": false } } – Ahmed Essawy Jan 16 '18 at 15:41
7

Option `spec` is deprecated: Use `skipTests` instead – Chamika Sandamal Aug 20 '19 at 09:46
Is there any way to stop generating this spec.ts file for the whole project ? – Damika Dec 28 '21 at 19:01
@Damika isn't that covered in the beginning of my answer? – Poul Kruijt Dec 28 '21 at 19:28
@PoulKruijt Ah yeah I can understand now ; changing the angular.json file, Thank you. Is this way valid for angular-cli 13 ? – Damika Dec 28 '21 at 20:16
Don't forget @schematics/angular:service if you want to skip it for services too. – Sixteen Apr 07 '22 at 13:36

score 19 · Answer 2 · answered Jun 23 '18 at 12:09

19

For Angular 6

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

answered Jun 23 '18 at 12:09

Franklin Pious

3,670
3
26
30

Masoud Afzali · Answer 3 · 2019-07-12T13:54:37.887

12

For Angular 7 and higher this will work :

ng generate component componentname --skipTests

or ng generate component componentname --skipTests=true

edited Jul 12 '19 at 13:54

answered Jun 19 '19 at 20:14

Masoud Afzali

121
1
3

score 12 · Answer 4 · answered Jun 14 '20 at 10:33

Latest Angular 9 Compatible

CLI Command

ng generate component your-component-name --skipTests=true

or using the alias s instead of --skipTests

ng generate component your-component-name -s=true

Modifying `angular.json` to avoid using above CLI command always

Copy the below snippet to the root of a specific project (projects.your-project-name) in its angular.json.

The below will ensure .spec files are not created for Components, Class, Directives, Pipe and Service with the ng generate command. You may choose the ones as per requirement.

{
  ...
  "projects": {
    "your-project-name": {
      ...
      "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
        }
      },
    ...
}

PS: The --spec=false option is now deprecated and will not work

The `s` should be capital here. Small s creates inline styles (no external scss file). `ng generate component your-component-name -S=true` — Pankaj, May 13 '21 at 13:21
I tried the -S option and got an unknown comment. -s didn't prevent the spec file but the css file. I am using version 12. — tshad, Aug 19 '21 at 01:40

score 11 · Answer 5 · answered Dec 06 '16 at 07:57

When using angular-cli there is a bunch of options to pass. To generate a new component without tests, you can simply add --spec=false like so:

ng generate component --spec=false my-component

There is also an option in the angular-cli.json for which types you want to enable specs by default, where you can modify the behaviour:

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

Not working in angular cli version 11 – Snowbases Jun 23 '23 at 10:19 — Snowbases, Jun 23 '23 at 10:19

Zub · Answer 6 · 2019-02-15T22:04:54.743

11

For angular 6+ Simply run this command:

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

OR

just add this in your angular.json file and you're good to go

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

NOTE: before pasting this check for conflicts, hope it helps

edited Feb 15 '19 at 22:04

answered Oct 02 '18 at 19:33

Zub

808
3
12
23

1

Updated my angular.json as per above in my Angular 7.4 project and all good. – Neville Feb 14 '19 at 13:27

moeabdol · Answer 7 · 2017-12-10T20:39:55.147

5

In recent Angular versions you can configure the cli generator to disable the creation of spec file for components and services in angular-cli.json as follows:

"defaults": {
    "component": { "spec": false },
    "service": { "spec": false },
    ...
}

You can add extra lines to disable specs also for guards and classes and so on.

edited Dec 10 '17 at 20:39

answered Dec 10 '17 at 19:12

moeabdol

4,779
6
44
43

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Lazar Ljubenović Dec 10 '17 at 19:41
I added extra explanation to the answer. Thanks. – moeabdol Dec 10 '17 at 20:41

score 5 · Answer 8 · answered May 02 '18 at 14:10

5

simply try this one. this is working

ng g c component_name --spec false

answered May 02 '18 at 14:10

Ragulan

1,677
17
24

Ahmed Essawy · Answer 9 · 2018-09-28T14:31:38.430

4

There is a command for disabling Angular generate "spec" files by default

ng set defaults.class.spec=false
ng set defaults.component.spec=false

UPDATE: For Angular 6

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

edited Sep 28 '18 at 14:31

answered Jan 16 '18 at 15:39

Ahmed Essawy

326
4
13

1

Deprecated in angular 6 – Debojyoti Jul 11 '18 at 10:12

Ian Samz · Answer 10 · 2018-11-27T13:38:44.180

4

Simply create Component with this simple command in Angular 7

ng g c component-name --spec false

or if really dont want to include it in any component simply update angular.json

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

edited Nov 27 '18 at 13:38

answered Nov 27 '18 at 13:23

Ian Samz

1,743
20
20

gaborp · Answer 11 · 2020-02-20T05:44:32.940

3

For Angular 8: ng generate component mycomponent --skipTests=false

edited Feb 20 '20 at 05:44

answered Mar 26 '19 at 15:00

gaborp

604
5
16

score 3 · Answer 12 · edited Aug 07 '22 at 19:28

3

from angular version 11, use the below command

ng generate component "path/componentname" --skip-tests=true

or simply

ng g c "path/componentname" --skip-tests

edited Aug 07 '22 at 19:28

vimuth

5,064
33
79
116

answered Aug 02 '22 at 10:34

Amit Bhagat

61
7

score 2 · Answer 13 · edited Jun 14 '17 at 03:28

2

ng g c component-name --spec false

edited Jun 14 '17 at 03:28

Pang

9,564
146
81
122

answered Jun 14 '17 at 03:10

Anand Mohan

79
15

score 2 · Answer 14 · edited May 08 '20 at 05:51

2

here what it is for angular 9

ng g class models\user --skip-tests true

it will not generate spec.ts files.

edited May 08 '20 at 05:51

Sandeep Kumar

2,397
5
30
37

answered May 07 '20 at 15:08

ankit binjola

21
3

score 2 · Answer 15 · edited May 23 '20 at 06:27

2

--spec will no longer work. Use --skip-tests instead.

You will see all the options with following command:

ng g c --help

edited May 23 '20 at 06:27

Alex Gaynor

14,353
9
63
113

answered May 23 '20 at 01:38

Ditter Raquion

41
4

score 2 · Answer 16 · answered Jan 12 '22 at 10:57

For Angular 10+ - For a global setting for all your projects.

Go to angular.json file

In the "schematics" field add:

 "@schematics/angular:component": {
   "skipTests": true
 },

** It's possible also for services, guards, etc...

    "@schematics/angular:service": {
      "skipTests": true
    },
    "@schematics/angular:guard": {
      "skipTests": true
    }

score 1 · Answer 17 · answered Dec 06 '16 at 07:58

1

According to the fix #156 you can create a component without spec file by using

ng generate component my-comp --nospec

answered Dec 06 '16 at 07:58

LoïcR

4,940
1
34
50

score 1 · Answer 18 · answered Sep 30 '18 at 18:52

1

For angular 6 add this in angular.json inside "schematics":{} :

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

OR

as Franklin Pious sugested, run this command:

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

answered Sep 30 '18 at 18:52

Elron

1,235
1
13
26

score 1 · Answer 19 · answered May 25 '20 at 14:49

If you would like to skip spec file for specific component.

New version:

ng generate component "componentName" --skipTests

Example

ng generate component recipe-list --skipTests

Old version :

ng generate component "componentName" --spec false

Example

ng generate component recipe-list --spec false

score 1 · Answer 20 · answered Sep 09 '20 at 06:31

1

It is very easy to do. While creating the component add

--skipTests=true

ng generate component --skipTests=true componentName

Or

ng g c --skipTests=true componentName

answered Sep 09 '20 at 06:31

Nikhil Yadav

1,419
1
13
8

score 1 · Answer 21 · answered Nov 24 '20 at 09:28

1

For angular 8+ you just need to add

--skipTests=true

in the end

ng g c component-name --skipTests=true

g is abbreviated to generate. c is abbreviated to component

you can also use

ng generate component component-name --skipTests=true

answered Nov 24 '20 at 09:28

Subham Saraf

421
2
4
13

score 1 · Answer 22 · answered May 23 '21 at 09:33

1

Reply: Generating Component without spec.ts file in Angular 2+

ng g c ComponentName --skip-tests true

answered May 23 '21 at 09:33

Faisal Shahzad

11
1
1

1

Welcome to StackOverflow! This seems right, but too much like answers already given, so in the future you may wish to check for duplication. For instance, if the case of ComponentName needs to be exact, that is very good information. – aschultz May 24 '21 at 17:18

score 1 · Answer 23 · answered Jan 05 '22 at 11:46

in your project go into angular.json file and add spec - false in schematics feild

save and restart your project now you can create all component without spec file

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

Thusitha Bandara · Answer 24 · 2023-08-06T05:11:21.093

1

I'm using Angular 16

Generate Component without spec.ts file I have to use the following command.

ng g c component-name --skip-tests

You can use the CLI help to see the what are the available options

 ng g c --help

edited Aug 06 '23 at 05:11

answered Aug 06 '23 at 04:47

Thusitha Bandara

31
2

score 0 · Answer 25 · answered Sep 02 '19 at 18:27

0

You can use the following command when you create your component

ng g c component-name --spec false

answered Sep 02 '19 at 18:27

Abdulhakim Zeinu

3,333
1
30
37

score 0 · Answer 26 · answered Nov 11 '19 at 09:08

0

Use also the following command if you want to skip your spec.ts file:

ng g c try-it --skipTests=true

where

g c => generate component , try-it => component name , --skipTest=true => == -- spec false.

answered Nov 11 '19 at 09:08

Sergiu Siscovschi

1
1

Sivuyile Shasha · Answer 27 · 2020-05-01T13:21:34.127

Just adding this bit of information because I found myself struggling with the same issue and could not fix it by using the current answer(s), plus I did not want to make the changes on the angular-cli.json file. It appears the recent version of Angular CLI --spec=false is depreciated and therefore no longer works, use --skipTests instead.

Test on:

Angular CLI: 9.1.1
Node: 12.16.1
OS: win32 x64

Your command with then be: ng g c mycomponent --skipTests instead of ng g c mycomponent --spec=false

PS: Always test your commands using the --dry-run option to test your output.

Muhammad Ishtiaq Hussain · Answer 28 · 2020-07-22T00:56:57.640

When using:

Angular CLI: 10.0.3
Node: 12.16.3
Angular: 10.0.4

You have to use "--skip-tests true" when generating component. (Note: you can get the above version info by trying "ng v" or "ng -v" in the terminal).

You can get the complete list of switches for "ng g c (short for ng generate component)" using "ng g c --help".

Alternatively you can add a component manually. To do this, make a new folder by right clicking the /src/app folder of your project. After creating the folder, right click on it to add one or more files such as mycomp.component.html and mycomp.component.ts. Adding mycomp.component.ts is the minimum required list for a component, as you can add inline css and html to your .ts file.

Example:

import { Component } from '@angular/core';

@Component ({ selector: 'app-mycomp', template: '<p> Hello Angular </p>' })

export class MyComp {}

Import and Register MyComp in app.module.ts declarations list, and add it to app.component.html or some other template, using selector (<app-mycomp></app-mycomp>

Prasenjit Mahato · Answer 29 · 2020-09-20T07:54:16.027

0

Angular < 8 $ ng g component component-name --spec=false

Angular > 8 $ ng g component component-name --skipTests=false --flat

   $ ng g component employee/listEmployees --skipTests=false --flat

edited Sep 20 '20 at 07:54

answered Aug 18 '20 at 16:00

Prasenjit Mahato

1,174
15
10

score 0 · Answer 30 · answered Apr 10 '21 at 09:21

It's worked for me for angular 11

ng g c posts/new-component --module app --skip-tests

Note:

name of component should be like this : new-component or newComponent.

generate for specific follder : dir/new-component

add new-component to the app.module.ts : --module app

use just --skip-tests in command for generating Component without spec.ts file

score 0 · Answer 31 · answered Jul 15 '23 at 04:07

0

And now in Angular 16 according to the Angular official documentation, it is:

ng g c [component name] --skip-tests=true

answered Jul 15 '23 at 04:07

Mostafa islami

56
2
9

Boppi · Answer 32 · 2023-08-22T06:13:27.270

0

command prompt:

D:\Angular\project 1>ng config schematics.@schematics/angular:component.skipTests true

angular.json:

in angular.json file we can add the below line then (___.component.spec.ts) this files never generates when we creating.

"schematics": { "@schematics/angular:component": { "skipTests": true } },

edited Aug 22 '23 at 06:13

answered Aug 22 '23 at 06:12

Boppi

1
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '23 at 08:14

score -2 · Answer 33 · answered Apr 25 '20 at 18:45

-2

For Angular 9 you can use

ng g c "componentName" --spec=false

to generate component without spec file

answered Apr 25 '20 at 18:45

Hemant Pandey

1

Generating Component without spec.ts file in Angular 2+

33 Answers33

Latest Angular 9 Compatible

CLI Command

Modifying `angular.json` to avoid using above CLI command always

When using:

Example:

command prompt:

angular.json:

Linked

Generating Component without spec.ts file in Angular 2+

33 Answers33

Latest Angular 9 Compatible

CLI Command

Modifying angular.json to avoid using above CLI command always

When using:

Example:

command prompt:

angular.json:

Linked

Modifying `angular.json` to avoid using above CLI command always