How to create your first Angular 6 application in less than 5 minutes

4 min readNov 22, 2018

Get the ball rolling with a simple Angular 6 web application running locally on your machine in less than 5 minutes.

Introduction

This is going to be the start of a series of blog posts explaining how to configure Azure B2C authentication into an Angular 6 application.

If you don’t know what Azure B2C is don’t worry. I’ll be explaining it all later on in the series. For now, If you want to learn how to create a simple Angular 6 application in less that 5 minutes keep reading.

Wait wait wait… Have you got NODE installed?

If you don’t know what node is and haven’t got it installed on your machine then you’re not gonna get far.

So…

This is node

This is how you install node for mac

If you can’t be bothered reading those articles then in short run the following commands (one after the another) to install Homebrew and node on your machine

Sorry to all non mac users. This section assumes you are on a Mac. The Windows alternative for Homebrew is Chocolatey. Documentation can be found here.

First command (this installs homebrew onto your machine):

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Second command (this uses homebrew to install node onto your machine):

brew install node

ok… now we are good to go.

Step 1: Install the Angular CLI

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To install the CLI using npm (node package manager), open a terminal/console window and enter the following command:

npm install -g @angular/cli

This will prompt you for information about features to include in the initial app project, for example:

Would you like to add Angular routing? (Y/N) : Y
Which stylesheet format would you like to use?: CSS

Accept the defaults by pressing the Enter or Return key.

Step 2: Create a workspace and initial application

Change directory to somewhere where you want your app to live. Then run the CLI command ng new in the same terminal and provide a name for your application e.g.b2c-basic-app, as shown here:

ng new b2c-basic-app

note: this has now created an application named ‘b2c-basic-app’ in whichever directory you ran the command. The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

The initial app that gets created is a very simple project that contains a ‘Welcome application’ which is ready to run.

Step 3: Serve your application locally

Angular includes a server, so that you can easily build and serve your app. In order to get your app up and running follow the steps provided:

Change directory into the workspace folder (b2c-basic-app).
Launch the server by running the CLI command ng serve --open

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

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

You should now be able to see a lovely jubbly Angular 6 application running locally on your machine. Easy peasy lemon squeezy.

Optional Step 4: Adding a login and sign up button to your application

I’m going to add two buttons to the application. One to allow users to login and one for allowing users to sign up.

Open up the app.component.html file which can be found under /app

Paste the following code into the app.component.ts file

app.component.html

2. Now you need to link up the login and signup methods in the .html file to your .ts file. Open up the app.component.ts file and replace with the following code:

app.component.ts

Notice how I have added two methods login() and signup(). Both methods trigger a simple alert message to the user.

Now you should be able to load up your application and click both buttons. Each of which triggering the methods above. Don’t worry we will add the authentication magic in later on in the series. For now an alert popup will do.

Your application should look like this sexy beast: