Hello, angular developers! In this article I am going to discuss and walk you through step by step how to get Angular 2 up and run it on your system in the developer mode using two different ways.
There are several different ways to get Angular 2 ready to go, but now I’ll pay much attention to the two most comfortable ways, because they are very important to learn and help to understand how things work at the fundamental level.
As a matter of fact, Angular 2 is a framework developed and maintained by Google. This framework is suitable for mobile and desktop apps.
Installing Angular 2 with the help of Angular Client
To start with, the first way that I will show you is how to run Angular 2 through the Angular Client. In a nutshell, the Angular Client allows you to start new projects as well as generate components, routes services and pipes. It also allows you to serve your application and test it.
So, if we go over to cli.angular.io, we can see the Get Started page. Click on it and it will redirect you to the GitHub page.
First, for the prerequisites, you have to make sure that you have Node 4 or higher installed along with NPM 3 or higher.
So, what you are going to do now is to focus on installation. We can go ahead and create a new project by utilizing the Angular Client. The very default starting point is, of course, ng and then the command new and your project name.
This step has created the project folder and, as you can see, we have source, app.component.css or app.component.html, the module, the main TS. The creation of the components may take a little bit of time, so you have to wait.
In addition, one of the great things about just running that single ng new command is the fact that it also will simulate or run the NPM start after it. So, if we open it up in the source code editor, we’ll see that we already have the node modules started. All we have to do is to type in ng serve which was the equivalent here to the NPM start command.
Then we need to head on over to the URL localhost:4200 and there we go – app works! After it, it will be looking for changes and it will refresh for us once we make these changes.
Installing Angular 2 using cloning Quickstart with Git
The first thing we need to do is to go to the angular.io and find the Quickstart page, whick you can access from simply clicking Get Started. You’ll notice just under the Overview such sentence as “You can also clone the entire Quickstart application from GitHub”. Click on the hyperlink and it will redirect you to the GitHub.
To start with, you need to use Git Bash. Open it and write the command git clone https:/github.com/angular/quickstart project name and then hit enter. This should go by pretty quickly.
Now, we can CD into that project name. Then open this up in Visual Studio Code, select folder and we’ll just note a few differences based on the default structure that the QuickStart guide showed us in creating the initial app structure.
We have the app folder called app.component.ts. We can also notice that we don’t have the GS file because we haven’t yet run the npm installed, which would be the next step. Instead you can see the index.html and few other files. The spec file there is for testing.
The next step is to go ahead and run npm install. You’ll see that it’s basically the same process which can also take some time.
When it is done, you can see that we have our Node_modules folder. Then you have to type in npm start.
Go to the URL localhost:3000 and see that your app is launched!
Conclusion
To sum everything up, the Angular Client has a great advantage that it can speed up the development workflow because you can use the generate command to automatically generate routes, components and pipes, so that we don’t have to manually import all of these different commands into other files. Running Angular 2 with cloning QuickStart is also a fast way to do it.
I hope that these two methods will help you with your app installation. Choose the best one for yourself and enjoy the flexible and incredible development environment with Angular 2.