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

Now you can access your application using this address:

177.77.164.97:4200

Show Comments (0)

Comments