Angular 6: What’s new?

The final version of Angular 6 is now available!

 

New rendering engine: “Ivy”

In the race for performance led by Google with each new version, Angular 6 brings nothing less than a brand new rendering engine, named “Ivy”!

This new engine promises faster compilation, reduced bundle size, better debugging, and more flexibility, while remaining backward-compatible (so you do not have to specifically modify your apps to take advantage of of these benefits).

There are few benchmarks on the subject, but there is an example of application “Hello World” whose size is barely 3.3ko (compressed) against nearly 50ko without this new engine, which promises a significant improvement performs !

However, this new engine is not yet fully compatible and will probably not be compatible with the final release of Angular 6.0.0. To be able to test it, you have to activate it via the enableIvy flag in the compilation options.

Simplified updates

Angular CLI, the command-line tool that makes it possible to generate an Angular application, will offer in its new version (Angular CLI 1.7) a new “ng update” command to automatically update the dependencies of an application.

Note that this new feature is based on Schematics, the tool to transform a project by generating new components or changing its sources.

Component Dev Kit (CDK)

Although not quite new to Angular 6 (existing since Angular 5.1), the CDK (Component Dev Kit) is a component development kit. It is the heart of the Angular Material component library, and allows you to create your own components without reinventing the wheel, while benefiting from the best practices implemented by Google in Angular Material.

It is thus possible to create quite simply its own floating panels (to create for example a context menu, a drop-down list or a tooltip), personalized tabs or tables of data starting from the basic components of the CDK.

Version 6 provides a new tree component for managing trees.

Angular Elements

Being able to create your own components is good, but being able to share them between different projects is even better! It is to meet this need that Google offers “Angular Elements”.

Angular Elements will package Angular components as Web Components.

As a reminder, the Web Components are a standard (https://www.webcomponents.org/specs) allowing in particular to create its own HTML components (called “Custom Elements”). Supported natively by most recent browsers (or via the use of polyfills for others), they make it possible to create truly reusable components that are independent of the development framework used (Angular, React, Vue, etc.).

Angular Elements will allow for example to create reusable Angular components in a React application.

Service Workers and PWA

Progressive Web Apps (PWA) are web applications that can work offline, manage push notifications or even be “installed” on the home of smartphones, like a mobile application.

For the creation of PWA, since Angular 5, the framework allows the management of Service Workers (key component of PWA).

In Angular 6, the implementation of Service Workers will benefit from patches and some new features like the ability to uninstall a Service Worker.

Other news

RxJS, the library for responsive programming by manipulating asynchronous data feeds, will be updated to version 6. For those who do not know RxJS, Angular provides a user guide.

RxJS 6 will reduce even more the size of the bundles.

TypeScript, the typed JavaScript programming language used by Angular, will be updated to version 2.7. You will find all the news of this version here.

Angular Buildtools Convergence (ABC): Google wants to offer its internal tools for everyone to builder Angular applications “as Google does.” For this, Google will propose a new build tool named Bazel. This tool should in particular make it possible to not completely recompile an application with each modification but only the impacted code, thus making it possible to significantly improve the compilation time.

Conclusion

Angular 6 brings many new features to boost application performance and speed up compilation times.

New features around components such as CDK and Angular Elements should also make it much easier to create libraries of reusable components in different projects and even with different frameworks.

Improved Service Workers will also enable Progressive Web Apps to consistently deliver a mobile experience that rivals native apps.

Deprecation of SSL / TLS 1.0

Introduction

This article is based on the following article: https://blog.pcisecuritystandards.org/are-you-ready-for-30-june-2018-sayin-goodbye-to-ssl-early-tls

Is your organization still using the SSL/early TLS protocols? Do you work with online and e-commerce partners or customers who haven’t yet started the migration away from SSL/early TLS to a more secure encryption protocol? Read on for key questions and answers that can help with saying goodbye to SSL/early TLS and reducing the risk of being breached.

What’s happening on 30 June 2018?

30 June 2018 is the deadline for disabling SSL/early TLS and implementing a more secure encryption protocol – TLS 1.1 or higher (TLS v1.2 is strongly encouraged) in order to meet the PCI Data Security Standard (PCI DSS) for safeguarding payment data.

What is SSL/early TLS?

Transport Layer Security (TLS) is a cryptographic protocol used to establish a secure communications channel between two systems. It is used to authenticate one or both systems, and protect the confidentiality and integrity of information that passes between systems. It was originally developed as Secure Sockets Layer (SSL) by Netscape in the early 1990s. Standardized by the Internet Engineering Taskforce (IETF), TLS has undergone several revisions to improve security to block known attacks and add support for new cryptographic algorithms, with major revisions to SSL 3.0 in 1996, TLS 1.0 in 1990, TLS 1.1 in 2006, and TLS 1.2 in 2008.

What is the risk of using SSL/early TLS?

There are many serious vulnerabilities in SSL and early TLS that left unaddressed put organizations at risk of being breached. The widespread POODLE and BEAST exploits are just a couple examples of how attackers have taken advantage of weaknesses in SSL and early TLS to compromise organizations.

According to NIST, there are no fixes or patches that can adequately repair SSL or early TLS. Therefore, it is critically important that organizations upgrade to a secure alternative as soon as possible, and disable any fallback to both SSL and early TLS.

Your .NET Code Could Stop Working

What code is impacted?

  • Targets .NET Framework 4.0 or 4.5
  • Uses .NET’s built-in communication framework (HttpClient, HttpWebRequest, etc)
  • Uses default security protocols

What will happen?

If your client code has only SSL 3 and TLS 1.0 enabled when attempting to securely communicate with a server that has only TLS 1.1 and/or TLS 1.2 enabled… it simply won’t work (SocketException). Both server and client must have at least one matching protocol enabled in order to communicate.

What are some options to fix it?

  1. Update your code to explicitly enable the newer protocols.
    This is the option we’re going to explore.
  2. Update your project to target .NET Framework 4.6 or newer.
    This will enable TLS 1.0, TLS 1.1, and TLS 1.2 by default.
  3. Update the registry as described here to enable secure defaults across all .NET applications on the machine.
  4. Rewrite your code to implement a 3rd-party communication framework.

The option you choose depends entirely on your constraints (time, risk, target operating systems, etc). You may not be able to target .NET 4.6 or modify the registry due to a lack of control on your target platform. You might not want to risk rewriting your codebase and retesting.

Thankfully, the code fix is relatively straightforward if you’re targeting .NET 4.5
ServicePointManager.SecurityProtocol |= SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12;

This will ensure that TLS 1.1 and TLS 1.2 are enabled in addition to the system defaults. You can set this once at the beginning of your application to affect all connections in the current AppDomain.

What if I’m targeting .NET 4.0?

Unfortunately, the Tls11 and Tls12values are not defined in .NET 4.0’s version of the SecurityProtocolType enum.

However, if .NET 4.5 or newer is installed on the system, the following code will work at runtime:

using System;
using System.Net;
using System.Reflection;
using System.Runtime.Versioning;

namespace ProtocolCheck {
    class Program {
        static void Main(string[] args) {
            var assembly = Assembly.GetExecutingAssembly();
            var attributes = assembly.GetCustomAttributes(typeof(TargetFrameworkAttribute), false);
            var version = (TargetFrameworkAttribute)attributes[0];

            Console.WriteLine($"Target Framework: {version.FrameworkDisplayName}");

            SecurityProtocolType flag;
            if (Enum.TryParse("Tls11", out flag))
                ServicePointManager.SecurityProtocol |= flag;
            if (Enum.TryParse("Tls12", out flag))
                ServicePointManager.SecurityProtocol |= flag;

            Console.WriteLine($"Enabled Protocols: {ServicePointManager.SecurityProtocol}");
        }
    }
}

By default, all versions of Windows starting with Windows 8 ship with .NET 4.5 or newer.

Unfortunately Windows 7 / Server 2008 only ships with .NET Framework 3.5.1. The solutions for applications targeting .NET 3.5.1 are slightly different than what I’ve covered here. You’ll definitely want to look at Microsoft’s patch for Windows 7 / Server 2008 that enables the new protocols for .NET 3.5.1.

Getting started with TsLint and tslint-consistent-codestyle in Angular 5+ projects, Part 1: Visual Studio Code

 

Introduction

This article will show you how to integrate TsLint and the consistent codestyle extension to your Angular solution in order to ensure consistent coding standards across your code base.

In this tutorial, Angular 5 and Visual Studio Code will be used.

Step 1

After setting  your angular app, download TsLint for Visual studio code : https://marketplace.visualstudio.com/items?itemName=eg2.tslint

Step 2

Install the tslint-consistent-codestyle npm package. This package adds many useful coding rules not available with the native TsLint, such as naming-convention which allows you to control the way a variable, a function or really anything will be declared.

npm install --save-dev tslint-consistent-codestyle

Step 3

Replace the content of tslint.json by this content (you can edit these rules, they are only just a suggestion):

{
  "rulesDirectory": [
    "node_modules/codelyzer",
    "tslint-consistent-codestyle"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs",
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": true,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "no-output-on-prefix": true,
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "ordered-imports": [
      true,
      {
        "import-sources-order": "any",
        "named-imports-order": "case-insensitive"
      }
    ],
    "naming-convention": [
      true,
      {"type": "default", "format": "camelCase", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid"},
      {"type": "method", "modifiers": "public", "format": "camelCase"},
      {"type": "member", "modifiers": "private", "leadingUnderscore": "require"},
      {"type": "type", "format": "PascalCase"}
    ],
    "typedef": [
      true,
      "call-signature",
      "property-declaration"
    ]
  }
}

Step 4

Run the command:

npm run lint

And check for errors in the terminal (some errors might not appear with Tslint extension)

Example:

Step 5

Fix the errors or edit your rules 🙂