Let's talk about Angular

Who am I ?

  • Frontend Developer @ 7 Peaks

  • Creator of DevNote

Nutti Saelor (Lee)

​facebook.com/devnoteio

medium.com/devnote

Differential Loading

Differential Loading

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Differential Loading

  • Differential loading by default
  • If old browser need to be supported and target in compilerOptions is es2015, CLI will generate 2 bundles

Differential Loading

<!-- index.html -->

<html lang="en">
<head>
  ...
<body>
  <app-root></app-root>
  <script src="runtime-es2015.703a23e48ad83c851e49.js" type="module"></script>
  <script src="polyfills-es2015.4d31cca2afc45cfd85b5.js" type="module"></script>
  <script src="runtime-es5.465c2333d355155ec5f3.js" nomodule></script>
  <script src="polyfills-es5.03d8c9fc4ed8e610412b.js" nomodule></script>
  <script src="main-es2015.d9cfd421ee91de34ed51.js" type="module"></script>
  <script src="main-es5.4ecf9d7dfdcd907079da.js" nomodule></script></body>
</html>

Differential Loading

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Lazy Loading 

with

Dynamic Imports

Lazy Loading with

Dynamic Imports

{
    path: '/admin', loadChildren: './admin/admin.module#AdminModule'
}
  • Old way
  • New way
{
    path: `/admin`, loadChildren: () => 
                    import(`./admin/admin.module`).then(m => m.AdminModule)
}

Builder API

Builder API

  • AKA Architect API
  • Like Schematics but for custom lint ,build, test or deploy
// angular.json

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
      },
      ...
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        ...
      },
      ...
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        ...
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        ...
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        ...
      }
    },
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        ...
      },
      ...
    }
}

Builder API

  • Custom Builder in Nx project
// angular.json

"my-app": {
  ...
  "architect": {
    ...
    "test": {
      "builder": "@nrwl/jest:jest",
      "options": {
        ...
      }
    },
    ...
  },
  ...
},
"my-app-e2e": {
  ...
  "architect": {
    ...
    "e2e": {
      "builder": "@nrwl/cypress:cypress",
      "options": {
        ...
      }
    },
    ...
  }
},

Builder API

  • Deploy with Firebase
// angular.json

...
"deploy": {
  "builder": "@angular/fire:deploy",
  "options": {}
}
...
$ ng add @angular/fire
$ ng run my-app:deploy

Web Worker Support

Web Worker Support

  • Adding Web Worker by using following command
  • This command will add web-worker.worker.ts file
// my-worker.worker.ts

addEventListener('message', ({ data }) => {
  // you can add some calculation logic here
  const response = `worker response to ${data}`;
  postMessage(response);
});
$ ng generate web-worker my-worker

Web Worker Support

if (typeof Worker !== 'undefined') {
  // Create a new worker
  const worker = new Worker('./my-worker.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    // get the result from worker
    console.log(`page got message: ${data}`);
  };
  // post message to worker
  worker.postMessage('hello');
} else {
  // Web Workers are not supported in this environment.
  // You should add a fallback so that your program still executes correctly.
}
  • How to use

Ivy Opt-in

Ivy Opt-in

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Ivy Opt-in

  • New project
  • Existing project
// tsconfig.app.json

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
$ ng new ng8-ivy --enable-ivy

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Ivy Opt-in

Credit: https://docs.google.com/presentation/d/19yTRqHT1v4SQz5kXCL6OrIWvH9M20029s_ri5Eil03Y

Bazel Opt-in

Bazel opt-in

  • Build tools from Google
  • Speed up builds and tests by incremental build, dependency analysis and parallel execution
  • Full stack
  • Scale on cloud

Bazel Opt-in

  • New project
$  npm install -g @angular/bazel
$  ng new --collection=@angular/bazel
  • Existing project
$  ng add @angular/bazel

Bazel Opt-in

Credit: https://blog.angular.io/try-bazels-opt-in-preview-in-angular-cli-b9430bd00e82

Bazel Opt-in

// angular.json

"projects": {
    "my-app": {
     ...
     "architect": {
        "build": {
          "builder": "@angular/bazel:build",
          ...
        },
        "serve": {
          "builder": "@angular/bazel:build",
          ...
        },
        ...
        "test": {
          "builder": "@angular/bazel:build",
          ...
        },
        ...
        "e2e": {
          "builder": "@angular/bazel:build",
          ...
        }
      }
  }},

Bazel Opt-in

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

Other Updates

  • AngularJS Location Service
  • TypeScript 3.4
  • Workspace API

Breaking Change

  • ViewChild and ContentChild must have a static option
export class ShellComponent implements OnInit {
  @ViewChild('sidenav', { static: true }) sidenav;
  ...
}

Summary

  • Differential Loading
  • Lazy Loading with Dynamic Imports
  • Builder API
  • Web Worker Support
  • Ivy opt-in
  • Bazel opt-in
  • AngularJS Location Service
  • TypeScript 3.4
  • Workspace API

Thank you

Made with Slides.com