Create an Angular application

Photo by Daniel McCullough on Unsplash

Introduction

This post is a first of a series aiming to show how to build an angular application from scratch.
We will see how to scaffold an enterprise-scale angular application with all the assets needed to easily develop and maintain it.

This first post doesn't dive deep into how git, node nor angular-cli works. It paraphrases their documentations and gather the informationinto one post. For more informations about them, refer to their documentations.

Getting Started

Start by creating a new angular workspace and application using git & angular-cli.

Install Git

Follow the instruction here.

Install Nodejs and Npm

Install Nodejs and Npm here.

You can find a lot of great article on dev.to to help you install Nodejs and Npm if you have any trouble with the official documentation.

Install NVM (Linux only, sorry not sorry :p)

NVM helps you install and change the node version used according to the directory/project you are working in.

To install or update nvm, you should run the install script. To do that, you may either download and run the script manually, or use the following cURL or Wget command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

or

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

To use it :

nvm install 10 # only install a version once
nvm use 10 # nvm use 8, adapt on the project your work

Install the latest Angular CLI

Install the Angular CLI globally.
To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @angular/cli

Create a workspace and initial application

You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:
Run the CLI command ng new and provide the application name (ie. ng-shadow), as shown here:

ng new ng-shadow

The ng new command prompts you for information about features to include in the initial app. Accept the defaults (except for stylesheet by chosing SCSS) by pressing the Enter or Return key.
The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
The CLI creates a new workspace and a simple Welcome app, ready to run.

Run the application

The Angular CLI includes a server, so that you can easily build and serve your app locally.
Go to the workspace folder (ie. ng-shadow).
Launch the server by using the CLI command ng serve, with the --open option.

cd ng-shadow
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.