Login/Register
Generating Component without spec.ts file in Angular 2+
Asked Answered
Solved angularangular-cliangular-componentsangular-schematics
D

33

130

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.

Danged answered 6/12, 2016 at 7:47 Comment(3)
When you create a new component with Angular CLI? – Cattan
yes exactly when we generate component from Angular cli. – Danged
Angular 7/8 CLI its --skipTests=true|false – Watering
C
298

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
Constitutional answered 6/12, 2016 at 7:57 Comment(7)
@Pierre - What about if I dont want folder too – Yawl
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 } } – Owing
Option spec is deprecated: Use skipTests instead – Catboat
Is there any way to stop generating this spec.ts file for the whole project ? – Eugeniaeugenics
@Eugeniaeugenics isn't that covered in the beginning of my answer? – Constitutional
@PoulKruijt Ah yeah I can understand now ; changing the angular.json file, Thank you. Is this way valid for angular-cli 13 ? – Eugeniaeugenics
Don't forget @schematics/angular:service if you want to skip it for services too. – Parkinson
G
19

For Angular 6

ng config schematics.@schematics/angular.component.spec false
Glycol answered 23/6, 2018 at 12:9 Comment(0)
V
13

For Angular 7 and higher this will work : 

ng generate component componentname --skipTests

or ng generate component componentname --skipTests=true

Vagrom answered 19/6, 2019 at 20:14 Comment(0)
C
13

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

Catania answered 14/6, 2020 at 10:33 Comment(3)
The s should be capital here. Small s creates inline styles (no external scss file). ng generate component your-component-name -S=true – Zaratite
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. – Buschi
Actually, I meant "unknown option" not "unknown comment" – Buschi
A
11

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
  }
}
Archive answered 6/12, 2016 at 7:57 Comment(1)
Not working in angular cli version 11 – Greave
S
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

Starveling answered 2/10, 2018 at 19:33 Comment(1)
Updated my angular.json as per above in my Angular 7.4 project and all good. – Crashaw
C
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.

Centigram answered 10/12, 2017 at 19:12 Comment(2)
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. – Legendary
I added extra explanation to the answer. Thanks. – Centigram
A
5

simply try this one. this is working 

ng g c component_name --spec false
Absonant answered 2/5, 2018 at 14:10 Comment(0)
O
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

Owing answered 16/1, 2018 at 15:39 Comment(1)
Deprecated in angular 6 – Callisto
A
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
  }
}
Alcott answered 27/11, 2018 at 13:23 Comment(0)
M
3

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

Mello answered 26/3, 2019 at 15:0 Comment(0)
H
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
Helicon answered 2/8, 2022 at 10:34 Comment(0)
B
2
ng g c component-name --spec false
Bifoliate answered 14/6, 2017 at 3:10 Comment(0)
P
2

here what it is for angular 9 

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

it will not generate spec.ts files.

Polynices answered 7/5, 2020 at 15:8 Comment(0)
C
2

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

You will see all the options with following command:

ng g c --help
Crupper answered 23/5, 2020 at 1:38 Comment(0)
B
2

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
    }
Buckles answered 12/1, 2022 at 10:57 Comment(0)
M
1

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

ng generate component my-comp --nospec
Mismanage answered 6/12, 2016 at 7:58 Comment(0)
B
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
Blond answered 30/9, 2018 at 18:52 Comment(0)
C
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
Cotangent answered 25/5, 2020 at 14:49 Comment(0)
W
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
Wallinga answered 9/9, 2020 at 6:31 Comment(0)
S
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
Subaxillary answered 24/11, 2020 at 9:28 Comment(0)
B
1

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

ng g c ComponentName --skip-tests true

Belak answered 23/5, 2021 at 9:33 Comment(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. – Stinkweed
C
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
                }
            },
Calibrate answered 5/1, 2022 at 11:46 Comment(0)
B
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
Bernete answered 6/8, 2023 at 4:47 Comment(0)
T
0

You can use the following command when you create your component

ng g c component-name --spec false
Timm answered 2/9, 2019 at 18:27 Comment(0)
P
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.

Passant answered 11/11, 2019 at 9:8 Comment(0)
K
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.

Ko answered 1/5, 2020 at 13:10 Comment(0)
S
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>

Sambar answered 22/7, 2020 at 0:50 Comment(0)
B
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
Backbreaker answered 18/8, 2020 at 16:0 Comment(0)
A
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

Afflictive answered 10/4, 2021 at 9:21 Comment(0)
F
0

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

ng g c [component name] --skip-tests=true
Fusain answered 15/7, 2023 at 4:7 Comment(0)
I
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 } },

Integrate answered 22/8, 2023 at 6:12 Comment(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. – Precipitation
L
-2

For Angular 9 you can use

ng g c "componentName" --spec=false

to generate component without spec file

Legislative answered 25/4, 2020 at 18:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.