Create Angular 4 Project In Five Minutes

With the CLI you can have a new webpack based project set up and running within minutes with almost zero manual configuration.

There are many ways to create Angular projects. Here we are doing it with Angular CLI

With the CLI you can have a new webpack based project set up and running within minutes with almost zero manual configuration.

Prerequisites

As per angular CLI team, you need node 6.9.0 or higher, together with npm 3 or higher to run the CLI and Angular project

Download CLI

Need to install CLI globally via NPM

npm install -g @angular/cli

Create Project

Once CLI is installed, you go the folder /drive , where you want to create new project. Use your favorite command line editor. Run the following command.

ng new PROJECT_NAME

Replace PROJECT_NAME with your desired project name (without spaces)

That is it. CLI will now generate all the project files and install required modules.

 

Run Project

 

Running the project is just as simple. Use the below command to serve up the local envionment

npm start

 OR

ng serve

As everything builds, your new angular app is visible at 

http://localhost:4200/

Ready to GO! 

 

Angular CLI provides many scaffold templates. You can give it try.  The most-used templates are below. it will create structure and files for you. You need to just work on your application logic.

 

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

 

Conclusion

1. Super quick and easy to configure Angular project with CLI.
2. Webpack, Protractor e2e testing, Karma/Jasmine testing setup automatically.
3. All dependencies modules installed automatically.
4. Centralized configuration via an Angular CLI config file
5. Easy CLI commands to create components, modules  

It is an ideal solution for beginners to play with Angluar.