Getting started with Angular 16

Here is a summary of what we are going to do.

• Installation of necessary tools
  
  Node.js will be our javascript development platform.
  No choice, without Node.js it won't work.
  
  Visual studio Code will be our code editor.
  The choice is totally arbitrary but for a Microsoft tool it's a little marvel
  
  Git will be our software manager..
  You will be able to use the source code of this tutorial
  
  Angular CLI will be our handyman.
  The best known and most used tool of the Angular Framework.
  ​​​​​​​
• Project initialization
  We will use Angular CLI for setting up the project architecture,
  using the best practices recommended by Google.
   
• Project Update
  Check used dependencies and update them.
  ​​​​​​​
• Perform the Tests
  Unit tests and the tools dedicated to them Karma and Jasmine.
  Linting and improving code with ESLint.
   
• Environment
  In version 15 the Angular team no longer integrates environment settings.
  Very useful we will see how to declare and use them.
   
• Deployment
  How to deploy your application on the internet.
  ​​​​​​​
• Source code
  The complete project code is available on Github.

​​​​​​​The summary in pictures of what we are going to do

​​​​​​​If you are in a hurry, below is a summary , otherwise go to the next step.

We are going to do things seriously but we are not going to take ourselves seriously.
​​​​​​​So let's go for a little humor and a lot of technique.

If you don't install it, Angular won't work.

In this regard Angular, React and Vuejs all three need Node.js.

The official website is here https://nodejs.org/fr/

This is what he tells us:
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Its inventor Ryan Lienhart Dahl created it on May 27, 2009.
He had a specific idea in mind: the simplicity and speed of execution of programs written in javascript .

The choice of name is therefore not trivial.

• Node means knot
• JS stands for javascript

Node.js is thus the central point which will make it possible to execute programs written in javascript on the server side.

Node.js uses an npm tool (Node Package Manager)
Npm simplifies the life of the developer by allowing to publish and share Node.js libraries.
Npm notably makes it possible to simplify the installation, update or uninstallation of these libraries.

We can talk about libraries, packages or dependencies.

How to install it?

On the official site the download is accessible at the address https://nodejs.org/fr/download/

We will be using the LTS ( Long Term Support) version.
LTS means that the publisher generally guarantees us a maintenance period of at least two years,

• Node.js version 18.17.1 LTS
• npm (node package manager) version 9.8.1

This is a typical installation.

• Choose your operating system.
• Download the program and run it.

Once the installation is complete, we can verify that Node.js is installed on our workstation.

We will check that Node.js is working and that it allows you to run a javascript program.

Let's go to Wikipedia https://fr.wikipedia.org/wiki/Node.js
Let's test the example program "a Hello Word" that he offers us.

Create an index.js file with a code editor (notepad will do).
Copy the following sample code

All that remains is to carry out the tests

Visual Studio Code is the editor used in most Angular conferences.
It is notably used by John Papa one of the best Angular lecturers and author of the Angular guides
https://github.com/johnpapa/angular-styleguide

In the rest of the tutorial we will therefore use Visual Studio Code .
VS code is a code editor developed by Microsoft for Windows, Linux and OS X.

Let's proceed with the installation.

The official website is here

• https://code.visualstudio.com/

We will be using the latest version 1.78.1 download here

• https://code.visualstudio.com/updates/v1_81

Installation is as easy as Node.js.

You choose your operating system, download the program and run it.

The Visual Studio Code icon will allow us to launch VS Code.
What we will do in the Initialization with Angular CLI part

Writing a Web Application is like writing a book.
As time passes, the number of pages increases.
From a few hundred you can go to thousands of pages.
The number of modifications becomes considerable and to navigate it is not an easy task.

To manage this problem, tools have been developed.
These are the version management software (or VCS in English, for version control system).

The best known is Git . It was created by Linus Torval the creator of Linux.

It will allow us to manage our source code and its different versions.
And above all to be able to share this source code, thus making it possible to work with several people.

Git will also allow you to use and test the source code of this tutorial.

Let's go to the installation.

The official website is at the following address https://git-scm.com/

Installation can be accessed here https://git-scm.com/download/win

Download the app then run it.

To check that Git is installed on your workstation, just run a command line.

Angular CLI stands for Angular Command Line Interface.
But that's mostly it.

And you might as well use the most recent version.

• Angular version 16.2.4
• Angular CLI version 16.2.1

The latest versions of these tools are available below

• https://github.com/angular/angular/releases
• https://github.com/angular/angular-cli/releases

The installation procedure is detailed on the official Angular website https://angular.io/cli
The method is described on the official website page.

I will detail this one.

- If a previous version was installed on your computer, you can uninstall it with the following command

Angular CLI is a library (or package).
We will install it with npm the node.js manager

You can install a specific version of angular or install the latest available by default.

Angular CLI is a tool for initializing, developing and maintaining Angular applications.

The official site is here https://cli.angular.io/
And if you want to have the list of Angular CLI commands https://github.com/angular/angular-cli/wiki

To go faster, I'll give you an essential summary.

Angular CLI offers us a number of commands.
These commands save us from performing repetitive tasks.

The first command we are going to use is ng new or ng n

• She will create our application.
• It will generate all the files needed for this application.
• It will obviously follow the best practices recommended by the Google team.

We choose the name of our application (arbitrarily it will be here angular-starter )
We type the command ng new with the corresponding parameters

- We generate the project ( this part takes a few minutes )

• For a simpler understanding we will manage routing and sass in another tutorial.
• Answer no for routing (default)
• Choose the CSS type (default value)

- We position ourselves in the project
- We execute the project

Which give

Angular CLI via ng serve command runs the project on a default port (4200).

It only remains to test the operation in a browser by launching the following url.

Launch VS Code .

Open a folder in the angular-starter directory we created during initialization.

Then open the package.json file.
This contains a number of commands (or scripts) that we will be using throughout this tutorial.

Open a VS Code console (select View/Terminal) to run the following scripts

• npm run start : Runs the application in development mode.
• npm run build : Compiles the application in the dist directory.
• npm run test : Runs unit tests using the Karma framework.

Note for those nostalgic for previous versions:
The ng eject command (allowing to generate the webpack configuration) has been disabled.
It has been removed since version 8.
Configuration Format Management Sample Project
https://github.com/manfredsteyer/ngx-build-plus

In development mode if we want to customize the port, we just have to modify the start script in the package.json file.
For example to use port 4201 the script would be the following "start": " ng serve --port 4201 "

We will leave port 4200 modifiable at will for the rest of the tutorial.

JavaScript libraries are constantly modified and updated by their designer.
When a new version is available it bears the name of release (release in English) and has a specific number.

If the library is open-source, you can see the latest versions available by going to the corresponding repository on Github and then going to Releases.

For example the different versions of Angular are accessible here
https://github.com/angular/angular/releases

The update schedule is here
https://angular.io/guide/releases#release-schedule

Your past, your present and your future.

Note that versions 2, 4, 5, 6, 7, 8, 9, 10, 11 and 12 are no longer supported.

And the danger is obviously that all these updates alter the functioning of our application.
In any case, we cannot escape it; one day or another we will have to try to integrate them into our projects.

I will explain to you how I personally proceed.

Let's use npm (Node Package Manager) the Node.js library manager.
Full documentation is here https://docs.npmjs.com/cli/outdated.html

npm allows us to check the versions of our libraries via the command

• npm outdated

This command checks the dependency registry to see if the installed packages are up to date.
It thus provides us with a list that we can control.

Noticed
Before checking the dependencies let's modify the package.json file
For each specified dependency remove the character ~ or ^
For example replace

• "rxjs": "~7.8.0",
• "tslib": "^2.3.0",

by

• "rxjs": "7.8.0",
• "tslib": "2.3.0",

To avoid possible errors, first delete the package-lock.json file and the node_modules directory.
Then reinstall the dependencies with npm install ( package-lock.json and node_modules are then recreated automatically).

You will understand why later in the paragraph it is time for the update.

If I update the package.json file I find myself faced with 3 scenarios

• 1/ It works
  It's not a party every day but since Angular 8 it's more and more often
• 2/ It doesn't work, we try to debug without spending too much time on it.
  It depends on your patience and the time you have in front of you
• 3/ It doesn't work and we wait.
  Often (but not always) Angular fixes your problem with the next update.
  Anyway, it's not worth waiting indefinitely, we will have to find a solution.
  Or we end up with AngularJS in 2022 and there we are not in trouble.

The ideal is to have an application prototype that contains enough functionality.
You can be pretty sure that the update will work on most of your apps.
Of course it won't spare you to optimize your CI/CD and take care of your tests.

In any case, here is a list of essential features for an application in my opinion.

• Routing
• Lazy Loading
• Bootstrap
• Httpclient
• TransferState
• SSR
• PWAs
• SEO
• Components
• Services
• Observables
• Guidelines
• Paging
• ScrollBox
• Charts
• Authentication (authentication/Route guard/Role guard/Jwt)
• Ngrx
• Reactive form / Temp Driven form
• Form Modal
• Internationalization
• Testing (unit and end-to-end)

The repository that I use for the moment as a prototype is the following.
https://github.com/ganatan/angular-app

For the example we will use this method on our angular-starter application.

The package.json file contains the various dependencies of your project.
Dependencies are, in a way, all the libraries that you have decided to use in your project.
They are managed by npm (node package manager) the Node.js dependency manager.

Regarding the dependencies and their version the npm documentation is as follows
https://docs.npmjs.com/files/package.json#dependencies

There are many version specifiers.

We can use for example

• version Must match version exactly
• ~version "Approximately equivalent to version"
• ^version “Compatible with version”

We will opt for the first " version " specifier, which is the simplest, the most explicit but also the most restrictive.

We will update the package.json file with the latest dependencies

- To check the dependencies to update run the command
npm outdated

- In some cases all dependencies can be updated except typescript

• Angular 16.0.0 accepts for example TypeScript >= 4.9.3 and <5.2.0
  You can check it after the update by running the npm run build script

- So in the case of Angular 16.0.0 all dependencies can be set except typescript.

- Delete package-lock.json file and node_modules directory
Edit the package.json file as follows then run the script
npm install

It is then sufficient to test all the scripts to verify that the updates have worked.

Creating a web application is like creating any object.
We create a car, a television or an airplane for example.
And before giving it to someone we will test its operation.

Computer scientists said to themselves that it should be simple and automatic.
As always, it's easier said than done.

Since these beginnings the computer world has sought to improve.
Several working methods have been adopted.
By simplifying we could say that we are there

V-Cycle method versus Agile method.

If you want to work in programming for sure you will have to be agile .
The most commonly used Agile method today is the Scrum method .

Below is a brief history of the last twenty years.

In November 2009 Mike Cohn described the test pyramid in his book
Succeeding with Agile: Software Development Using Scrum

With Angular we will focus on one category.

• Unit tests

Let's do an image overview of Angular's architecture to visualize the tests.

Without going into details, Angular simplifies our life with the following tools.

Unit tests use

• Karma
• Jasmine

End-to-end tests used

• Protractor

Note: Since Angular 12 end-to-end testing has been disabled.

​​​​​​​The Angular documentation concerning the notion of coverage is accessible at this address​​​​​​ ​​​​​​​​https://angular.io/guide/testing-code-coverage
​​​​​​​
I add in package.json an additional script to test the coverage
" coverage ": "ng test --no-watch --code-coverage",

To launch them, we use the corresponding scripts contained in the Package.json file.

Let's perform the simple modification and debugging test and the source code control test.

- Debugging .
Any modification leads to a recompilation of the code.

For example Edit the app.component.html file
<p>Changes: Here are some links to help you get started:</p>

The compilation is then executed automatically and the browser refreshes.

Noticed :
The favicon.ico file is incorrect. Remember to put a correct one.
In this example you can retrieve the one from this repository.

As a computer scientist we will try to simplify our lives.
Might as well have some help writing our code.

One of the tools used is linting which improves the quality of the code.

Angular used the TSLint tool accessible at this address https://palantir.github.io/tslint/

Noticed
This command has been disabled starting with Angular 12.
We are waiting for the next tool recommended by angular (probably ESLint?).

As the Google team has not decided, we will integrate ESLint into our project.

For this we will use Schematics which is an Angular code generator based on basic templates.

The ng lint command performs static analysis of TypeScript source code.
 

Schematics added a script in the package.json file (lint)
and created a .eslintrc.json file

To verify that our linter is working

Let's add specific rules in the .eslintrc.json file

To check the behavior of the linter.

Let's modify a file for example app.component.ts
And write code that doesn't match the rules

We test with the npm run lint script which will give an error

Unexpected var, use let or const instead no-var

The Angular team has decided to no longer automatically integrate environment settings.
Newer developers less prone to configuration issues did not use these settings.

The Angular documentation is accessible at this address https://angular.io/guide/build

The command is : ​​​​​​​ng generate environments
​​​​​​​
Very useful I add the elements necessary for this operation.

The steps to follow are as follows

• Create a src/environments directory
• Create an ​​​​​​​environment.development.ts
• Create an environment.prod.ts file
• Create an environment.ts file
• ​​​​​​Edit angular.json file

Everything we've done is nice.
But a web application is only of interest if we make it accessible on the web.
This is called deployment .
We are going to see how to do it via two methods from the simplest to the most complicated.

But first, let's talk about compiling .

As we saw earlier the package.json file contains a number of scripts (or commands).

The script we are interested in is npm run build
It allows us to compile our application.

This script executes the command from Angular CLI
ng Build

Without going into details here is how it works.
Via this command Angular uses the Webpack tool (a bundler module) to create the final product.

Running this command will create a dist directory.
This will contain what can be called the final product (or deliverable or artefact).

It is this part that we are going to deploy.

The advice given by Angular is at the following address
https://angular.io/guide/deployment

The simplest deployment is to use the Http server developed by John Papa.
How to proceed ?

• We install the lite-server library globally with npm
• We run the application in production mode

A more complex solution but closer to reality.
We will need to have a virtual server or VPS (Virtual private server).

I advise you to buy one from a VPS provider.
For example OVH or Digital Ocean are among the cheapest and most effective.

 

On our server (example of a server with ubuntu and the ip address 192.168.100.1)

• Install nginx
• Test nginx
• Copy our dist directory to /var/www/html
• Test the server

I add two files that will be useful to you

• an example of an nginx.conf configuration file
  ​​​​​​​
• an example of a javascript server.js file to launch your application locally
  For use with node server.js command
  The script is to be added in package.json

En suivant chacun des conseils que je vous ai donnés dans ce guide vous obtenez au final un code source Angular.
Ce code représente votre travail et doit faire l'objet de toute votre attention.

As we saw previously, Git will allow us to manage all our source codes.

A quick tour of Wikipedia https://en.wikipedia.org/wiki/GitHub tells us that
GitHub is the largest source code host in the world.

In June 2022 we count

• 83 million users
• Over 200 million repositories

I therefore advise you to publish your sources on this host.

The source code for this tutorial is of course available on GitHub.
Use git to grab this code and verify that it works.

Just go to the following address
https://github.com/ganatan/angular-react-starter

If you liked this guide and you go to GitHub to check out the code, feel free to hit STAR.

Otherwise, to go even faster, follow the following advice.

Use the classic prompt command under windows (cmd) or linux.
Then type the list of commands

This tutorial allowed us to create our first application.
This remains relatively simple.

If you want to create a more comprehensive application, you will need to implement some additional principles and features like

• Routing (management of several pages)
• Lazy loading (speed of the application)
• PWAs (operating on mobile and desktop)
• Server Side Rendering (allow SEO)

The next step is logically Routing management.
It requires a complete tutorial which is at the following address

• Step 2: Routing with Angular

The following steps will get you a prototype application.

• Step 3: Lazy loading with Angular
   
• Step 4: Bootstrap with Angular
   
• Step 5: Modules with Angular
   
• Step 6: Server Side Rendering with Angular
   
• Step 7: Progressive Web App with Angular
  ​​​​​​​
• Step 8: Search Engine Optimization with Angular
   
• Step 9: HttpClient with Angular
   
• Step 10: Transfer State with Angular
  ​​​​​​​​​​​​​​

​​​​​​​This last step provides an example of an application

• Create a complete web application with Angular

The source code of this final application is available on GitHub
https://github.com/ganatan/angular-app