Enterprise Angular 1 libs in Angular 2 app

After watching a great talk from Victor Savkin on Angular upgrade story https://www.youtube.com/watch?v=izpqQpD8RQ0 I decided to play with upgrade module. As a contractor I mostly work for enterprise companies that use the third party libraries and they are building big Angular 1 application using either babel or TypeScript with Angular 1.5. The most popular enterprise libraries are:

  1. Grid. Business are in love with excel and they want yo use it in web app as well. With Angular 1 and 2 I used the following grids: KedoUI, UI-Grid, Wijmo, ngx-datatable
  2. UI-Route. Basically all of my enterprise apps use UI-Route not an Angular routing.
  3. UI-Bootstrap for data picker, popover, tooltip…

Therefore I decided to check how the upgrade story can be used with these libraries. I start with UI-Route and Grid (specifically UI-Grid).

Goal

My goal is to start a new Angular 2 application and use Angular 1 routing and Angular 1 components that use UI-Grid.

Step 1: Install modules

I installed angular-cli, created a new Angular 2 app, added Angular 1, Route-UI and UI-Grid and started the application to check that the app can start.

npm install -g @angular/cli
ng new angular2-ui-upgrade
npm inpm i angular-ui-grid --save
npm i angular-ui-router --save
npm i angular --save
npm i
ng serve -o

Step 2: Bootstrapped Angular 1 and Angular 2 modules

I followed Victor Savkin “Migrating Angular 1 Applications to Latest Angular in 5 Simple Steps” post in this step to bootstrap Angular 2 module with Angular 1.

I added UpgradeModule to Angular 2 module

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UpgradeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(public upgrade: UpgradeModule) {
}
}

Created Angular 1 module with UI-Route and UI-Grid

import * as angular from 'angular';
import uiRouter from 'angular-ui-router';
import uiGrid from 'angular-ui-grid';

export const Ng1AppModule =
angular.module('Ng1AppModule', [uiRouter, uiGrid])
.config(function ($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: 'Hello!'
};

$stateProvider.state(helloState);
});

Bootstrapped Angular 2 with Angular 1

// import polyfills
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

// import angular2 dpes
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {Ng1AppModule} from './app/ng1_app';
import {AppModule} from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
const upgrade = (<any>ref.instance).upgrade;
upgrade.bootstrap(document.body, [Ng1AppModule.name]);
});

Step 3: Added UI-Route to Angular 2 component

Added ui-view to start Angular 1 UI-Route:

import {Component} from '@angular/core';

@Component({
selector: 'app-root',
template: `
<a ui-sref="hello">Go to Main</a>
<div ui-view></div>

`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Step 4: Create An Angular 1 component that with UI-Grid

class GridComponent {
myData: Array<Object>;

constructor() {
}

$onInit() {
this.myData = [
{
'firstName': 'Cox', 'lastName': 'Carney',
'company': 'Enormo', 'employed': true
},
{
'firstName': 'Lorraine', 'lastName': 'Wise',
'company': 'Comveyer', 'employed': false
},
{
'firstName': 'Nancy', 'lastName': 'Waters',
'company': 'Fuelton', 'employed': false
}
];
}
}

const options = {
template: `<div style="width:500px;height:250px;"
ui-grid="{ data: $ctrl.myData }"></div>`,
controller: GridComponent
};

export default {selector: 'grid', options};

Step 5: Added the Angular 1 component to the UI-Route

.config(function ($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<grid></grid>'
};

Step 6: Add ui-grid global styles to .angular-cli.json file

"styles": [
"styles.css",
"../node_modules/angular-ui-grid/ui-grid.css"
],

Result

And here is the result — Angular 1 UI-Grid inside of Angular 2 application.

Future

This is just a first step. I want to explore Boostrap-UI, $http service and other commonly used third party services and modules in enterprise.

You can find the full code at my github at https://github.com/ipassynk/angular2-ui-upgrade

Show your support

Clapping shows how much you appreciated Julia Passynkova’s story.