119

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.

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

30 Answers 30

283

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
7
  • @Pierre - What about if I dont want folder too Oct 15, 2017 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 } } Jan 16, 2018 at 15:41
  • 6
    Option spec is deprecated: Use skipTests instead Aug 20, 2019 at 9:46
  • Is there any way to stop generating this spec.ts file for the whole project ?
    – Damika
    Dec 28, 2021 at 19:01
  • @Damika isn't that covered in the beginning of my answer? Dec 28, 2021 at 19:28
19

For Angular 6

ng config schematics.@schematics/angular.component.spec false
0
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

1
  • 1
    Updated my angular.json as per above in my Angular 7.4 project and all good.
    – Neville
    Feb 14, 2019 at 13:27
11

For Angular 7 and higher this will work :

ng generate component componentname --skipTests

or ng generate component componentname --skipTests=true

11

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

3
  • 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, 2021 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, 2021 at 1:40
  • Actually, I meant "unknown option" not "unknown comment"
    – tshad
    Aug 19, 2021 at 1:46
10

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
  }
}
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.

2
  • 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. Dec 10, 2017 at 19:41
  • I added extra explanation to the answer. Thanks.
    – moeabdol
    Dec 10, 2017 at 20:41
5

simply try this one. this is working

ng g c component_name --spec false
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

1
  • 1
    Deprecated in angular 6
    – Debojyoti
    Jul 11, 2018 at 10:12
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
  }
}
3

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

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
2
ng g c component-name --spec false
2

here what it is for angular 9

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

it will not generate spec.ts files.

2

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

You will see all the options with following command:

ng g c --help
1

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

ng generate component my-comp --nospec
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
1

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
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
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
1

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

ng g c ComponentName --skip-tests true

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, 2021 at 17:18
1

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
                }
            },
1

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

  1. Go to angular.json file

  2. 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
    }
0

You can use the following command when you create your component

ng g c component-name --spec false
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.

0

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.

0

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>

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
0

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

-2

For Angular 9 you can use

ng g c "componentName" --spec=false

to generate component without spec file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.