Angular Command-Line Interface

The Angular CLI is a powerful tool for Angular developers that provides code generation, code linting, build tooling, and ahead-of-time compilation.

Code Generation

After a community has converged on best practices, the majority of code we write is going to be driven by convention. This results in our components and services all starting to look the same. The Angular CLI allows us to bypass a lot of boilerplate code by providing code generators that we can use to generate scaffolding of the code required to build our application, as shown in Figure 3-1.

Figure 3-1. Code generation is provided by the Angular CLI.

In a matter of seconds, we can generate components, services, modules, interfaces, and more with a few simple commands. More important, because the CLI (and not a human) is generating the code it is not only faster, but also less prone to error. We have personally seen developers generate full-featured, nontrivial applications in a matter of minutes.

Schematics

The immediate and obvious benefit of the CLI is the ability to generate code for the most common features of an Angular application. The long game, however, is to allow developers to define custom code generators, known as schematics, to solve context- or domain-specific problems. For instance, suppose that your organization has an existing convention that was derived in part from your business domain. You could create a custom schematic that generates projects, components, services, and so on that are custom-tailored to your organization.

Further, schematics enable deterministic source-code changes. This provides enterprises and organizations with the power to perform widespread code changes to existing projects and repositories with a logical and structured approach. Enforcing best practices and architecture is another benefit of creating schematics for large enterprises with several teams working across the globe. Schematics enable multiple teams to take advantage of the power of the Angular CLI to generate and modify code that is consistent with an organization’s agreed-upon best practices.

Although using a monorepo approach to building multiple applications and sharing code throughout an organization is well suited for many enterprises, some business and legal restrictions can force projects and code to be separated into multiple repositories.

The cost savings within a single team alone are significant when you begin to add up the obvious and corollary benefits and are compounded for enterprises with multiple teams.

Nx: Extensible Dev Tools for Monorepos

Angular truly recognized its potential as a platform with the introduction of Nx from the folks at Nrwl. Nx is a set of schematics built on top of the Angular CLI and created around the concept of a monorepo along with additional utilities for building out large-scale applications. Using this approach, multiple applications holistically share code within a single Git repository.

This is not to be confused with code colocation. Rather, applications are assembled from small modules and libraries that are highly reusable. Further, applications can use any framework, including Angular or React for web applications, Ionic or NativeScript for hybrid mobile applications, or Nest for Node.js applications. Nx truly enables enterprises to scale their development teams in a single monorepo. Enterprise companies around the world use Nx to standardize how their web applications are built, tested, and maintained in a monorepo.

Angular Console

The Angular CLI, with or without Nx, is a CLI and, as such, is used in the terminal. For some developers, this is totally fine and natural, but to remove any barriers to entry, Nrwl released the Angular Console, which allows developers to capture all of the power of the Angular CLI and Nx in a convenient desktop application, as depicted in Figure 3-2.

Figure 3-2. The Angular Console is a graphical user interface.

With an easy-to-use wizard-style interface, a developer can generate, manage, and build a fully working application.

Tight IDE Integration

Enterprise developers have a level of expectation that has been set by powerful, full-featured integrated development environments (IDEs) like Visual Studio, Visual Studio Code, WebStorm, and IntelliJ. Visual Studio Code is an open source and widely used IDE from Microsoft that supports TypeScript and is available on any platform, including macOS, Windows, and Linux. Using these IDEs, developers can achieve a high level of velocity because the IDE intelligently works behind the scenes to perform repetitive and mundane tasks. The workflow that has long been available to enterprise developers is often taken for granted until, painfully, it no longer exists. Most of the modern conveniences that come with a mature developer workflow have not existed in JavaScript until recently.

Code Hinting

The biggest problem with JavaScript is found in the language’s inability to infer usable information from the code. JavaScript lacked helpful structural mechanisms such as classes as well as a means to describe code, such as types. With the advent of ES6 and TypeScript, we can now structure our code in a way that provides meaning and context as well as describe our code with types to express intent.

This allows IDEs to intelligently and accurately introspect our work and give us helpful cues along the way about what we are working with, as illustrated in Figure 3-3. For instance, if we have a property that has been appropriately typed to an interface, when we instantiate an object, our IDE can reference the interface and inform us as to what to expect. Another example is that if our class implements an interface, our IDE can compare that class to the interface and signal whether we have successfully implemented the code contract.

Figure 3-3. The Angular Language Service and TypeScript provide code hinting (sometimes referred to as IntelliSense) in your IDE of choice.

By using TypeScript, we are able to communicate quite a bit to our IDEs, but to communicate Angular-specific information in our templates, the Angular team released the Angular Language Service to provide completions, errors, hints, and navigation in our components and templates.

Well-Defined Style Guide

In the infancy of AngularJS, there was no real consensus as to how to build a large-scale application. In truth, most developers had yet to be given the opportunity to even venture into the territory of building an enterprise initiative on the JavaScript platform. It was through a significant period of pain and suffering that the community began to converge on the best practices for constructing an AngularJS application. Learning from these mistakes, the Angular team created official style guides, shown in Figure 3-4, to provide a baseline for the best approaches to building applications.

Figure 3-4. Angular’s style guide provides agreed-upon consistency for teams and organizations to follow.

The style guides are an official collaboration between the Angular team and the development community. This means that the ideas presented in the style guide have been vetted by thousands of developers who use the framework, just like us. These established conventions have even been absorbed into the Angular CLI so that every project generated from the CLI has the same familiar shape and conventions.

Free Development Servers and Test Runners

When using the Angular CLI, an Angular CLI–generated project ships with a local development server as well as a unit and end-to-end test runners. These tools are critical for local development. Any developer will attest that developing locally is preferred, primarily because of the speed at which the developer can write, test, and iterate. Angular understands this need and provides the tools necessary for development teams to move fast.

Unit Testing

Code quality is one of the most predominant factors relevant to the discussion of software economics and the impact it has on a company. More than a few companies have been completely destroyed by the presence of an unfortunate bug that set off a chain of circumstances from which they could not recover. Ultimately, the question is: “How do we know that something works?” The answer “It hasn’t broken” is not a valid one because there will always be something unforeseen and lurking around the corner. We cannot guarantee that software will never break, but we can certainly hedge our bets by thoroughly testing our code.

The most difficult part about writing unit tests is often just getting set up to write that first test. An Angular CLI–generated project comes preconfigured with the popular Karma test runner right out of the box (Figure 3-5). Not only does the test runner automatically work, but the code generator will also generate a SPEC file containing the Jasmine setup necessary to test the feature that you are generating. Not having to worry about the implementation details makes for an almost barrier-free entry into feature testing, which, ultimately, produces a higher-quality project.

Figure 3-5. Execute unit tests and end-to-end tests by using the Angular CLI.

Powerful Build Options

During development, a developer wants to catch as many bugs as possible and, more important, fix them. This requires source code to be readable and logically traversable. For this to occur, source code is generally not optimized and is generated with source maps that add in extra overhead.

In production, we do not have these same concerns and generally want to remove any code that can slow down the application such as console logs, comments, and unnecessary files. Using advanced tree-shaking techniques, the Angular CLI even removes code within files that is not referenced in the production build of our application, resulting in reduced bundle sizes and smaller downloads. The Angular CLI allows us to switch from a development build to a production build seamlessly with a single command. The code generated from a production build is highly optimized for speed and load time. If we need to troubleshoot a production build, we can incrementally start to add code back in (such as source maps) to make our job easier.

Summary

The tooling provided by Angular enables software development teams to focus on what they do best: build software that propels an organization. Angular development teams are provided with all the tooling necessary to do just that, and to not spend time and money scaffolding code, organizing a project, and setting up a local development environment and a build system. Angular provides the tooling to create applications, develop and maintain reliable and performant applications, and build and deploy applications that scale.