Custom Angular Project setup guide

mksolemn
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 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.

Installing Angular CLI

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. Setting up a new Angular Project A. Quick setup Running command line in a project folder 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“. Or You may navigate using the command line tool $ cd path\to\project
// e.g. D:\program files\myprojects


Running Project Setup

Once you navigated with command line tool to your desired path, run the following commands:

Generate project files

$ng new my-best-project  Navigate to the project folder $ cd my-dream-app


Run a local server on your machine
$ng serve  Lastly, go to the following link to view your project: localhost:4200 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.

B. Customized project setup

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:

• –prefix betterPrefix – adds a custom component prefix, instead of “app“;

Now we create a new project as follows:

$ng new my-best-project --prefix betterPrefix  Accessing your website on a local network 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


Next, you’ll need to find your local ip address. You can do it by opening a command window and typing:
 \$ ipconfig
Next, find “IPv4 Address” and there you’ll find something like this: 177.77.164.97