3 Most Often Used Commands in Angular CLI

As a developer using Angular CLI (Command Line Interface), you have a powerful tool to build and manage your Angular applications.

‍

As you start building apps, you may realise that you repeatedly use some of the commands in your workflow.

‍

Here are the three most used commands in Angular CLI that you should master to make your development process smoother:

ng new - Create a New Angular Project

The ng new command is the starting block for Angular developers.

‍

It creates a new Angular project with all the necessary configuration and code files. The command sets up a new workspace and an initial application.

‍

This makes it easier for you to start coding without worrying about configuration and setup.

‍

To create a new Angular project, type this in your Angular CLI:

ng new project-name

‍

When you run 'ng new', Angular CLI asks you several questions to customize the setup. It inquires if you want to add routing and which stylesheet format to use.

‍

You also have a couple of options for extended commands:

‍

• --routing: Adds routing support to the application.
• --style: Specifies the stylesheet format.

‍

For example, to use SCSS, run:

ng new project-name --style=scss

ng generate - Generate Angular Components, Services, and more

Creating new components, services, or modules is a common task in Angular development.

‍

The 'ng generate' command (or 'ng g') simplifies this process. It generates the necessary files and updates the project with new references and declarations as needed.

‍

To create a new Angular component, type this in your Angular CLI:

ng generate component component-name

‍

Creating a new Angular service is similar - type this:

ng g service service-name

‍

And finally, to create a new module, use this code:

ng g module modules/my-module

‍

This command ensures consistency of file structure and code formatting, adhering to the Angular style guide.

ng serve - Start the Development Server

To test and preview your Angular application locally, use 'ng serve'.

‍

It compiles the application and launches the development server. The command opens the application in a browser and watches for changes to the source files. 

‍

It rebuilds and reloads the browser in real time as you make changes in the code. This instant updating gives you a sense of control and responsiveness - you see right away if your code works.

‍

To start the development server, use this command:

ng serve -o

‍

Here too you also have a couple of options for extended commands:

‍

• '--open' or '-o': Automatically opens your browser to http://localhost:4200/, as in the example above.
• '--port': Specifies a server port different from the default 4200.

Conclusion

These three commands—'ng new', 'ng generate', and 'ng serve'—are foundational to Angular CLI operations.

‍

They help developers rapidly develop and manage Angular applications. 

‍

By mastering these commands, you can significantly enhance your productivity and efficiency in building full stack Angular applications.