Generating Component without spec.ts file in Angular 2+

AngularAngular CliAngular ComponentsAngular Schematics

Angular Problem Overview

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.

Angular Solutions

Solution 1 - Angular

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

Solution 2 - Angular

For Angular 6

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

Solution 3 - Angular

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

Solution 4 - Angular

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

Solution 5 - Angular

For Angular 7 and higher this will work :

ng generate component componentname --skipTests

or ng generate component componentname --skipTests=true

Solution 6 - Angular

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

Solution 7 - Angular

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.

Solution 8 - Angular

simply try this one. this is working

ng g c component_name --spec false

Solution 9 - Angular

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

Solution 10 - Angular

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

Solution 11 - Angular

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

Solution 12 - Angular

ng g c component-name --spec false

Solution 13 - Angular

here what it is for angular 9

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

it will not generate spec.ts files.

Solution 14 - Angular

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

You will see all the options with following command:

ng g c --help

Solution 15 - Angular

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

ng generate component my-comp --nospec

Solution 16 - Angular

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

Solution 17 - Angular

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

Solution 18 - Angular

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

Solution 19 - Angular

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

Solution 20 - Angular

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

ng g c ComponentName --skip-tests true

Solution 21 - Angular

You can use the following command when you create your component

ng g c component-name --spec false

Solution 22 - Angular

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.

Solution 23 - Angular

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.

Solution 24 - Angular

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>

Solution 25 - Angular

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

Solution 26 - Angular

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

Solution 27 - Angular

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

Solution 28 - Angular

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
    }

Solution 29 - Angular

> For Angular 9 you can use

ng g c "componentName" --spec=false

>to generate component without spec file

Categories
Recommended Angular Solutions
Recommended Angular Cli Solutions
Recommended Angular Components Solutions

Previous Solution:

error: package com.android.annotations does not exist

AndroidReact NativeAndroid StudioGradleAndroid Gradle-Plugin

Next Solution:

how to change a drawableLeft icon size on a button?

AndroidAndroid Drawable

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsaadeezView Question on Stackoverflow
Solution 1 - AngularPoul KruijtView Answer on Stackoverflow
Solution 2 - AngularFranklin PiousView Answer on Stackoverflow
Solution 3 - AngularZubView Answer on Stackoverflow
Solution 4 - AngularAndreas JägleView Answer on Stackoverflow
Solution 5 - AngularMasoud AfzaliView Answer on Stackoverflow
Solution 6 - AngularRICHARD ABRAHAMView Answer on Stackoverflow
Solution 7 - AngularmoeabdolView Answer on Stackoverflow
Solution 8 - AngularRagulanView Answer on Stackoverflow
Solution 9 - AngularAhmed EssawyView Answer on Stackoverflow
Solution 10 - AngularIan SamzView Answer on Stackoverflow
Solution 11 - AngulargaborpView Answer on Stackoverflow
Solution 12 - AngularAnand MohanView Answer on Stackoverflow
Solution 13 - Angularankit binjolaView Answer on Stackoverflow
Solution 14 - AngularDitter RaquionView Answer on Stackoverflow
Solution 15 - AngularLoïcRView Answer on Stackoverflow
Solution 16 - AngularElronView Answer on Stackoverflow
Solution 17 - AngularNandu HulsureView Answer on Stackoverflow
Solution 18 - AngularNikhil YadavView Answer on Stackoverflow
Solution 19 - AngularSubham SarafView Answer on Stackoverflow
Solution 20 - AngularFaisal ShahzadView Answer on Stackoverflow
Solution 21 - AngularAbdulhakim ZeinuView Answer on Stackoverflow
Solution 22 - AngularSergiu SiscovschiView Answer on Stackoverflow
Solution 23 - AngularSivView Answer on Stackoverflow
Solution 24 - AngularMuhammad Ishtiaq HussainView Answer on Stackoverflow
Solution 25 - AngularPrasenjit MahatoView Answer on Stackoverflow
Solution 26 - AngularMohammad Yaser AhmadiView Answer on Stackoverflow
Solution 27 - AngularKenil BarvaliyaView Answer on Stackoverflow
Solution 28 - AngularDor LeviView Answer on Stackoverflow
Solution 29 - AngularHemant PandeyView Answer on Stackoverflow