{"id":21696326,"url":"https://github.com/dinanathsj29/angular8-new-features-changes","last_synced_at":"2025-03-20T14:47:25.861Z","repository":{"id":121990011,"uuid":"192049912","full_name":"dinanathsj29/angular8-new-features-changes","owner":"dinanathsj29","description":"Let’s go over what’s New features and Breaking changes introduced in Angular 8. Will try to understand a bunch of workflow and performance improvements as well as how to go about upgrading our older Angular (Angular v7/6/5/4/2) apps over to Angular 8.","archived":false,"fork":false,"pushed_at":"2019-11-27T07:37:58.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T14:11:24.687Z","etag":null,"topics":["angular8","angular8-new-features","angular8-upgrade","bazel","httpclient","httpclientmodule","ivy","upgrade-angular8","webworker"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-15T07:25:53.000Z","updated_at":"2020-04-20T10:26:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"7477c96d-6a88-4dc3-a8cc-8acb6c467c35","html_url":"https://github.com/dinanathsj29/angular8-new-features-changes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular8-new-features-changes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular8-new-features-changes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular8-new-features-changes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular8-new-features-changes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/angular8-new-features-changes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244635919,"owners_count":20485440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular8","angular8-new-features","angular8-upgrade","bazel","httpclient","httpclientmodule","ivy","upgrade-angular8","webworker"],"created_at":"2024-11-25T19:19:29.267Z","updated_at":"2025-03-20T14:47:25.820Z","avatar_url":"https://github.com/dinanathsj29.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"_images-angular8-new-features-changes/angular-logo-1.png\" alt=\"angular logo\" title=\"angular logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nAngular 8 New Features and changes\n=====================\nWelcome\n---------------------\nHi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `Angular7 step by step guide`. In this course/tutorial will go over, understand, learn and summarize some of the most important new features officially announced by the Angular Team.\n\nLet’s go over what’s New features and Breaking changes introduced in Angular 8.  Will try to understand a bunch of workflow and performance improvements as well as how to go about upgrading our older Angular (Angular v7/6/5/4/2) apps over to Angular 8.\n\nWho is this for? \n---------------------\nThis course/tutorial is for anyone and everyone, Almost everyone! Fresher/Newcomer as well as experienced UI/frontend/Web Developers who are interested in upgrading knowledge by understanding new cutting edge features, boost skills, and further career - by learning new latest dynamic JavaScript framework from Google to become a hi-tech developer.\n\nTopics include\n===================== \n1. [Angular8 Introduction](#01-angular8-introduction)\n2. [Angular8 New features](#02-angular8-new-features)\n    - 2.1. [Differential loading](#21-differential-loading)\n    - 2.2. [Dynamic imports for lazy routes](#22-dynamic-imports-for-lazy-routes) \n    - 2.3. [Experimental support for Ivy](#23-experimental-support-for-ivy) \n    - 2.4. [Bazel](#24-Bazel) \n    - 2.5. [CLI API workflow improvements](#25-cli-api-workflow-improvements) \n    - 2.6. [Web Worker Support](#26-web-worker-support) \n3. [Angular8 Breaking changes](#03-angular8-breaking-changes) \n4. [Upgrading to Angular8](#04-upgrading-to-angular8)\n5. [Upgrading Angular Material](#05-upgrading-angular-material)\n\n01 Angular8 Introduction\n=====================\n- Angular is the most popular JavaScript (TypeScript based) open-source front-end web application framework from Google for developing client-side (front-end) mobile and desktop web apps or SPAs\n- Angular 8 is finally released on `May 28 Tuesday, 2019`!\n- With the 8.0.0 a major release of Angular we have a new set of powerful features that developers will appreciate which are added at many levels - complete platform; `the Angular core framework, Angular Material library and the Angular Command Line Interface or CLI` - all three are now v8\n\n02 Angular8 New features\n=====================\n- As Google Angular Team announced and planned, `Major version upgrade twice a year` - Angular 8 was released in May 2019, **Angular 9 is in pipeline - can be released in October/November 2019**.  \n- Angular 8 release improves:\n    - application startup time on modern browsers, \n    - provides new APIs for tapping into the CLI, and \n    - aligns Angular to the ecosystem and more web standards \n\nHere are the new and most important features of Angular 8:\n\n2.1. Differential loading\n---------------------\n- `Differential loading` is the technique/process which will `automagically make Angular app more performant (faster)`\n- `Differential loading` is a process which automatically creates multiple production bundles for modern and legacy browsers\n- When a developer will build an application for production - `two bundles are created`\n    1. First bundle - For Modern browser that supports ES6+\n    2. Second bundle - For an Older browser that supports only ES5\n- As and when user will load application in the browser they will automatically get the correct bundle they need (thanks to ES6 modules in newer browsers)\n- A great performance improvement With Angular 8 Differential loading feature `applications generally save 7–20% of their bundle size` depending on the number of modern JavaScript features they take advantage of (As for Modern browser that support ES6+ lesser code/polyfills to be loaded)\n- We don’t have to do anything extra/special to get out of the box benefit of differential loading: just the ng build command with the --prod flag will take care of bundling everything:\n```\nng build --prod\n```\n- Learn more about differential loading - [https://angular.io/guide/deployment#differential-loading](https://angular.io/guide/deployment#differential-loading)\n\n2.2. Dynamic imports for lazy routes\n---------------------\n- Lazy routes refer to load the code for the routes/views only when the user navigates to those routes for the first time - it will improve the performance\n- Angular 8 Lazy-loaded routes now migrating/using the `industry standard dynamic import syntax `supported well in modern editors instead of an old angular `custom string` (It simply means that TypeScript and linters will be better able to complain when modules are missing or misspelled)\n- Here is the syntax difference:\n\nSo a lazy-loaded import that looked like this:\n```ts\n{ path: '/employee', loadChildren: './employee/employee.module#EmployeeModule' }\n```\n\nWill now changed and look like this:\n```ts\n{ path: `/employee`, loadChildren: () =\u003e import(`./employee/employee.module`).then(m =\u003e m.EmployeeModule) }\n```\n\n2.3. Experimental support for Ivy\n---------------------\n- `Ivy` is the new, latest and improved internal `rendering engine` from Angular team which drastically shrinks bundle sizes\n- Ivy works on translating templates and components into regular HTML and JavaScript that the browser can easily understand\n- In Angular 8 release - Ivy is `Not yet stable/ready for production`, it may be official/default rendering engine in Angular 9 \n- A developer can enable `Ivy` in Angular application by using the command:\n```\nng new angular8-demo --enable-ivy\n```\n- `Ivy` generates considerably smaller bundle chunks, make incremental compilation easier and also it will going to be the basis for future innovations and developments\n- Look more about Ivy: [https://angular.io/guide/ivy](https://angular.io/guide/ivy)\n\n2.4. Bazel\n---------------------\n- `Bazel` is the new `build system tool/process`, to be ready for official use with Angular to optimize overall build flow and speed (Webpack, TypeScript)\n- In Angular 8 release - Bazel is `Not yet stable / its experimental`, it may be an official/default build system tool in Angular 9 \n- To use Bazel in a new application, first install @angular/bazel globally:\n```\nnpm install -g @angular/bazel\n```\n- then create the new application with the command:\n```\nng new --collection=@angular/bazel\n```\n- To opt-in an existing application, run command:\n```\nng add @angular/bazel\n```\n- Check more about Bazel: [https://github.com/angular/angular-bazel-example](https://github.com/angular/angular-bazel-example) and [https://angular.io/guide/bazel](https://angular.io/guide/bazel)\n\n2.5. CLI API workflow improvements\n---------------------\n- The Angular CLI is improved a lot, now the `ng build`, `ng test` and `ng run` are extended to/by 3rd-party libraries and tool. Note: `AngularFire` already makes use of these new capabilities with a `deploy` command\n\n2.6. Web Worker Support\n---------------------\n- Web workers are taken into consideration when building the production bundles which helps increase the performance\n- Web workers are a great way to speed up your application of CPU-intensive processing, as Web workers allow you to offload `work to a background thread` (such as an image or video manipulation)\n- Command to generate and add Web Worker\n```\nng generate webWorker video-worker\n```\n- Read more on CLI Web Worker Support: [https://angular.io/guide/web-worker](https://angular.io/guide/web-worker)\n\n**Summary:**\n\n| Experimental support for Ivy | Experimental support for Bazel | Differential loading   | \n| -----------------------------|------------------|------------------|\n| `Ivy` is the new internal `rendering engine` which should drastically shrink bundle sizes  | `Bazel` is the new `build system tool/process`, to be ready for official use with Angular to optimize overall build flow and speed (Webpack, TypeScript)| `Differential loading` is process which automatically creates multiple production bundles for modern and legacy browsers        |\n| Not yet stable/ready for production          | Not fully finished/tested              | Decreases bundle size 7-20%           |\n| Can be enabled to check/play around          | Can be enabled to check/play around    | Just use the command: `ng build --prod`    |\n\n03 Angular8 Breaking changes\n=====================\nHere are some of the breaking changes one should check/verify and ensure while working with Angular 8:\n\n3.1. Typescript version\n---------------------\n- To work with Angular 8 you must need and `use Typescript version 3.4 and above`\n\n3.2. Node version\n---------------------\n- With Angular 8 you must need and `use Node version 12 or later`\n\n3.3. HttpModule and Http service\n---------------------\n- With Angular 8 legacy `HttpModule` and `Http` service is deprecated\n- Now we have to use `HttpClientModule` and the `HttpClient` service \n\n3.4. ViewChild ContentChild syntax\n---------------------\n- In Angular 8 ViewChild syntax changed:\n\nold syntax:\n```ts\n@ViewChild('header') header: ElementRef;\n```\n\nnew syntax:\n```ts\n@ViewChild('header', {static: false}) header:ElementRef;\n```\n\n04 Upgrading to Angular8\n=====================\n- Only one command to take care of update an existing app to Angular8:\n```\nng update @angular/cli @angular/core\n```\n- Check more on update/upgrade to angular8: [https://update.angular.io/](https://update.angular.io/)\n\n\n05 Upgrading Angular Material\n=====================\n- To update Angular Material use this command:\n```\nng update @angular/material\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular8-new-features-changes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fangular8-new-features-changes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular8-new-features-changes/lists"}