In this first app let’s not write any code here and just see how to structure folders and look around the things first. It’s more like setup thing than to write some code.
After installing Angular CLI via node, we can create our folder structure so easily. Just in case you missed on how to install angular cli check out my previous post.
Once you are ready with the initial angular 2 setup, we can create the angular folder structure with the following commands.
> ng new first-app
This should create the folder structure of our first angular 2 app along with the node modules required for our app.
*Note: The command can take a while as it has to download the packages from npm. Wait until the control is returned back. DO NOT CLOSE/CANCEL.
Once that is done you can see your app folder structure in the directory you ran the above command.
If you don’t wish to check out the folder structure and just interested only in running the app you can just enter the following commands again.
> cd first-app
once you are in your app folder just run it with the following command
> ng serve
The above command compiles all the ts(Typescript) files in the folder and if it successful, it will provide the url to run the app. The above command may sometimes launch the nodejs firewall blocker popup, just allow it.
Once the compilation is successful, you should be able to see the following window
As pointed in the above screenshot, run the app in localhost:4200 and you should see the app up and running.
Let’s examine the folder structure now.
e2e: End to end testing folder for angular
node_modules: node modules, this contains all the libraries required to build angular app. Like angular core modules, http modules, forms modules etc
src: This folder is where we write our angular code
The rest of the files are for configuration of project.