Angular 8.0 is Here How to Upgrade Step By Step Guide

1
(No Transcript)
2

• AngularJS developers were highly curious about
  the next update of Angular which was expected to
  happen between March and April of the current
  year. It was estimated to make huge strides in
  AngularJS mobile app development process. The
  wait is finally over as it finally happened in
  May 2019. Yes, this write-up is all about the
  brand new Angular 8.0 which has finally happened
  big time for Angular developers. The good news
  is, Angular developers are going to love it.
• Developers are already quite excited about Ivy
  the much-anticipated, third-generation renderer
  on top of other features like CLI APIs, web
  worker support, differential loading, and much
  more.
• With this major release, we will see a
  transformation in the entire platform which will
  be aligned with the ecosystem. The amazing fact
  is, it encompasses the framework on top of
  Angular Material. It also enhances the
  application loading speed on 21st-century
  browsers.
• Since it comes in the form of smaller bundles and
  higher order components, AngularJS developers can
  expect better debugging and swifter compilations.
  You can do all this without the requirement to
  repeat the codes.
• Without much ado, lets get started with the
  features that are present in Angular 8.

3

• Differential Loading by Default

• he good news for developers is that starting with
  this update Angular will now be employed on two
  different browsers with different bundles by
  default. Thanks to CLI extension, it will become
  easier to execute different bundles for old
  legacy (ES5) browsers along with state-of-the-art
  JavaScript (ES2015) browsers. It is popularly
  known as differential loading. Why? Because it
  helps browsers to opt for optimized or legacy
  bundles that are totally dependent on their
  capabilities to lead the correct one
  automatically. This way the users will also be
  able to receive the bundle required by them.
• This way this will automatically speed up the
  application with the help of modern syntax which
  would have a positive effect on the build
  process. This will result in the loading speed of
  modern browsers to increase tremendously. The
  Time to Interact will also become swifter. You
  can always count on the 21st-century browsers to
  provide differential loading that can save a
  maximum between 7 to 20 in bundle size on an
  average.
• A prime example of that is, Manfred Steyers
  project ngx-build-modern. In this project, due to
  the effect of differential loading in Angular 8.0
  there has been a drastic improvement in the
  performance without any special action. The ng
  build command along with the prod extension is
  more than enough for comprehensive bundling.

4

• Lazy Loading with Dynamic Imports
• Lazy loading was transformed into a toolchain
  since Angular came into existence. The same thing
  can be done with the help of the loadChildren key
  in the route configuration.
• Till now, this is how it used to look
• path '/admin', loadChildren './admin/admin.modu
  leAdminModule'
• But, in the recent update in Angular 8.0, the
  custom string has been removed and instead of
  that it has now integrated industry-standard
  dynamic import syntax.
• Once you upgrade to Angular 8.0, a lazy loaded
  import will look like this
• path /cart, loadChildren () gt
  import(./cart/cart.module).then(m gt
  m.CartModule)
• This syntax change will automatically work for
  you, albeit you have employed the ng upgrade
  command for your app. This enhancement will have
  a great impact on the support from the editors
  VSCode and WebStorm. These two will be able to
  determine and authenticate imports. Along with
  this, TypeScript and linters will be able to find
  out any missing or misspelled modules properly.

5

• Enhanced Support for Web Worker Bundling
• If you are running CPU-intensive tasks, the best
  workaround to quicken up the application and
  enhance their parallelizability is by using web
  workers. With the help of web workers, it is
  possible to write code off the main thread and
  offload tasks to a distinct background thread.
• But, there is a problem here. The code that is
  running in the web worker does not have to be
  present in the same JavaScript file in an
  application. The two need to be different.
  Developers who are using Angular CLI often get
  frustrated due to the fact that the CLI bundles
  JavaScript instantly into as few files as
  possible.
• Now, with the introduction of Angular 8.0, it is
  possible for the developers to fully parallelized
  web worker bundling without the mentioned
  discomfort. This is where the front-end
  developers will breathe a sigh of relief. Why?
  Because they had to struggle a lot earlier due to
  single thread limitations.
• In order to execute a new web worker from CLI and
  integrate it to your project run this command
• ng generate webWorker my-worker
• Once you get your web worker, execute it in your
  application by replicating the same process. This
  way the CLI will bundle and code split as per the
  requirement. Lets look at the code given below.
• const worker new Worker(./my-worker.worker,
  type module )

6

• Opt-In Usage Sharing
• This is another additional to Angular CLI that
  has been integrated simply to align Angular 8
  with the community needs. Thanks to this feature,
  the open-source web application framework that
  will enable you to collect anonymous data only.
• With the help of details like commands utilized
  and build speed, it will become easier to keep a
  tap at how the developers employ the platform and
  the way more improvements can be brought about.
  This is also a lucrative option available to you
  to share telemetry about CLI usage with your
  developer team.
• Angular has given more emphasis to giving consent
  about data sharing which can assist the
  development team to be improved. It has been
  observed that most of the platforms accumulate
  data as a default mechanism on an opt-out basis
  and stop only when you command them not to.
  Others do not enable you to inquire whether to
  stop sharing telemetry. But, there is a correct
  way to do it which Angular 8.0 has already found.
• Support for TypeScript 3.4
• Angular 8.0 has opened doors for TypeScript 3.4
  by mandating it. In other words, you need to
  update your TypeScript version as soon as
  possible. This new update is a great manner to
  synchronize it with the prevailing ecosystem.
  Although this might seem to be a small
  improvement, it has greater benefits in terms of
  generating clean, readable JavaScript codes.

7

• Dart-sass for Sass Files
• Angular CLI has gone for dart-sass instead of
  node-sass which will assist in creating your Sass
  file. The amazing thing that it would be
  substituting Ruby the legend. Dart is
  considered to be super swift to the point of
  notoriety.
• But, with Dart becoming default has garnered
  quite a change. It is still possible for you to
  use node-sass if you do install it precisely.
• Builder APIs and Workspace APIs in the CLI
• The new Builder APIs will ensure that you are
  able to tap into ng build, ng test, and ng run
  just like Schematics help you to tap into ng new,
  ng generate, ng add, and ng update. Using this
  information, you will be able to perform
  processes, including build and deployment by
  utilizing third-party libraries and tools.ng add
• _at_angular/fire
• ng run my-appdeploy
• In addition to this, changes in angular.json in
  Schematics needed to be done which required
  wholesale changes to the workspace configuration
  manually. But, with the introduction of Angular
  8.0, there is a new API which has come up which
  will make it effortless to alter and read the
  file.

8

• Changes in ViewChild and ContentChild
• Earlier, ViewChild and ContentChild were
  considered to be two unpleasant, inconsistent
  things. They were executed in such a way that the
  components could request elements that were not
  in a structural directive like nglf or ngFor.
• With the introduction of Angular 8.0, the
  components have to enumerate specifically when a
  resolution has to take place. There are two
  scenarios
• _at_ViewChild('info', static true )
• paragraph ElementRef
• In case the static value is true, Angular will be
  able to find out the element which is lying
  outside the structural directive, while
  initializing the component.
• _at_ViewChild('info', static false )
• paragraph ElementRef
• In case the static value is false, the view will
  get restored or commenced first. Then the
  resolution refreshes or initiated. This is where
  the ng update command will automatically get
  depicted. Alternatively, if it fails, add a
  comment with a TODO.

9

• Enhancements in AngularJS Migration
• Developers who are using location service will
  enjoy this new Angular update. Why? Because
  Angular now allows a LocationUpgradeModule in
  AngularJS applications which translates to a
  unified location service.
• With the help of a unified location service, it
  becomes easier to shift the responsibilities from
  AngularJS location to Angular Location. This way
  it will become easier for applications with
  hybrid operations that are contingent on
  ngUpgrade and route in AngularJS and Angular
  part.
• The Introduction of Bazel
• With the help of Angular 8.0, it could be
  possible to build a CLI application more
  effortlessly. How? With the help of Basel, a tool
  that has been developed and utilized by Google.
• It would not be wrong to say that the entire
  Angular framework is Bazel-born. Lets us now
  divert our attention to some of its benefits
• It is possible for AngularJS developers to employ
  the same tool for developing backends and
  frontends.
• There is a huge probability for developers to get
  remote builds and cache on build farm.
• It allows you to declare tasks with a crystal
  clear input and output which runs only the most
  significant ones.
• It enables incremental builds and tests. This way
  it is possible to gain on rebuild times.

10

• Ivy
• Ivy is one of the biggest and core attractions in
  Angular 8.0. Kara Erickson announced it in Google
  I/O 2018. She is now part of Angular. Since that
  time, it has been the main feature that
  developers were waiting for.
• IThis way it delivers more efficient results. It
  is also able to execute smaller bundles that
  assist in simplifying incremental compiling
  resulting in improved runtime speed. There are
  two main concepts in Ivy. They are
• Tree shakable
• Local
• Tree shakable
• It gets rid of unused code. This way the
  application is able to devote its time completely
  on the code it is executing. This way it is
  possible to get a smaller bundle and quicker
  runtime.
• Local
• Under this concept, only those components that
  are altered are compiled. This way it is possible
  to get swifter compiling.
• So, whenever there is any change in the data, it
  will automatically update. So, in case, you
  consider the UI of your application is important,
  it is time to get excited about Ivy.

11

• Lets look at some of the benefits of Angular 8
  Ivy
• Dismissal of metadata.json
• Enhanced template type checking
• Extensive compatibility with prevailing Angular
  applications
• Increased backward compatibility
• Introduction to metaprogramming
• Pre-compiled code shipment
• Quicker rebuild times
• Reduced payload size
• Tiny bundles.
• At present, Ivy is integrated in Angular 8.0 only
  as an opt-in preview for testing. It is possible
  for Angular developers to experiment with it.
  This way they will be able to find out the true
  potential and performance of their Angular
  application. Once that is done, it will make such
  applications uncomplicated, compact, and brisk
  than ever before.
• All of this is possible without making any
  changes in the existing application. Isnt it
  amazing? All in all, Ivy is the future of
  development that can give new wings to the
  Angular world.

12

• Upgrade from Angular 7 to Angular 8
• It is extremely easy to update from Angular 7 to
  Angular 8. This is especially true if you are
  employing HttpClient and have already upgraded to
  RxJS 6.
• If you run this single command it will
  automatically migrate the lazy loaded route
  imports to the new import syntax
• ng update _at_angular/cli _at_angular/core
• While upgrading to Angular 8.0, keep these things
  in mind
• There are chances of syntax errors coming up as a
  result of TypeScript 3.4. This might lead to
  several issues that did not occur previously.
  Utilize Node.js version 12 or later without any
  delay.
• If you wish to learn about the Node version that
  you are currently employing, use the following
  command
• node -v
• If you are using an older one, it is better to
  update it at the earliest.
• In order to update Angular Material in your
  application, run this command
• ng update _at_angular/material

13

• Parting Thoughts
• All in all, Angular 8.0 will make the lives of
  AngularJS developers smooth. Although apart from
  Ivy there is nothing much to talk about. But, in
  case, you are wondering if you need to upgrade to
  Angular 8.0, the answer is undoubtedly a big YES!
  Since there are far lesser changes, the
  prevailing applications will work wonderfully
  well without any real modification. Along with
  this, it is possible for the developers to get
  performance gains by employing differential
  loading and planning to execute your applications
  for Ivy. In the near future, there are chances
  that Ivy will become a default feature in Angular
  9 or Angular 10. To make the most of Angular 8,
  avail the services of a reputed AngularJS mobile
  app development company.

14

• Contact Us
• 1 [phone]
• sales_at_myappgurus.com
• https//is.gd/ZlkXEG