Mixing Angular with AngularJS

Updated:

Why mix AngularJS and Angular

In a previous project / client we had a working application developed using AngularJS. The developer (me!) could not justify the budget for a full migration of the application just to 'be more up to date' with the technology.

The application had no issue and the users were happy.

The benefits of Angular compared to AngularJS are obvious and it was a pity to don't use the new features and increase our development speed.

To work with Angular we found the solution to integrate Angular (5.x) with AngularJS through a 'downgrade' of the Angular components.

The management didn't need any new budget or project for the 'Upgrade'

we did it step by step implementing the new features and 'downgrading' them to AngularJS

The management was talking about a budget for a future migration from AngularJS to Angular 2 ... but we were already deploying using the version 5 :)

Why this article now that everybody uses Angular

Because I see many companies that are still using AngularJS, big investments have been done in AngularJS projects and in many cases a migration cannot be done financially or technically.

For our migration we used the awesome documentation of Angular:

Angular Migration

Here you can find some notes about this migration.

Here you can see a more modern approach using Angular Elements used by a Google Engineer: Upgrading to Angular without NgUpgrade

Upgrade strategy

Our application was developed using an internal (at the time no more maintained!!!) framework built on top of AngularJS.

Because of the complexity hidden in this internal framework we decided to use the current AngularJS application to load Angular modules.

The goal was to develop all the new features with the newest version of Angular and migrate, if and when possible (time and money restriction) the old AngularJS components.

We started with AngularJS, Bootstrap and Gulp, we added Angular (version 4 followed by the 5) with Angular Material Components and Webpack.

Webpack

In Webpack we declared as entry point the Angular application:

module.exports = { 
    entry: { 
        'app': './src/main.ts', 
        'polyfills': './src/polyfills.ts', 
        'vendor': ['./src/vendors.ts'] 
    }, 
    output: { 
        filename: '[name].js', 
        path: path.resolve(__dirname, 'dist') 
    }, 

package.json

As you can imagine our package.json was colorful:

"dependencies": { 
    ... Angular ... 
    "@angular/animations": "5.2.9", 
    "@angular/cdk": "5.2.4", 
    "@angular/common": "5.2.9", 
    "@angular/compiler": "5.2.9", 
    "@angular/core": "5.2.9", 
    ... Material Design ... 
     "@angular/material": "5.2.4", 
     "@angular/material-moment-adapter": "5.2.4", 
     ... AngularJS ... 
     "@uirouter/angularjs": "1.0.15", 
     "angular": "1.6.9", 
         "angular-animate": "1.6.9", 
         "angular-cookies": "1.6.9", 
     ... Bootstrap... 
     "bootstrap": "3.3.7", 
     ... Ads and self promotion :) ... 
     "@molteni/array-utils": "0.0.6", 
     "@molteni/av-components": "0.0.10",     

main.ts

We booted the application using main.ts.
We imported "./app/app.js" that is the entry point for AngularJS.
The bootstrapModule inject the AngularJS application in the html body (app tag).

import './polyfills.ts'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
import { UpgradeModule } from "@angular/upgrade/static"; 
import "./app/app.js" 
 
platformBrowserDynamic().bootstrapModule(AppModule) 
    .then(ref => { 
        const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule; 
        upgrade.bootstrap(document.body, ['app'], {strictDi: false} ); 
    }); 

index.html

Surprise surprise our index.html contains the reference to AngularJS (<app>) and to Angular (<ang2>).

<!doctype html> 
<html lang="de"> 
    <head> 
        <base href="/"> 
        <meta charset="utf-8"> 
        <title>...</title> 
        <meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1 user-scalable=no"> 
        <meta name="mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
        <link rel="icon" href="data:;base64,..."> 
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    </head> 
 
    <body> 
        <app>Loading...</app> 
        <ang2></ang2> 
    </body> 
</html> 

The Angular component that reference <ang2> sounds like this:

import { Component } from '@angular/core'; 
import { NotificationService } from "./components2/common/service/notification.service"; 
import { ParameterLoaderService } from "./components2/vm/service/ParameterLoaderService"; 
import { HttpService } from "./components2/httpservice/http.service"; 
declare let require: any; 
 
@Component({ 
    selector: 'ang2', 
    template: ``, 
    providers: [NotificationService, ParameterLoaderService, HttpService] 
}) 
export class AppComponent  { 
    constructor(notificationService : NotificationService, parameterLoaderservice : ParameterLoaderService) { 
        console.log('constructor AppComponent') 
    } 
} 

angular.module

In our app.js we declare the application module:

import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static'; 
 
angular.module('app', [ 
    uiRouter, ngTranslate, ngTranslateStaticFilesLoader, ngCookies, ngResource, ngSanitize, 
    uiBootstrap, 'dndLists', Components.name 
]) 

the module declares directive that come from Angular:

.directive('appfooter', downgradeComponent({component: FooterComponent})) 
.directive('appreport', downgradeComponent({component: ReportComponent}))   

with this code we can use our Angular components inside AngularJS components.s

The proxy from AngularJS to Angular

To use Angular components inside AngularJS components and pages we injected proxies created in AngularJS, e.g.
This was due to be compatible with the existing framework and pass the parameter from Angular to AngularJS:

report.js:

import angular from 'angular'; 
import uiRouter from '@uirouter/angularjs'; 
 
import reportComponent from './report.component'; 
 
let reportModule = angular.module('report', [ 
    uiRouter 
]) 
    .config(/*@ngInject*/['$stateProvider', '$urlRouterProvider',($stateProvider, $urlRouterProvider) => { 
        $urlRouterProvider.otherwise('/'); 
 
        $stateProvider.state('report', { 
            url: '/report/:productNr', 
            params: {productNr: null}, 
            template: '<report></report>' 
        }); 
    }]) 
    .directive('report', reportComponent); 
 
export default reportModule; 

report.component.js

import template from './report.html'; 
import controller from './report.controller'; 
 
let reportComponent = function () { 
    return { 
        restrict: 'E', scope: {}, template, controller, controllerAs: 'vm', bindToController: true 
    }; 
}; 
 
export default reportComponent; 

report.controller.js

class ReportController { 
    constructor() { 
    } 
} 
 
export default ReportController; 

report.html

<navbar></navbar> 
<messages></messages> 
<main> 
   <appreport></appreport> 
</main> 

The referenced Angular component:
report.component.ts

@Component({ 
    template: require('./report.component.html'), 
    selector: 'appreport', 
    providers: [HttpService, NotificationService] 
}) 
export class ReportComponent implements OnInit { 
     
...} 
 

and report.component.html

<div flex 
     layout="column" 
     style="max-width: 70%; width: 70%; align-items: center; padding-bottom: 200px"> 
 
 
    <av-autocomplete style="width:400px;" 
                     [selectableObjects]="selectable" 
                     [properties]="{placeholder: 'Name oder Nummer'}" 
                     (changeText)="onTextChanged($event)" 
                     (selectItem)="onSelected($event)"></av-autocomplete> 
 
    <mat-spinner *ngIf="isLoading" style="margin:0 auto;"></mat-spinner> 
... 

The component is declared as EntryComponent in the module:

entryComponents: [ 
        FooterComponent, 
        ReportComponent, 

Conclusion

The 'migration' was successful, the new developers enjoyed to work with the newest versions of Angular.

We noticed some minor issues with the rendering performances (in particular with IE) but the users didn't complain.


WebApp built by Marco using SpringBoot 3.2.4 and Java 21. Hosted in Switzerland (GE8).