#native_company# #native_desc#
#native_cta#
  1. AngularJS Migration
  2. Step 9 - Migrate Routing
  3. Deal with Upgraded Providers

Deal with Upgraded Providers

Important

The source code for this course can be found on GitHub. Each step has it’s own branch, instructions for how to checkout the correct code for each step are in the Project Setup lecture.

Deal with Upgraded Providers

The ajs-upgraded-providers.ts file contains AngularJS providers which we temporarily upgraded in our migration process to maintain compatibility with Angular entities. In this lecture, we will look at these upgraded providers and see how we can replace them with Angular friendly solutions, so that we can completely remove AngularJS from our application.

Upgraded providers

The ajs-upgraded-providers.ts file contains the following upgraded providers:

  1. Toaster module

  2. UI-Router $state service

  3. UI-Router $stateParams service

UI-Router

The UI-Router will be replaced by Angular’s in-built routing module during our migration process. Therefore, we do not have to do any changes to our current UI-Router implementation.

Toaster module

We can replace the existing AngularJS toaster with the angular2-toaster module. For now we will just add this into our application in preparation for the next step of the migration.

To add this dependency to our application and the package.json file, execute the following command:

npm install angular2-toaster --save

Next, lets add in the angular2-toaster module to our NgModule like so:

...
import {ToasterModule, ToasterService} from `angular2-toaster`;
...
@NgModule({
  imports: [
    ...
  ],
  providers: [
    Contact,
    ContactService,
    toasterServiceProvider,
    uiRouterStateProvider,
    uiRouterStateParamsProvider,
    ToasterService
  ],
  declarations: [
    ...
  ],
  entryComponents: [
    ...
  ]
})
...

To ensure that our changes have not broken anything, re-build and run the application on localhost for verification.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!


Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!