Angular CLI

Angular: The Full Gamut Edition

Charlie Greenman
April 25, 2021
4 min read

The code created in this chapter are examples only and is not part of the Razroo Employee Dashboard we'll be building. You can still follow along, but just take note that we'll start the creation of the Razroo Employee Dashboard in the next chapter.

The Command Line Interface - or commonly known as the Angular CLI - is "responsible for automating away many of the challenges and headaches that come with being a developer in 2017. By starting with a configuration that works out of the box, baking in best practices that have been discovered by the community over time, and by helping you build more maintainable code, the CLI exposes some of the most powerful capabilities of Angular in a way that is easier to get started, and easier to get moving quickly when compared to rolling everything together yourself."

Here are some commonly used CLI actions that can help speed up your workflow:

  • Create an application out of the box: ng new dream-app-name-here
  • Generate a module: ng generate module module-name
  • Generate a component: ng generate component component-name
  • Generate a route: ng generate route route-name
  • Generate a service: ng generate service service-name
  • Serve application: ng serve
  • Test application: ng test
  • Lint application: ng lint

Here's a quick starter tutorial on how to use Angular CLI for a brand new sandbox project. Start by installing Angular CLI using the following command:

npm install -g @angular/cli

Inside the directory that you want to generate your application, run the following:

ng new pixelIllustrator --service-worker

Using the CLI will help save us time by generating all the necessary minimum files and folder structures required to create a robust Angular application. The above commands will generate the following folders with files as illustrated below: [^2]

[system [e2e ] [Node Modules ] [src [app] [assets] [environments] ] [tests ] ]

Ng New Notable Mentions

End to End Integration

Created for us is an e2e folder. We will be using this for integration tests.

Linting

A tslint.json has been created. We can add linting rules that we so choose here,and run linting using ng lint

App folder

Inside of the src folder, a folder has been created for styling, components, modules, and unit testing. When you want to add a feature, component, or any kind of code, you add it to this file directory.

Assets Folder

Any images, fonts, additional non-code asset go in this folder. When you use the CLI to build for production, the CLI will automatically transfer your assets over with the correct filepaths.

Hold on - It's not going to be that easy

The Angular CLI is fantastic. It's removed a tremendous amount of effort to bootstrap a project in to existence. It sets up your TypeScript, Observables, routing, and styling. But there's more to Angular than these things.

However, Angular CLI won't code your actual app for you. The purpose is to expose and present to you the most powerful parts of Angular - but it isn't the full package. Here are some things that are important but excluded from Angular CLI:

  • State Management
  • Sass(The CLI will give us the option to do so)
  • Workspace(Creating a mono repo using Nrwl Nx)
  • Library(Also going to be created using Nrwl Nx)

We'll revisit the CLI again shortly when we begin building our application. But before we get there, lets talk about Nrwl Nx and set up our workspace.

Subscribe to the Razroo Angular Newsletter!

Razroo takes pride in it's Angular newsletter, and we really pour heart and soul into it. Pass along your e-mail to recieve it in the mail. Our commitment, is to keep you up to date with the latest in Angular, so you don't have to.

More articles similar to this

footer

Razroo is committed towards contributing to open source. Take the pledge towards open source by tweeting, #itaketherazroopledge to @_Razroo on twitter. One of our associates will get back to you and set you up with an open source project to work on.