How to set up Angular
In this post, we’re going to learn how to set up Angular from scratch using the CLI.
I’m an Angular person by trade. It was the first JavaScript-based framework I learned. Despite the massive jump that happened between Angular.js and Angular 2+, the idea behind Angular itself has changed the way we rapidly develop web applications.
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.
Part 1 – A Quick Dive Into How Things Fit Together In Angular
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 app.module.ts
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 app.module.ts
file.
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
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.
cd my-app-name-here
To run the application on localhost
, use the serve
command. The usual localhost is localhost:4200
.
ng serve
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:
appShell
, application
, class
, component
, directive
, enum
, guard
, interface
, library
, module
, pipe
, service
, serviceWorker
, universal
and webWorker
Example syntax:
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.
For example:
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.
Comments
0 comments