Guide to Using Angular CLI

    Thursday, May 2, 202410 min read241 views
    Guide to Using Angular CLI

    Ever wondered about manually creating basic files required to run an Angular app? I mean, how difficult will it be for us to write those files one after one? It will consume a lot of time and won't be good for developers, as most of the time would be spent creating those files. Angular CLI is a potent command-line interface tool.

    Moving ahead, we are going to discuss everything you need to know :

    1. What is Angular CLI?

    2. How is Angular CLI used?
      2.1 Installation
      2.2 Various commands

    3. Pros of using Angular CLI

    4. Origin of CLI tools

    5. Advantages for developers using Angular CLI

    6. Need of Angular CLI

    7. Future scope

    8. Conclusion

    What is Angular CLI?

    Angular CLI is a Command Line Interface tool that allows them to initialize, develop, and maintain Angular apps straight from a command shell, instead of the developers having to do it by hand. Just with the help of some commands, a developer can generate various components, services, and also modules.

    Files such as 'angular.json', 'package.json', 'tsconfig.app.json', etc. which are considered the basic and important files to run an angular app, are created by the system itself with Angular CLI.

    In short, Angular Development can be made easy with the help of the Angular CLI tool. It will help you set up a basic angular project or even a huge angular web application.

    Angular CLI Version

    2017 saw the introduction of the first beta Angular CLI version. More than 450 variants have emerged since then. A new version of it is issued along with every upgrade to the Angular system. An Angular CLI 12 would also be available if you were using Angular 12.

    This does not mean that the version of your Angular project and the Angular CLI have to match. It doesn't the majority of the time. Other versions of the Angular CLI beyond the one included in your Angular project are acceptable.

    Installing Angular CLI Major versions follow the supported major version of Angular, but minor versions can be released separately.

    Prerequisites

    To understand Angular CLI, you need to be familiar with the technologies mentioned below

    • HTML  

    • CSS  

    • JavaScript 

    How is Angular CLI Used?

    Installation

    The javascript run-time environment i.e. Node.js & npm(node package manager) are the two essential things that should be installed in the O.S to create an Angular application. We need the npm package manager to install and maintain the third-party packages. Further, to install Angular CLI, we need to type the command “npm install -g @angular/cli” in the command shell.

    how is angular cli used

    Various Angular CLI Commands

    i) ng help

    This command, when typed, provides a list
    of various commands and provides the specific information of 
    each command.

    various angular cli commands

    ii) ng version

    This command, when typed, gives the
    information about the version of Angular CLI installed on your
    machine.

    ng version

    iii) ng new

    This command is used to create a new angular project. To do so, we have to type the command “ng new <project-name>”
    in the command shell.

    For example, if our current project name is firstAngularApp, then
    We have to type “ng new firstAngularApp” in the command
    shell.

    ng new

    iv) ng generate

    This command is used to make different features required for
    running an angular application. The command to generate such
    features is “ng g <feature> <feature-name>.

    The below table shows different features created along with their
    Description.

    ng generate

    v) ng serve

    This command, when typed in a command shell, runs our
    Application in either the workspace or development server mode. We can also start our app by
    running the command “ng s”. By default, the server will start
    running at port no. 4200.

    ng serve

    vi) ng update

    This command when typed in the command shell, performs an
    update to the current stable release of the original framework and
    Also of CLI by running the command
    ng update <package-name>”.

    The package name is very important here and after the
    package name, we can specify the options too. Some examples
    are –force, –from, –help, etc.

    It is recommended that a developer always update minor versions of the packages
    to their latest patch version, as it has the latest bug fixes.

    vii) ng build

    This command compiles the angular application and the
    the output directory of that compilation is placed in a folder called “dist”.
    The produced output path of the dist file is then used to run our application in
    production mode. Also, we can specify the options.

    ng build

    3. Pros of Using Angular CLI

    Time Management

    Angular CLI plays a very important role in reducing time for developers. Each
    time a developer creates a new component/module or even a service, angular
    creates all the files related to the feature and makes changes in our angular app
    without interfering with other files. This saves a lot of time for developers in the
    development of angular applications.

    Dynamic File Creation with Angular CLI is Easy

    Angular keeps track of files being added or removed during the development
    work of an application. For instance, if we have to create a new component, then
    there can be one way where we will use the Angular CLI command
    “ng g c <name>”.

    This command will automatically create 4 files which include
    the spec file, src folder, component file, CSS & template file, and add the component class
    name in the declaration field of the corresponding ngModule. The image for the how command creates the
    same is provided below. A lot of time is saved by developers here too.

    dynamic file creation

    Maintainance of the Folder Structure on its Own

    It is very important to maintain the folder structure of a project as it makes it easier
    for developers to fetch particular required files whenever they want.
    As mentioned earlier, angular keeps track of files that are being added or
    removed during the development of the application.

    So, during this process, the developer does not need to maintain the files if he/she makes some changes in
    the application. Angular CLI makes sure every performed action is detected &
    all the files that were supposed to be added/removed during that process are
    maintained in the project root folder structure as well as in the codes.

    Continuous Improvement

    A continuous improvement in the code files is what makes an application better
    and better. Even after running the application in production mode, we are still
    able to make changes to our own workspace directory or project folder, and after those changes, we can update the
    same in our angular application. By doing so, a continuous updation is
    established and hence we can improve our application from time to time.

    Auto-updation of Files

    After creating any component or any other features, there will be an update
    in the corresponding module and that particular component or feature will get
    imported to the root module and will get added to the declaration’s property of that root component or corresponding
    module.

    When we use Angular CLI, it helps in reading and writing the files which creates
    auto-updation file changes in those corresponding files and modules and this happens when
    we use Angular CLI instead of doing it manually.

    4. Origin of CLI Tools

    The Birth

    Command-line interfaces emerged in the mid-1960s, on the computer terminals. It was a user-friendly alternative to punched cards.

    Other Alternatives

    We can also use GUI (Graphical User Interface), a very user-friendly way to execute tasks. However, a GUI requires more system
    resources compared to a CLI (Command-line interface) to implement.

    5. Advantage for Developers Using Angular CLI

    No Need for Manual File Creation by the Developers

    Angular CLI has something like a code generator, which can
    create all features like components, services, modules, etc, required in
    an angular application. With this, developers need not generate the
    same files by themselves.

    Support for Testing

     There are tools in Angular CLI that can run unit tests, E2E(End-to-End)
    tests, etc. With this, a developer can ensure that the code is of high
    quality and bug-free.                                                                                                                                                         

    Good Integration with Other Tools

    Angular CLI integrates with various tools such as Git, and IDEs like
    Visual Studio Code, etc. It makes it easier to work with the Angular app code and ecosystem. Having such a good integration leads to better coordination within the team & writing efficient codes.

    Package Installation at One Click

    Angular CLI can install/uninstall third-party packages into and from the application, respectively. It saves a lot of code writing work by the developers.

    Saves Time and Effort

    Angular CLI sets us free from the redundant javascript code and helps us to focus more on the important things that are supposed to be built.

    6. Need for Angular CLI

    Working with Internal Files

    Suppose we try to create an Angular application without using Angular CLI. In that case, there is a huge possibility of encountering numerous compilation errors related to the undefined path, undefined classes, or missing decorators. It will be a mess to solve those errors. 

    Further, if we overcome this problem, the next big thing that is waiting for us is to write the boilerplate code after creating even a few project configurations for a single component, service, module, etc.

    For example, if we have to create a new component in our application, the first thing we should do is create a folder containing 4 files: component class files, spec files, templates, and CSS files. 

    Continuing it, we have to link the template file to our component class file. And at last, we have to provide the component class name in the declaration field and the configuration file of its corresponding ngModule.

    import { Component, OnInit } from '@angular/core';
    @Component({  
    	selector: 'app-first-component', 
    	templateUrl: './first-component.component.html',  
    	styleUrls: ['./first-component.component.css']
    })
    export class FirstComponentComponent implements OnInit { 
    	constructor() { }  
    	ngOnInit(): void {  
    	}
    }

    Code snippet displaying ’FirstComponentComponent’ component class

    As discussed above, there is a huge possibility of encountering basic errors during typing. This is a waste of time as a human mind can make mistakes while writing code. 

    We need some functionality that can carry out such typing tasks without producing any errors & delivering the required output, and here Angular CLI comes into the frame. Angular CLI creates required and generated files directly based on the given command, given to it, by itself.

    Working with External Files or Packages with Their Latest Versions

    While building an angular application, we may come across a point where we
    need to import some third-party libraries or packages. After importing such
    packages, some functions of those packages might not work or might be
    Deprecated. In this situation, we need to update those packages or even
    download the old version of it. Manually doing it is very time-consuming even
    Though we know the correct version. 

    The Angular CLI command “ng update” will not only update the corresponding
    package to its updated version but also overwrite the version of it in the
    dependencies in the file package.json. So, using Angular CLI makes it very
    efficient in handling those package versions.

    Management of Packages

    Angular CLI takes care of processes like installation and uninstallation of
    third-party packages. This results in a reduction of manual effort from
    the developers who were required to maintain the dependencies

    7. Future Scope

    The developers working with Angular, choose the Angular CLI tool as it is the easiest
    way to build and maintain Angular applications directly. That is the reason why this tool has a great future
    scope. Restricting some of its cons, the overall tool positively provides the best services for
    the developers.

    8. Conclusion

    Roadmap

    Within this journey, we have discussed the installation process, various Angular
    CLI commands, and the uncountable pros of using Angular CLI. Getting from the initial app and
    dynamic file creation to the maintenance of folder and project directory structures, including continuous improvement and very smooth integration with other tools, Angular
    CLI has emerged as an important feature in the modern development of Angular.

    Is there a need for Angular CLI?

    Angular CLI has become a powerful and necessary tool for developers who
    are building angular applications. This leads to easier development, resulting in a better overall efficiency enhancement. The time and effort
    are reduced for creating manual tasks by automating the creation of the same file by providing a set of convenient commands.

    24
    Share
    Hire Offshore Angular Developers
    Hire Offshore Angular Developers
    Onboard a team of developers within 2 days and initiate your project today. Make an appointment with our CEO if you need help.
    Hire Now

    Related articles

    This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.