Today we are going to learn how to use Angular CLI to bootstrap a simple Angular application. Angular CLI can make it very easy to create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.   Let’s learn how to get started with Angular & Angular CLI First make sure you have installed least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.   Then install Angular CLI globally using:

npm install -g @angular/cli

Generate your Project

Generating an project is very easy with Angular CLI

ng new my-app

go to your project folder and run the application using:

ng serve --open

you should see your Angular application start and will automatically open your browser on http://localhost:4200/.

Project File Structure

Angular project can be written with TypeScript which makes JavaScript coding much easier and fun.

Every code that you need to write will be placed under src folder. you can different folders for different components and Angular will compile everything under src folder, however it is best practice to place components under components folder.

Following table will give a brief description about each file / folder in your Angular 4 project.

File Purpose
app/app.component.{ts,html,css,spec.ts} Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test. It is the root component of what will become a tree of nested components as the application evolves.
app/app.module.ts Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.
assets/* A folder where you can put images and anything else to be copied wholesale when you build your application.
environments/* This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered.
favicon.ico Every site wants to look good on the bookmark bar. Get started with your very own Angular icon.
index.html The main HTML page that is served when someone visits your site. Most of the time you’ll never need to edit it. The CLI automatically adds all js and css files when building your app so you never need to add any <script> or <link> tags here manually.
main.ts The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application’s root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the--aot flag to the ng build and ng serve commands.
polyfills.ts Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. You should be pretty safe with core-js and zone.js, but be sure to check out the Browser Support guide for more information.
styles.css Your global styles go here. Most of the time you’ll want to have local styles in your components for easier maintenance, but styles that affect all of your app need to be in a central place.
test.ts This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it’s not something you’ll need to edit.
tsconfig.{app|spec}.json TypeScript compiler configuration for the Angular app (tsconfig.app.json) and for the unit tests (tsconfig.spec.json).