We'll be using the Angular CLI to start our project. It handles a lot of the setup for us like:
- Setting up a transpiler (TypeScript)
- Processing Sass
- Scaffolding our application with best practices
- Loading ES6 modules (webpack)
Installing the Angular CLI
Table of Contents
We'll start by installing the CLI:
npm install -g @angular/cli
Notice we are using the
-g flag to install this globally on our system. Now we should be able to run
ng -v to see what version we are running:
Starting Our Project
With the Angular CLI, we can start a project using the following:
ng new my-angular-site
Now we have a full Angular application ready to build with. You can see the folder structure and the files that get generated for us:
We'll mainly be working inside the
src folder. The
.angular-cli.json is the file that tells our CLI how to run.
Serving Our Project
We can start this Angular app by using the
ng serve command:
We can see this app in our browser now at http://localhost:4200
Starting a Minimal Angular CLI Project
While that first setup is great for large production ready applications, it can be a little daunting when we only want to make a test site to get some experience with Angular.
Let's use the --minimal flag to create a barebones app. This will remove the tests (
spec.ts files) and make our folder structure simpler by inlining the template and styles instead of creating separate files for them.
Delete that first project we created and recreate it with the minimal flag.
ng new --minimal my-angular-site
Notice how the folder structure is much cleaner:
Adding Routing and Using Sass for Styles
Let's use the CLI to handle more for us. We want to eventually route our application so that our single page app can navigate between pages. We also want to use Sass because it will make writing our CSS easier.
Delete that project one last time and create a new one with the
--routing flag and also the
ng new --minimal --routing --style=scss my-angular-site
Now we are given a routing file at
src/app/app-routing.module.ts and also our
.css files are now