#AngularJSservices | Explore Tumblr posts and blogs

programmingcorner-blog · 6 years ago

Text

Upgrading your AngularJS application to Angular

I am a full stack developer which, for quite a long time, meant for me working mainly on the back end part of the application and touching the front end only to either reuse some components prepared by the front end team, or to make, let’s call it, a dummy view and… well you guessed it leave it for the front end team to make it more sensible. Back then I was living a joyful life not really caring about all the frameworks, bundlers and other stuff used to make the app’s appeal. But nothing lasts for ever and finally, due to some staff rotation (that’s a great euphemism), I was maintaining and developing pretty much everything, which obviously included also the dreaded front.

Since now I was sort of in charge I thought it would be a great idea to at least try to modernise everything that could be modernised. As the app predates Angular it was developed mainly in AngularJS (actually it was a mixture of many different technologies - I guess every programmer working on the code added something that excited him at that moment, leaving really diverse environment) so my best idea was upgrading it to… Angular.

In this post I’ll try to explain what I actually did, how you can upgrade your app from AngularJS to Angular, how to use Angular components within AngularJS components and vice versa and how I resolved routing issues.

It begins with a simple step

Actually there are many articles and posts on upgrading AngularJS to Angular (e.g. Victor Savkin’s Migrating Angular 1 Applications to Latest Angular in 5 Simple Steps). Also the official Angular documentation can be of use. I am not a pioneer here, but I have some experience in upgrading actual application.

First thing you will discover when you start digging is that you don’t really need to upgrade old code to upgrade your app. Angular provides UpgradeModule which is an NgModule allowing you to transform your app into a hybrid running both AngularJS and Angular code.

Simple, right?

Well… if you are lucky enough and the structure of your AngularJS code is… structured (i.e. you’ve got your components, directives, controllers, services and factories imported and declared in modules that are exported and then further imported in parent modules all the way down to the root module) without any quirks and other exotic features then you are ready to go. Otherwise you need to work on that first.

Next step is creating an Angular app - root module will be sufficient for start:

import {NgModule, Component} from ’@angular/core’; import {BrowserModule} from ’@angular/platform-browser’; import {UpgradeModule} from ’@angular/upgrade/static’; @NgModule({ imports: [ BrowserModule, UpgradeModule ], bootstrap: [AppComponent], declarations: [AppComponent] }) export class AngularAppModule { constructor(public upgrade: UpgradeModule) { } }

It is important not to forget to inject UpgradeModule in constructor as it does most of the magic!

And finally bootstrapping:

import {platformBrowserDynamic} from ’@angular/platform-browser-dynamic’; import {AngularJSAppModule} from ’./angular-js-app’; import {AngularAppModule} from ’./angular-app’; platformBrowserDynamic().bootstrapModule(TaxCubeNg2Module).then((ref) => { ref.instance.upgrade.bootstrap(document.body, [AngularJSAppModule.name]); });

With the above code the AngularJS application will be bootstrapped within the Angular application and both apps will run in parallel. Especially in case of big applications this is a great starting point as you don’t need to rewrite entire code to enjoy features of the newer framework and migrate your old code gradually (or even leave it as is).

Steep route

Of course this isn’t the end of the story. Not yet at least. The first issue I had after bootstrapping both apps (except for bundling it, but bundler’s configuration is a material for a different post, as it was specific for some choices that were made in terms of bundler itself and some configurations and optimisations made in the past) was fixing routes as no matter what address I typed in the browser it was always redirecting me to the AngularJS landing site in the best case scenario only flashing Angular view for a brief moment.

In general, if you create a hybrid app, at least for some time you are condemned to use two routers, i.e. UI-Router and @angular/router, which means that in the content section of your app (and maybe in some sidebars, headers and footers) you’ll have those two one right next to another:

Most of the articles suggests here creating a routing handling strategy and providing it in your Angular root module (routing handling strategy is a small class implementing UrlHandlingStrategy which, when provided, tells Angular’s router which of the URL’s should it support). This maybe useful as you don’t really need both of them to work at the same time but actually it didn’t fix the problem I came across. No matter what I typed into my routing handling strategy it didn’t exactly gag UI-Router. It was like one of my exes, it always wanted to have the last word and always when it got URL not matching its resources the sucker redirected to the landing site before the handling strategy even kicked in.

The solution to the above was actually a very simple trick, although as usually in such a cases I spent tons of time reading more and more articles and Stack Overflow threads and adding to my code couple dozens of lines to no avail. What I finally did was adding a new state in my $stateProvider in configureRoutes() function. I named it “ng2″ and added an empty template as the content view:

$stateProvider.state("ng2", { views: { "content@": { template: "" } } })

Moreover for the $urlRouterProvider I created custom otherwise function which redirected all the Angular app’s URLs to that state, showing nothing in ui-view and keeping UI-Router on the leash:

function otherwise($injector, $location) { $injector.invoke(["$state", ($state) => { const url = $location.url(); if (url === "" || url === "/") $state.go("main.app.home"); else if(url.toString().toLowerCase().includes("/AngularApp")) $state.go("ng2"); else $state.go("main.app.notFound"); }]); }

Upgrade - using AngularJS elements within the Angular code

So far I found three different cases of using AngularJS elements within my Angular code:

Simple one

If your directive or component is just a tag and you don’t need to pass any properties, e.g. you don’t bind to it any variables or functions then just use it as you’d do it in your AngularJS code, simply add the said tag in the HTML code. You’ll need also to add the

CUSTOM_ELEMENTS_SCHEMA const to your @NgModule schemas section, so Angular knows that you are using elements that weren’t explicitly declared, but that’s pretty much all you need:

@NgModule({ schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class AngularModule { }

Upgrading directives and components

Here it gets slightly more complicated. Angular cannot communicate directly with AngularJS elements so you’ll need to create a wrapper translating what you want to achieve to concepts better understood by Angular. Provided that your AngularJS directive looks something like this:

function angularJSDirective() { return { // ... scope: { firstInput: ">", secondInput: ">" } } };

You’ll need to create an Angular @Directive extending UpgradeComponent class:

import { Directive, ElementRef, Injector, Input } from '@angular/core'; import { UpgradeComponent } from '@angular/upgrade/static'; @Directive({ selector: 'upgraded-directive' // selector which you'll use in your HTML }) export class UpgradedDirective extends UpgradeComponent { @Input() firstInput: any; // possible be specific type @Input() secondInput: any; constructor(elementRef: ElementRef, injector: Injector) { super('angularJSDirective', elementRef, injector); } }

If you declare the above wrapper in your @NgModule you can use it like any other Angular directive.

The only catch here is that sometimes your AngularJS elements are dependant on AngularJS objects, e.g. $scope. This can be resolved by creating and declaring providers, e.g.:

export const ScopeProvider = { deps: ['$injector'], provide: '$scope', useFactory: ($injector: Injector) => $injector.get('$rootScope').$new(), };

Services (providers)

Similarly to the $scope provider mentioned above you can create wrappers for any of your AngularJS services.

const AngularJSProvider = { deps: ['$injector'], provide: 'angularJSService', useFactory: ($injector: Injector) => $injector.get('angularJSService'), };

Than declare it in the @NgModule in which you want to use it:

@NgModule({ providers: [ AngularJSProvider ] })

And simply inject it in the constructor.

constructor(@Inject('angularJSService') private angularJSService) { }

Downgrade - using Angular elements within the AngularJS code

In case of downgrading Angular elements the things are even simpler. You can use downgradeInjectable function and declare its result as a factory in the AngularJS module where you need it. Than use it as any other AngularJS service.

import { AngularService } from '/angular-modules/.../angular-service.service'; export const angularJSModule = module("angularJSModule", [ /*...*/]) //... .factory("angularService", downgradeInjectable(AngularService) as any);

I hope you enjoyed reading this post and it proved to be at least somewhat useful to you.

If you have any questions, comments or remarks regarding the above the comments section is yours.

#Angular AngularJS

0 notes