Custom Angular Project setup guide
In this article, I’m going to provide you with easy to follow generic Angular project setup. Moreover, this article is meant to give confidence to those who...
In this article, I’m going to provide you with easy to follow generic Angular project setup. Moreover, this article is meant to give confidence to those who are afraid of using the command line tool.
In case you do not fear command line, I’ll provide you with handy boilerplate for most Angular projects.
Open the command line tool and install Angular CLI globally.
$ npm install -g @angular/cli
“-g” flag – this indicates where to install your Angular CLI. For windows users, it’s usually here: C:\Users\ [YOUR-USER-NAME] \AppData\Roaming\npm\node_modules.
Navigate to the folder where you’d like your project setup click SHIFT + right mouse button, then click “Open Powershell window here“. Depending on your windows version it may say “Open command window here“.
You may navigate using the command line tool
$ cd path\to\project // e.g. D:\program files\myprojects
Once you navigated with command line tool to your desired path, run the following commands:
Generate project files
$ ng new my-best-project
$ cd my-dream-app
$ ng serve
If you’re experiencing port issues, run this command instead:
$ ng serve --port 8888
In this case, I’m setting the port number to 8888, but you can change to any other 4 digit number.
There are a few options that I think are useful to add to the custom angular project setup. You can find full command list here.
When generating new projects it can be useful to add few tweaks:
Now we create a new project as follows:
$ ng new my-best-project --prefix betterPrefix
To make sure your new application works well with mobile devices you will need a way to test it locally. I’m using this command line to enable access from my network:
$ ng serve --host 0.0.0.0 --disable-host-check
Now you can access your application using this address: