Home » Framework » Angular » Angular CLI commands ng new and ng generate with options

Angular CLI commands ng new and ng generate with options

There are several commands available in Angular CLI like ng add, ng new, ng generate, ng build, ng deploy, ng test, ng serve, etc. Here let us see the commands ng new and ng generate with all the options of Angular CLI.

We all know that Angular CLI is a command-line interface tool that helps to develop angular applications faster and easier. Angular CLI installation and create a new project are already explained in the last article. If you want to know that please take a look at Angular Development Environment with Angular CLI.

Note: All the examples explained here tested under the versions of Angular CLI 12.0.5, Node.js 14.17.1, and NPM 6.14.13

Now let's start to see all the commands of Angular CLI one by one.

ng new command of Angular CLI

ng new command creates and initializes the new angular projects. It creates the workspace (or) folder within that all the required configurations, source files, npm packages, and tests are created.

Let's test the command in the command prompt window. Before that, we have to know all the options available in the ng new command. The --help option lists all the available options of any commands like ng add, ng generate, ng build, etc.

If we want to work with any commands it's better to know all the options available for the command through the --help option. Let's run ng new --help in the command prompt window. It list's all the available options like --collection, --commit, --dry-run, --inline-template and etc

Here let us see the usage of some of the important options of ng new command.

CLI CommandOptions
ng new <name> [options] (or)
ng n <name> [options]
--dry-run (-d)
--skip-install
--skip-tests (-S)
--prefix (-p)
--inline-template (-t)
--inline-style (-s)

ng new first-app - It creates the angular application with the name of first-app. It asks two questions regarding routing and style sheet we can choose any option as we like. It takes some time to complete the process because it downloads all the npm packages through the internet while setting up the project.

F:\angular-projects>ng new first-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE first-app/angular.json (3057 bytes)
CREATE first-app/package.json (1071 bytes)
CREATE first-app/README.md (1054 bytes)
CREATE first-app/tsconfig.json (783 bytes)
CREATE first-app/.editorconfig (274 bytes)
CREATE first-app/.gitignore (604 bytes)
CREATE first-app/.browserslistrc (703 bytes)
CREATE first-app/karma.conf.js (1426 bytes)
CREATE first-app/tsconfig.app.json (287 bytes)
CREATE first-app/tsconfig.spec.json (333 bytes)
CREATE first-app/src/favicon.ico (948 bytes)
CREATE first-app/src/index.html (294 bytes)
CREATE first-app/src/main.ts (372 bytes)
CREATE first-app/src/polyfills.ts (2820 bytes)
CREATE first-app/src/styles.css (80 bytes)
CREATE first-app/src/test.ts (743 bytes)
CREATE first-app/src/assets/.gitkeep (0 bytes)
CREATE first-app/src/environments/environment.prod.ts (51 bytes)
CREATE first-app/src/environments/environment.ts (658 bytes)
CREATE first-app/src/app/app-routing.module.ts (245 bytes)
CREATE first-app/src/app/app.module.ts (393 bytes)
CREATE first-app/src/app/app.component.html (23809 bytes)
CREATE first-app/src/app/app.component.spec.ts (1066 bytes)
CREATE first-app/src/app/app.component.ts (213 bytes)
CREATE first-app/src/app/app.component.css (0 bytes)
√ Packages installed successfully.

The above files are created, and npm packages are also installed in the node_modules folder.

ng new first-app --dry-run (or) ng new first-app -d - This ng new command with dry run option only lists all the files to be created with the project but it doesn't create anything. So we can easily test what the particular command does the changes in the project through this --dry-run mode.

ng new first-app --skip-install - This ng new command with skip install option skips the npm packages to be installed in the project. If we want to set up the angular project quickly then we have to skip the npm packages to be installed. Later we can install the same by using npm install.

ng new first-app --skip-tests (or) ng new first-app -S - This ng new command with skip test option skips the spec files to be created in the project. Once you created the project with this option then it skips the spec files for further component creation and etc in the project.

Without --skip-tests there are four files created for the app component like below.

ng new projectName
ng new projectName

With --skip-tests there are three files created and spec files omitted like below

ng new projectName --skip-test
ng new projectName --skip-test

ng new first-app --prefix=tipstocdoe (or) ng new first-app -p=tipstocode - This ng new command with prefix option sets the prefix to the project as we like. Generally, the prefix should be the 'app' for the project but if we run this command then the prefix is replaced by "tipstocode"

We can verify the changes in three places of the project.

  1. In the angular.json file the prefix key replaces with "tipstocode".
  2. In the index.html file the line <app-root></app-root> is replaces with <tipstocode-root></tipstocode-root>.
  3. The selector: 'app-root' in @Component of every .ts files replaces with selector: 'tipstocode-root'

ng new first-app --inline-template (or) ng new first-app -t - This ng new command with inline template option creates the HTML template as inline in the component.ts file instead of creating a separate component.html file. Generally, when we create a component there are four files created like component.html, comonent.css, component.ts, and component.spec.ts.

This component.html is an external template that has the HTML code but this HTML external template comes as an inline template in the component.ts file when using the inline template option.

without an --inline-template option the component.ts file looks like below. Here templateUrl refers to the external HTML template app.component.html.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

with an --inline-template option the component.ts file looks like below. Here instead of referring to template URL it directly appends the HTML template as inline.

@Component({
  selector: 'app-root',
  template: `
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center" class="content">
      <h1>
        Welcome to {{title}}!
      </h1>
      <span style="display: block">{{ title }} app is running!</span>
   <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})

ng new first-app --inline-style (or) ng new first-app -s - This ng new command with inline style option creates the style as inline in the component.ts file instead of creating the separate component.css file. I think no need for example here. I hope you can test it at your end.

ng generate commands of Angular CLI

ng generate command generates or modifies the files based on the schematics.

CLI CommandSchematics (Mostly Used)Options
ng generate <schematic> [options]
(or)
ng g <schematic> [options]
class
component
directive
enum
guard
interface
module
pipe
service
--dry-run (-d)
--force (-f)

Now let us see all the schematics with ng generate command one-by-one.

Generate Class

The command for generating class into the project is below.

ng generate class <name> [options] (or) ng g class <name> [options]

ng generate class computer - This creates the class named computer under the root folder that is the app folder. Generally, it creates two files computer.ts and computer.spec.ts under the root folder.

if you want to create the class in a dedicated folder instead of a root (or) app folder then use the below command.

ng generate class devices\computer - This creates the class named computer under the devices folder, not the app folder.

Generate Class with Options

Generate ClassOptions
ng g class <name> [options]--skip-tests (-S)
--type

ng generate class computer --skip-test - This ng generate class with skip test option creates only the typescript file and omitted the spec file to be created. The type of --skip-test option is boolean and by default the value is false.

ng generate class computer --type=electronics - This command adds the type in the filename in the format of name.type.ts and name.type.spec.ts. In this example, it creates the class file named computer.electronics.ts and the spec file named computer.electronics.spec.ts.

Generate Component

The below command creates the component in the project.

ng generate component <name> [options] (or) ng g component <name> [options] (or) ng g c <name> [options]

ng g c student - This command creates the student component under the app folder and registers the component in the app.module.ts file (or) the corresponding module of the folder. There are four files created within the folder student that is below.

CREATE src/app/student/student.component.html (22 bytes)
CREATE src/app/student/student.component.spec.ts (633 bytes)
CREATE src/app/student/student.component.ts (279 bytes)
CREATE src/app/student/student.component.css (0 bytes)
UPDATE src/app/app.module.ts (479 bytes)

Generate Component with Options

Generate ComponentOptions
ng g component <name> [options]--export
--flat
--inline-style (-s)
--inline-template (-t)
--module (-m)
--prefix (-p)
--selector
--skip-import
--skip-selector
--skip-tests (-S)
--style
--type

ng g c student --export - This generate component command with export option creates the component and updates the app.module.ts file by declaring the component in the exports array. The type of --export option is boolean and by default the value is false. The declaration of NgModule exports is like below.

import { StudentComponent } from './student/student.component';
@NgModule({
  declarations: [
  ],
  imports: [
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [
    StudentComponent
  ]
})
export class AppModule { }

ng g c student --flat - This generate component command with flat option creates the component in the top level of the project I mean under the app folder. It doesn't create the component under the student folder. The type of --flat option is boolean and the default value is false.

ng g c school\student --flat - This command creates the component files under the school folder, not under the student folder.

ng g c student --inline-style - This command creates the student component without external style sheet student.component.css instead it creates the inline style in student.component.ts. The type of --inline-style option is boolean and the default value is false.

ng g c student --inline-template - This command creates the student component without external template student.component.html instead it creates the inline template in student.component.ts. The type of --inline-template option is boolean and the default value is false.

ng g c student --module=app.module.ts - This command creates the component and declaring the component in the declarations array of NgModule in app.module.ts. Actually, by default, the component will be declared in NgModule without this option --module. See the example below.

import { StudentComponent } from './student/student.component';
@NgModule({
  declarations: [
    StudentComponent,    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [    
  ]
})
export class AppModule { }

ng g c student --prefix=tipstocode - This command sets the prefix to the component selector in the component.ts file. Generally, the prefix sets like 'app-componentName' to the selector but in this example, it sets like 'tipstocode-student'. See the example below

@Component({
  selector: 'tipstocode-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})

ng g c student --selector=app-student - This command sets the HTML selector 'app-student' to use for this student component. See the example below.

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})

ng g c student --skip-import - This command skips to import the component in the module and just create the component files. It creates the four files HTML, TS, CSS, and spec but not updates them into the module.ts file. The type of this option is boolean and the default value is false.

Note: If you want to declare the component in the module then use this option --module=app.module.

ng g c student --skip-selector - This commands skips the selector to be created in component.ts file like below.

@Component({
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})

ng g c student --skip-tests - This command creates the component without spec file.

ng g c student --style=scss - This command creates the component with the specified format of the CSS file. whether it could be CSS, SCSS, SASS, LESS, or none. In this example, it creates the component with SCSS format of style sheet named student.component.scss.

Generate Service

Generate services are very similar to generate components and the CLI command for the same is below.

ng generate service <name> [options] (or) ng g service <name> [options]

Example: ng g service studentservice - This command creates the service under the app folder. Generally, it creates two files named studentservice.service.spec.ts and studentservice.service.ts.

Have you noted that? When creating components the files are created under the name of the component folder. But when creating services the files are created directly under the app folder. Now if you want to create the services under the dedicated folder then use the --flat option like below.

ng g service studentservice --flat=false

Generate Service with Options

Generate ServiceOptions
ng g service <name> [options]--flat
--skip-tests (-S)

The options are already tested with generating component. Here also it works like same. I hope you can test it at your end.

Generate Module

The below Angular CLI command generates the module into the project

ng generate module <name> [options] (or) ng g module <name> [options] (or) ng g m <name> [options]

Example: ng g m student - This command creates the module named StudentModule under the student folder.

Generate Module with Options

Generate ModuleOptions
ng g module <name> [options]--flat
--module
--route
--routing
--routing-scope

ng g m student --routing - This command creates the module named StudentModule under the student folder and creates the routing file named student-routing.module.ts under the student folder and imports the same in student.module.ts.

Generate Directive

The CLI command to generate a directive is below.

ng generate directive <name> [options] (or) ng g directive <name> [options]

Example: ng g directive student - This command creates the directive named StudentDirective under the app folder and imports the same in app.module.ts.

Generate Directive with Options

Generate DirectiveOptions
ng g directive <name> [options]--export
--flat
--module
--prefix
--selector
--skip-import
--skip-tests

All the options we tested with creating components. Please refer to the same.

Generate Pipe

The CLI command to generate pipe is below.

ng generate pipe <name> [options] (or) ng g pipe <name> [options]

Example: ng g pipe textmask - This command creates the text mask pipe named TextmaskPipe under the app folder and imports the same in app.module.ts. There are two files created like textmask.pipe.ts and textmask.pipe.spec.ts.

Generate Pipe with Options

Generate PipeOptions
ng g pipe <name> [options]--export
--flat
--module
--skip-import
--skip-tests

Generate guard

The CLI command to generate guard is like below.

ng generate guard <name> [options] (or) ng g guard <name> [options]

Example: ng g guard studentguard - This command creates the guard under the app folder. It asks the question while creating a guard like which interfaces would you like to implement? and the options are CanActivate, CanActivateChild, CanDeactivate, and CanLoad. We have to choose any option as we want. Let us see the details of the interfaces in the upcoming articles.

Generate guard with Options

Generate guardOptions
ng g guard <name> [options]--flat
--implements
--skip-tests

ng generate guard studentguard --implements=CanActivate - This implements option specifies which interfaces to implement with guard. The type of --implements option is an array.

Generate Interface

CLI comamnd - ng generate interface <name> <type> [options] (or) ng g interface <name> <type> [options]

Example: ng g interface icomputer computer - It creates the interface named Icomputer under the app folder and adds the type in the file name like icomputer.computer.ts.

Generate Interface with Options

Generate InterfaceOptions
ng g interface <name> <type> [options]--prefix

Generate Enum

CLI command - ng generate enum <name> [options] (or) ng g enum <name> [options]

Example: ng g enum computerType - It creates the enum named ComputerType under the app folder.

Generate Enum with Options

Generate enumOptions
ng g enum <name> [options]--type

I hope you understood the Angular CLI commands of ng new and ng generate with all the options. Thanks!. Keep Reading!.

Leave a Reply

Your email address will not be published. Required fields are marked *