Angular8 Tutorial

Angular8 Tutorial

Angular community launched their latest version, known as Angular 8. If you're comfortable with Angular's previous version, it won't be hard for you. You can upgrade your Angular CLI to version 8 with simplicity.

What is Angular 8?

Angular 8 is a TypeScript-based client-side framework that is used to build interactive Web applications. Except for having some extensive features it is very similar to its previous versions.

• Time to time ( e.g. updating web applications for news updates)
• Location-to-location (e.g. web applications for weather reports)
• User-to-user (e.g., apps of the Gmail, Facebook)

New Features of Angular 8

The Angular community has released their latest version of Angular 8 with an impressive list of changes and improvements including the much awaited Ivy compiler as an opt-in feature.

Those are Angular 8's most prominent features:

• Angular 8 backs TypeScript 3.4
• Angular 8 helps Web Workers
• Ivy Rendering Engine is the latest compiler to Angular 8
• Angular 8 provides the lazy-loaded modules with complex imports.
• Improve ngUpgrade

TypeScript 3.4

Angular 8 supports TypeScript 3.4, and your Angular 8 project is required to run. So upgrade your version of TypeScript to 3.4.

Web workers class

JavaScript is a single thread so asynchronous occurrence is common for more critical tasks such as data calls. Web Workers facilitates the execution of intensive CPU computations in the background thread, freeing up the main thread to update the user interface.

If the application becomes unresponsive when processing data, web workers may also be helpful.

If you decide to outsource such a calculation to a background, we will first use the Angular CLI to build the Web worker.

ng generate worker n-queens 

More about Ivy and Bazel

The new rendering engine is Ivy, and the new build system is Bazel. With Angular 8 both are ready for proper use. The preview of these two is due to be available soon. Ivy is the new Angular compiler / runtime and Angular 8 is the first release to officially offer an opt-in switch to Ivy.

In Angular version 9 Ivy is supposed to be a default rendering engine.

Bazel offers one of Angular 8's newest features as a possibility to build your CLI application faster.

Bazel has the key benefits of:

• The construct and test gradual.
• It gives a chance to use the same method to build the backends and frontends.
• It has the choice of providing remote builds and cache on the building field.

Dynamic imports for lazy-loaded modules

Angular 8 encourages the usage of standard dynamic import syntax instead of a custom lazy-loaded module list.

It means lazy-loaded imports that sounded like:

{ path: '/stu', loadChildren: './stu/stu.module#StuModule' }  
Will be looked like this:


{ path: `/stu`, loadChildren: () => import(`./stu/stu.module`).then(s => s.StuModule) }

Improved Angular CLI Workflow

The Angular CLI is in constant improvement. The ng build, ng test and ng run now come with 3rd party libraries and tool. AngularFire, for instance, already uses these new capabilities with a deploy command.

Prerequisite for Angular 8 tutorial

• You must have version Node.js installed > 10. NPM should also be updated, since it is used by default. I am using version 12.4.0 of the Node here.
• MongoDB must have been installed on your system.

Workflow of Angular 8 Tutorial

One for the front end (in Angular) and another for the backend (in Node.js Express MongoDB). We'll even build a backend API that's used by frontend.

Here, we use the following technologies:

• Node: 12.4.0
• Angular CLI: 8.0.2
• NPM: v12.4.0
• MongoDB shell version v4.0.10
• MongoDB version v4.0.10
• Windows 10
• To check Node and Angular CLI version, use ng --version command.
• To check npm version, use node -v command.
• To check MongoDB version, use mongod --version command.
• To check MongoDB shell version, use mongo --version command.