In this post, we’re going to learn how to set up Angular from scratch using the CLI.
Here is a quick guide on how to set up Angular. This is also the second part of a series aimed at helping you become a solid Angular developer from the ground up.
All the posts so far in the series: #AngularMasterySeries.
Out of the box, Angular has a CLI that will set the basic barebones scaffold for you.
The main difference between Angular and other libraries like React and jQuery is that Angular is a framework. This means that it is a collection of libraries that are bundled together.
These libraries are configured in a way that enables them to work as seamlessly as possible through the Angular structure.
Here is a diagram to help you visualize the structure.
There is a central entryway that boots up everything in the app. If you use the CLI, this central file is called the
If you want to access a library, service or directive, it gets declared in the
app.module.ts and then called through an import where it’s needed.
In a typical case, you have a component + view structure – where your logic, service calls and everything else happens in the component and the view renders whatever you end up seeing.
This is the structure that the CLI will generate by default.
What is the CLI?
The Angular CLI is a console that you can install via npm and use it to generate various parts of an Angular app – or the entire Angular app itself.
This means less work from scratch and more time to work on the actual app. It provides you with a standardized boilerplate, meaning you can know what to expect when you move from project to project.
Life as a developer becomes a lot easier when you know what to expect and have a general idea on where things are.
Angular CLI stands for Angular Command Line Interface and does most of the manual heavy lifting for you.
For example, when you add a new component via the CLI, it also automatically adds an import module to the
It’s good to note that when you generate a service via the CLI, it doesn’t add it to the
app.module.ts file like it does with components.
This is because since Angular 6+ (May 3, 2018), Angular’s recommends a singleton service approach. This is to do with coding and architecture patterns, which is beyond the scope of this post (but more on that later in this series).
How to generate your first app
Generating your first barebones scaffold app with Angular CLI is fairly simple.
First, you install the Angular CLI via
npm using the following command:
npm install -g @angular/cli
Then you create a new app using the command
ng new my-app-name-here
This will create a new folder that houses your app. To start it up, navigate your command line over and into the folder.
To run the application on
localhost, use the
serve command. The usual localhost is
And that’s basically it! You now have your first ever Angular app up and running.
To create a production-ready build, use
ng build and the CLI will bundle and tree-shake everything up for you. You can technically use the current files as it is but it’s not very size efficient and not configured for a live environment.
Notes on ng generate
When you use
ng generate, followed by the thing, it creates the necessary files with the correct starting syntax.
Here is a list of things you can use
ng generate with:
ng generate component your-component-name-here
For the shorthand version, you can use
ng g. If you want to add the component to a specific folder or create a folder for it, simply start the component name with where you want the component to be generated in.
ng generate component yourFolder/your-component-name
Thank you for reading
Thank you for reading. To help me out (and keep me motivated to write more), please like/share/comment if you’ve found this piece useful.
Part 3 – Understanding @Component in Angular
Alternatively, you can also find all the posts so far in the series through the tag #AngularMasterySeries.