Ivy: The Game Changer in Angular 9

Even though Angular 9 has some extraordinary updates like improved ng update, support for TypeScript, and inline rendering support for YouTube and Google Maps, the default Ivy compiler has grabbed the attention of developers worldwide with its unbeatable features.

In this blog, we’ll dive into some interesting topics about the Ivy compiler:

• Ivy: The next-generation compiler
• How Ivy will improve your application architecture
• A whole new way to build Ivy apps
• Stronger type-checking in templates with Ivy
• The phantom of the template error

#angular #developer

What is GEEK

Buddha Community

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Angular Sass: How To Use Sass In Angular 9 Tutorial

Angular supports Sass, CSS, and Less to style global application styles as well as component styles. Angular components styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles.

Angular Sass Example

Why use Angular Sass? Well!! Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you to use things like variables, nested rules, inline imports, and more. It also supports you to keep things organized and enables you to create style sheets faster.

In short,  Sass is a CSS preprocessor, which combines unique features such as variables, nested rules, and mixins (sometimes referred to as syntactic sugar) into regular CSS. The main object of Sass is to make the CSS coding process more comfortable and more efficient.

Sass is compatible with all versions of CSS. When working with the Angular CLI, the default stylesheets have the .css extension. We are using Angular CLI 8. So, if you have not used previously, then please upgrade your  CLI version. We will use the Bootstrap 4 Framework for this demo and see how we can configure the Sass in our Angular 9 application.

#angular #angular 9 #angular cli #css #angular sass

Game Development with .NET

We’ve launched a new Game Development with .NET section on our site. It’s designed for current .NET developers to explore all the choices available to them when developing games. It’s also designed for new developers trying to learn how to use .NET by making games. We’ve also launched a new game development Learn portal for .NET filled with tutorials, videos, and documentation provided by Microsoft and others in the .NET game development community. Finally, we launched a step-by-step Unity get-started tutorial that will get you started with Unity and writing C## scripts for it in no time. We are excited to show you what .NET has to offer to you when making games. .NET is also part of Microsoft Game Stack, a comprehensive suite of tools and services just for game development.

.NET for game developers

.NET is cross-platform. With .NET you can target over 25+ different platforms with a single code base. You can make games for, but not limited to, Windows, macOS, Linux, Android, iOS, Xbox, PlayStation, Nintendo, and mixed reality devices.

C## is the most popular programming language in game development. The wider .NET community is also big. There is no lack of expertise and support you can find from individuals and user groups, locally or online.

.NET does not just cover building your game. You can also use it to build your game’s website with ASP.NET, your mobile app using Xamarin, and even do remote rendering with Microsoft Azure. Your skills will transfer across the entire game development pipeline.

Available game engines

The first step to developing games in .NET is to choose a game engine. You can think of engines as the frameworks and tools you use for developing your game. There are many game engines that use .NET and they differ widely. Some of the engines are commercial and some are completely royalty free and open source. I am excited to see some of them planning to adopt .NET 5 soon. Just choose the engine that better works for you and your game. Would you like to read a blog post to help you learn about .NET game engines, and which one would be best for you?

#.net #.net core #azure #c# #game development #azure #cryengine #game developers #game development #game development with .net #game engines #games #monogame #playfab #stride #unity #visual studio #waveengine

Angular 9 CRUD by Example

Throughout this Angular 9 CRUD tutorial, we’ll be learning to implement CRUD operations by example using the latest Angular 9 version that has been released recently with Ivy support.

> ✋✋ Join our Facebook group 👈 to discuss anything related to Angular development.

We’ll make use of a CRUD REST API built using json-server which allows you to generate a full working REST API in no time.

What’s CRUD?

CRUD stands for Create, Read. Update and Delete — a set of operations often implemented in web apps to allow users to interact with a database.

In our tutorial, we’ll only focus on building the front-end using Angular 9, the back-end will be mocked using json-server.

We’ll not be learning how to use json-server but you can see the complete instructions from this tutorial after creating the Angular 9 project.

Angular 9 CRUD Tutorial Steps

• Step 1 — Mocking the Backend Using json-server
• Step 2 — Creating an Angular 9 Module
• Step 3 — Importing Angular HttpClientModule and FormsModule
• Step 4 — Creating Angular 9 Component(s)
• Step 5 — Adding Angular 9 Routing
• Step 6 — Creating an Angular 9 Service
• Step 7 — Creating a Model
• Step 8 — Implementing the CRUD Methods
• Step 9 — Calling the CRUD Methods

#angular #angular-9 #angular 9 crud

Major Features in the Angular 9 Ivy

(Yes, Angular Ivy version 9 is now released!)

Ivy is enabled by default

In previous versions of Angular, we had to opt-in to Ivy. In version 9, we instead have to opt-out of Ivy if we want to fall back to View Engine. This is possible in both versions 9 and 10 to ensure a smoother transition from View Engine to Ivy.

Libraries can be AOT-compiled, but this is not recommended. The Angular team has a View Engine-to-Ivy migration plan which recommends only publishing JIT-compiled View Engine-compatible libraries for Angular version 9. The Angular compatibility compiler will upgrade View Engine-compatible libraries to Ivy when installed in an Angular Ivy application project.

// tsconfig.json
{
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

// polyfills.ts
// Only used in multilingual Ivy applications
// import '@angular/localize/init';

Listing 1. Opting out of Ivy to fall back to View Engine.

If you experience problems with Ivy in your application or any of the libraries you depend on, you can opt out of Ivy and fall back to View Engine by clearing the enableIvy Angular compiler option and disabling @angular/localize as seen in Listing 1.

Opting out of Ivy in a server environment is a bit trickier. Follow the official guide to opt out of Ivy when using server-side rendering.

The principle of locality

To compile a component in View Engine, Angular needs information about all its declarable dependencies, their declarable dependencies, and so on. This means that Angular libraries cannot be AOT-compiled using View Engine.

To compile a component in Ivy, Angular only needs information about the component itself, except for the name and package name of its declarable dependencies. Most notably, Ivy doesn’t need metadata of any declarable dependencies to compile a component.

The principle of locality means that in general we will see faster build times.

Lazy-loaded components

entryComponents declarations are deprecated as they are no longer needed. Any Ivy component can be lazy loaded and dynamically rendered.

This means that we can now lazy load and render a component without routing or Angular modules. However, in practice we have to use component render modules or feature render modules to link a component’s template to its declarable dependencies.

Libraries that are only used by a lazy loaded component are even bundled in lazy-loaded chunks.

Improvements to differential loading

When differential loading was introduced in Angular version 8, the build process was run once for the ES5 bundle and once for the ES2015+ bundle.

In Angular version 9, an ES2015+ bundle is output first. That bundle is then transpiled to a separate ES5 bundle. This way, we don’t have to go through a full build process twice.

AOT compilation everywhere

AOT is enabled by default in builds, the development server and even in tests. Previously, AOT compilation was significantly slower than JIT compilation so JIT was used for development and testing. With the build and rebuild time improvements in Ivy, AOT-compilation now has a great developer experience.

When we used JIT compilation in some phases of our process and only AOT compilation in the final build, errors were detected only when doing production builds or worse, at runtime.

Bundle sizes

Ivy can enable smaller bundles because it uses the Ivy Instruction Set which is a set of tree-shakable runtime rendering instructions. Our bundles will only include the rendering instructions we use in our projects.

This is great for use cases such as microfrontends, Angular Elements and web apps where Angular is not controlling the entire document.

However, the difference in our bundle sizes between View Engine and Ivy will vary based on the size of our application and the 3rd party libraries we use. In general:

• Small and simple applications will see a considerable bundle size decrease.
• Complex applications will see an increase in the main bundle, but a decrease in lazy loaded bundle sizes.

This means a considerable combined bundle size decrease for big applications, but could mean an overall increase in bundle size for medium-sized applications. In both cases, the main bundle’s size will probably increase which is bad for the initial page load time.

Globalisation

Locales (number formatting, date formatting, and other regional settings) can be dynamically loaded at runtime instead of having to be registered at compile time.

// main.ts
import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

loadTranslations({
  '8374172394781134519': 'Hello, {$username}! Welcome to {$appName}.',
});

Listing 2. Dynamically loading translations.

As seen in Listing 2, translated texts can also be dynamically loaded at runtime instead of being part of our bundles.

The translated texts could be loaded from a database or a file.

Multiple languages from a single application bundle

To change language, we have to restart the application, but we don’t have to serve a different application bundle.

This means that we can — with some setup — support multiple languages with a single application bundle on a single hostname.

Compile time inlining

A localised application will now only be compiled once. Instead of multiple builds to produce a bundle per language, a bundle per language is produced by replacing $localize placeholders with translated texts.

We now need to add the package @angular/localize to support localisation (multiple languages). The good news is that we no longer have to include Angular’s localisation code in our bundles if we only have a single language.

If we don’t use localised templates, the i18n* Ivy instructions are tree shaked from our bundle.

Localisable texts in component models and services

// app.component.ts
@Component({
  template: '{{ title }}'
})
export class AppComponent {
  title = $localize`Welcome to MyApp`;
}

Listing 3. A translation text placeholder in a component model.

A new internationalisation feature is that we can also include placeholders for translated texts in our component models as seen in Listing 3. Previously, this was only possible in templates.

Additional provider scopes

We have always had Angular module scope for providers. Angular version 6 introduced the 'root' provider scope and tree-shakable providers both for root and Angular module scope providers.

Angular version 9 introduces the 'platform' and 'any' provider scopes. Platform-scoped providers can be shared between multiple Angular applications in the same document. The 'any' provider scope will share a provider per module injector. For example one service instance for the eagerly loaded main bundle and one service instance for each lazy loaded Angular module.

Improved developer experience

Ivy enables the Angular Language Service to support additional checks while developing. This is a big improvement to the developer experience.

File path checks

The Angular Language Service continuously verifies component stylesheet and template paths.

Template type checks

Templates are type checked, according to the template type checking mode as described in the “Strict mode” section. Member names and types are verified, even in embedded views. What previously resulted in runtime errors are now detected while developing and building.

New debugging API in development mode

ng.probe has been replaced with a new debugging API in development mode. The most notable functions are ng.applyChanges and ng.getComponent.

Strict mode

Strict workspace schematic

The ng new workspace schematic now supports the --strict flag which defaults to off (false).

ng new my-app --strict

When enabled, this parameter adds a few strict TypeScript compiler checks as seen in Listing 4.

// tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noFallthroughCasesInSwitch": true,
    "strictNullChecks": true
  }
}

Listing 4. TypeScript compiler options enabled in a strict Angular workspace.

Curiously enough, this doesn’t add the same options as if we would simply set "strict": true in the compilerOptions object. Let’s compare the Angular workspace strict option to the TypeScript compiler strict option.

Both have these options in common:

• noImplicitAny
• noImplicitThis
• strictNullChecks

The strict Angular workspace option additionally sets these options:

• noImplicitReturns
• noFallthroughCasesInSwitch

while the strict TypeScript compiler option additionally sets these options:

• alwaysStrict
• strictBindCallApply
• strictFunctionTypes
• strictPropertyInitialization

What’s more, the strict Angular workspace option doesn’t set template type checking to the new strict mode, only the previous full mode.

Strict template type checking

We have had the option to enable template type checking since Angular version 5 by setting "fullTemplateTypeCheck": true in the angularCompilerOptions object.

Ivy introduces strict template type checking as seen in Listing 5. When this new Angular compiler option is set, the value offullTemplateTypeCheck is ignored.

// tsconfig.json
{
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

Listing 5. Enable strict template type checking.

The strict template type checking verifies the types of property bindings and respects the strictNullChecks option. It also checks the types of template references to directives and components, including generic types. Template context variables’ types are also checked which is great for NgFor loops. The $event type is checked for event bindings and animations. Even the type of native DOM elements is verified with strict template type checking.

These extra checks can lead to errors and false positives under certain circumstance, for eaxmple when using libraries that are not compiled with strictNullChecks. To address this, strict template type checking has options to opt-out and tweak the checks. For example, strictTemplates is actually a shorthand for 8 different Angular compiler options.

Improved component and directive class inheritance

Selectorless base classes are now supported for directives and components. Some metadata is now inherited from base component and directive classes. This makes it easier to extend for example Angular Components and Angular Router directives.

Latest TypeScript versions

TypeScript versions 3.6 and 3.7 are supported in Angular version 9. Previous TypeScript versions are no longer supported. Refer to Table 1 to compare TypeScript compatibility between all Angular versions.

Table 1. Angular CLI, Angular, Node.js and TypeScript compatibility table. Open in new tab.

TypeScript version 3.6 introduces these and other features:

• Unicode support for identifiers in modern targets
• Improved developer experience for promises
• Stricter type checking of generators

TypeScript version 3.7 introduces these and other features that we can use with Angular version 9:

• Optional chaining operator (?.) similar to the safe navigation operator for Angular templates
• Nullish coalescing operator (??)
• Assertion functions (assert parameterName is typeName and asserts parameterName)
• Top-level await
• Improved recursive type aliases
• Improved developer experience for functions such as function truthy checks

Improved server-side rendering with Angular Universal

Angular Universal version 9 is released with a Node.js Express development server to provide a realistic environment during development.

Also part of this release is an Angular CLI builder to prerender static routes using guess-parser, inspired by angular-prerender. We can pass a routes file to prerender dynamic routes (routes with parameters).

How do I get started?

We can add Angular Universal using the command ng add @nguniversal/express-engine. We can then use the builder command ng run myapp:serve-ssr to start the server-side rendering development server with live reload. Similarly, we can use ng run myapp:prerender to detect static and dynamic routes and prerender them.

Improved styling experience

Styling in Angular Ivy has been reworked. Combining static HTML classes with NgStyle and NgClass directives is now fully supported and easier to reason about.

CSS Custom Properties support

As part of the Ivy styling rewrite, binding CSS Custom Properties is now supported.

An example binding looks like this:

<div [style.--my-var]="myProperty || 'any value'"></div>

CSS Custom Properties have scope, so this CSS property would be scoped to the component’s DOM.

Stable Bazel release as opt-in option

Bazel version 2.1 is an opt-in build automation tool for Angular version 9.

How do I get started?

To enable Bazel, use ng add @angular/bazel or use the @angular/bazel schematics collection when generating an Angular workspace.

Make sure to follow the Bazel installation guide for your operating system.

Angular Components

Angular version 9 comes with official components for YouTube and Google Maps. A clipboard directive and service are added to the Angular CDK.

Testing

The biggest surprise of the Angular version 9 release is the many improvements to testing. Long-standing performance issues are resolved, types are improved and new concepts are introduced.

Conclusion

One of the most important goals has been to keep backwards compatibility between Ivy and View Engine as much as possible.

Of course, Angular version 9 also includes bugfixes, deprecations, and breaking changes. Ivy also addresses some long-standing issues that we did not cover in this article.

Angular Ivy is an enabler for features to come. As we have discussed in this article, Ivy has already given us benefits for different use cases. However, the best features are to come in future versions of Angular. Which of the possible features that will be delivered in Angular versions 10 and 11, that is still to be decided.

We only discussed what is part of the public, stable Angular version 9 APIs. A few experimental APIs are part of this release, such as renderComponent, markDirty, and detectChanges. However, they are still subject to change.

The Angular Ivy version 9 release gives us improvements for bundling, testing, the developer experience, tooling, debugging, and type checking. Quite a good collection of features.

#angular-9 #angular #angular-features