What is new in Angular 8

Pankaj P. Parkar

Technical Lead, Synerzip

  • 1x Engineer 😂

  • MS MVP

  • Angular GDE

  • OSS Maintainer

  • Stackoverflow Topuser

GitHub @pankajparkar Twitter Follow

About Me!

@pankajparkar

(@ngx-lib/multiselect)

Differential Loading

@pankajparkar

Source: https://www.youtube.com/watch?v=O0xx5SvjmnU

Differential Loading ctd.

@pankajparkar

Source: https://www.youtube.com/watch?v=O0xx5SvjmnU

Differential Loading ctd.

@pankajparkar

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <af-root></af-root>
    <script src="polyfills-es5.3aa54d3e5134f5b5b842.js" nomodule defer></script>
    <script src="polyfills-es2015.fd917e7c3ed57f282ee5.js" type="module"></script>
    <script src="runtime-es2015.24b02acc1f369d9b9f37.js" type="module"></script>
    <script src="main-es2015.1ac15946a081f21dbbe6.js" type="module"></script>
    <script src="runtime-es5.24b02acc1f369d9b9f37.js" nomodule defer></script>
    <script src="main-es5.1ac15946a081f21dbbe6.js" nomodule defer></script>
  </body>
</html>

Final bundle would have es2015 and es5 bundles

Lazy loading import

@pankajparkar

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => './customers/customers.module#CustomersModule')
  },
  {
    path: 'orders',
    loadChildren: () => './orders/orders.module#OrdersModule')
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Lazy loading import ctd.

@pankajparkar

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module')
					.then(mod => mod.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module')
    				.then(mod => mod.OrdersModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

SVG as a template

@Component({
  selector: 'svg-icon',
  templateUrl: './svg.component.html',
  styleUrls: ['./svg.component.scss']
})
export class SvgComponent {
  @Input() name: String;

  constructor() {}

  get absUrl() {
    return window.location.href;
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <use [attr.xlink:href]="absUrl + '#' + name"></use>
</svg>

@pankajparkar

SVG as a template

@Component({
  selector: 'svg-icon',
  templateUrl: './icon.component.svg',
  styleUrls: ['./svg.component.scss']
})
export class SvgComponent {
  ...
}

@pankajparkar

Ivy Renderer

  • Ivy is available in opt in preview
  • Ivy will be defaulted from Angular 9
{

  compilerOptions: {
  	...
  },
  "angularCompilerOptions": {
     "enableIvy": true
  } 
}

tsconfig.app.json

@pankajparkar

Bazel

  • Bazel is also available in opt in preview 

@pankajparkar

Source: https://www.youtube.com/watch?v=J1lnp-nU4wM

Custom builder

  • Builder command serve, build, test, etc
  • If you want to customize builder, you have to `eject` the configuration

@pankajparkar

ng eject
  • Manipulate the configuration from webpack.config.js
  • By ejecting configuration, you can loose capability of staying up to date.

Create custom builder

  • Builder command serve, build, test, etc

@pankajparkar

Create custom builder

@pankajparkar

import { BuilderOutput, createBuilder } from '@angular-devkit/architect';

export default createBuilder((options, context) => {
  return new Promise<BuilderOutput>(resolve => {
    resolve({ success: true });
  });
});
{
  "builders": {
    "command": {
      "implementation": "./command",
      "schema": "./command/schema.json",
      "description": "Runs any command line in the operating system."
    }
  }
}
    "builder-test": {
      "architect": {
        "touch": {
          "builder": "@example/command-runner:command",
          "options": {
            "command": "touch",
            "args": [
              "src/main.ts"
            ]
          }
        }
      }
    }

Further updates in Angular 8.x.x version

@pankajparkar

Host Package
Firebase hosting @azure/ng-deploy
Now @zeit/ng-deploy
GitHub pages @netlify-builder/deploy
Netlify angular-cli-ghpages 
ng add packageName

Form improvements

  • `markAllAsTouched` added on formGroup

@pankajparkar

validateFormAndDisplayErrors(form: FormGroup) {
  Object.keys(form.controls).map((controlName) => {
    form.get(controlName).markAsTouched({onlySelf: true});
  });
}
form.markAllAsTouched()

Form improvements ctd

  • `clear` on formArray

@pankajparkar

while (formArray.length) {
  formArray.removeAt(0);
}
formArray.clear()

Simple to Angular 8

@pankajparkar

@pankajparkar

References

@pankajparkar

Made with Slides.com