How To Start A Project In Angular 2+



Angular 2
or newer (now Angular 5) is still fresh to scene, meaning that it has no official development environment. We will use Visual Studio Code from Microsoft in our examples since it is free and has good support for Angular and typescript. You will find quite a few command line tools out there to help you work with Angular 2 or later. One of them is called Angular CLI (Angular Command Line Interface). Strange name but a great tool. It is a part of official bundle and you can find link to it on our website.

1. I will now assume that you have already installed Angular and Angular CLI. So now the way forward is to choose a good name for your application, you can change it later, but it is better to choose good name at beginning. We will call ours MyFirstCodeBrainer but you can name it “Roses” if you want.


2. I suggest to you that you create folder for your Angular projects. I call mine Angular.


3. Now open Terminal (Mac, Linux) or Command Prompt/Power Shell for Windows and go to that folder. Within folder just use command:

ng new MyFirstCodeBrainer

   ● It will take a while for project to install, because Angular CLI will go and fetch all the newest libraries for you automatically. They are stored inside “node_modules”, you can check it for yourself, there are quite a few of them. You will get notification when the installation is done.


4. And this is it, we have created our project. Don’t forget to go to your folder, after project has been created. This is usually done with cd command:

cd MyFirstCodeBrainer


5. We can now run it with command:

npm start


6. You can check your app with every browser using URL

http://localhost:4200/ 




Which files will be most important for you in the beginning of your Angular Development:

1. index.html, this is “main” file and angular app a part of this file


2. App.module.ts, this is where we have declarations for our project, for example our components are listed here


3. App.component, this is our first component that is visible in our project. You will get to know this structure very well after few projects.



Let's create our first component

1. We will put our new component within src/app folder. Just go to that folder, first our project folder we will use

cd MyFirstCodeBrainer
cd src
cd app

   ● But you can also create subfolder for components. I do it a lot for more mature project it is just easier to handle more files with subfolders.


2. If you want to create a component you should use command:

ng g component mycomponent

   ● It will create 4 files for us html/css/ts/specs file. You can now use it inside app.component.html with tag:

<mycomponent></mycomponent>