Setting Up Your First Angular 2 Project
Setting Up Your First Angular 2 Project
In this post, we cover the basics of setting up a project in Angular, from installing the CLI to running the ng serve command.
Join the DZone community and get the full member experience.
Join For FreePrerequisites for an Angular 2 Project
1. Node 4.x.x or higher
2. Npm 3.x.x or higher
If you have already installed the above, verify that you are running at least node 4.x.x and npm 3.x.x or higher by running node -v and npm -v (check the version you are running) in a terminal/console window.
Setting Up a New Angular 2 Project
Step 1. Set Up the Development Environment
For building an Angular 2 project, you need to have the Angular CLI (command line interface).
The Angular 2 CLI makes it easy to create an application via the terminal.
Without the Angular CLI, you cannot create any component or service via the terminal.
Install the Angular-CLI globally.
npm install -g angular-cli
Step 2. Create a New Project
Open a terminal window.
Generate a new project and skeleton application by running the following commands:
ng new my_first_angular_app
This will create a skeleton Angular 2 application. You can check the default folder structure.
By default, it will have a styles.css file in which you can write your styles.
But if you want to create an Angular project using SASS, you need to run the following command:
ng new my_first_angular_app --style=scss
Step 3: Serve the Application
Go to the project directory and install node modules in your project directory. Then launch the server using the ng serve command.
cd my_first_angular_app
Once you are inside your project app folder, run the following code:
ng serve
The ng serve command launches the server, watches our files, and rebuilds the app as you make changes to the files.
Open a browser on http://localhost:4200/; the app greets us with a message:
Our app works!
I hope this helps!
If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}