AngularJS & Angular How To Run Together

Engineering Core

ISB Vietnam's skilled software engineers deliver high-quality applications, leveraging their extensive experience in developing financial tools, business management systems, medical technology, and mobile/web platforms.

I. Background – Why Run Two Versions at Once

AngularJS (1.x) was once a very popular front-end framework, and many applications built with it still run smoothly today.
As technology evolves, teams want to move to modern Angular (2+) for its TypeScript support, cleaner architecture, better tools, and long-term maintenance.
However, rewriting a large AngularJS project from scratch can be time-consuming and risky.
That’s why many developers choose to run AngularJS and Angular together in a hybrid setup — this approach saves time and costs while still ensuring an effective migration process and keeping the system running normally.

II. The Official Tool – @angular/upgrade

To make AngularJS and Angular work together, the Angular team released an official package called @angular/upgrade.
It acts as a bridge between the two frameworks, allowing them to share the same DOM, services, and data.

You can install it easily:

npm install @angular/upgrade @angular/upgrade-static

With this tool, you can:

Start (bootstrap) both frameworks at the same time.
Use Angular components inside AngularJS (downgrade).
Use AngularJS services inside Angular (upgrade).
Let both frameworks communicate smoothly in one app.

This is an official and stable migration solution, fully supported by the Angular team — not a workaround or a temporary solution.

III. Step-by-Step Implementation

Step 1: Bootstrap Both Frameworks

In your main entry file, initialize Angular and AngularJS to run together:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule } from '@angular/upgrade/static';
import { AppModule } from './angular/app.module';
import { angularjsApp } from './angularjs/app.module';
const bootstrapFn = downgradeModule(() => platformBrowserDynamic().bootstrapModule(AppModule)
);
angular.module('hybridApp', [angularjsApp.name, bootstrapFn]);

Step 2: Downgrade an Angular Component

Suppose you have an Angular component like this:

@Component({ selector: 'hello-ng', template: 'Hello from Angular' })
export class HelloNgComponent {}

You can make it available inside AngularJS templates:

import { downgradeComponent } from '@angular/upgrade/static';

angular.module('hybridApp')
.directive('helloNg', downgradeComponent({ component: HelloNgComponent }));

Now you can use it directly in AngularJS HTML:

<hello-ng></hello-ng>

This lets you gradually introduce new UI components written in Angular without breaking the existing AngularJS app.

Step 3: Upgrade an AngularJS Service

You can also reuse existing AngularJS services inside Angular:

angular.module('hybridApp').service('LegacyService', function() {
this.getData = () => 'data from AngularJS';
});

Then make it available to Angular components:

@Injectable({ providedIn: 'root' })
export class LegacyAdapter {
constructor(@Inject('LegacyService') private legacy: any) {}
getData() { return this.legacy.getData(); }
}

This approach allows you to keep using existing business logic without having to rewrite everything at once.

Step 4: Split Routing Clearly

Keep routing for both frameworks separate to prevent conflicts:

Use ngRoute or ui-router for AngularJS pages.
Use @angular/router for Angular modules.
Define clear URL boundaries, for example:
- /legacy/* handled by AngularJS
- /app/* handled by Angular

This ensures smooth navigation and stable behavior, while you continue upgrading parts of the application step by step.

IV. Summary

Running AngularJS and Angular together may sound complicated, but with the official upgrade tools, it’s actually quite manageable.

This approach offers several key benefits:

No need to rewrite the entire application.
Safe, gradual migration — one module at a time.
Full compatibility with your existing system.
Freedom to create new features using modern Angular.

While this hybrid setup isn’t meant to be permanent, it serves as a practical bridge between old and new technologies, helping you modernize your app step by step without breaking what already works.

Whether you need scalable software solutions, expert IT outsourcing, or a long-term development partner, ISB Vietnam is here to deliver. Let’s build something great together—reach out to us today. Or click here to explore more ISB Vietnam's case studies.