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.

[References]

https://v17.angular.io/guide/upgrade

https://www.npmjs.com/package/@angular/upgrade

https://surl.li/rgfehb (Image)

Written by

Engineering Core

COMPANY PROFILE

Please check out our Company Profile.

Download

COMPANY PORTFOLIO

Explore my work!

Download

ASK ISB Vietnam ABOUT DEVELOPMENT

Let's talk about your project!

No.	Data Type	What’s Included (Examples)
1	Personally Identifiable Info (PII)	Full names, addresses, phone numbers, ID/Passport numbers, personal emails.
2	Financial & Banking Data	Credit card numbers, bank accounts, transaction history, payment credentials.
3	Trade Secrets & Business Info	Proprietary algorithms, strategic plans, upcoming product specifications.
4	Biometric Data	Fingerprints, facial recognition, retina scans, voiceprints.
5	Medical & Health Records	Patient histories, prescriptions, diagnostic details, health insurance info.
6	Private Ideas & IP	Unpublished research, confidential brainstorming, creative intellectual property.

Method	How it works	Best used for
Substitution	Replaces real data with similar but fake values (e.g., replace a real name with a name from a random list).	Names, Credit card numbers.
Randomization	Replaces sensitive data with totally random values that have no connection to the original.	Addresses, PII.
Shuffling	Mixes the values within the same column. The data is real, but it now belongs to the wrong records.	Maintaining statistical relationships.
Encryption	Uses algorithms to turn data into an unreadable format. Only people with a "key" can read it.	High-level security (but can slow down analysis).
Hashing	Converts data into a fixed-length string of random characters. It cannot be reversed.	Passwords or data verification.
Tokenization	Replaces data with a "token" (reference value). The real data is stored in a separate, secure vault.	Sensitive production data & Compliance.
Nulling (Blanking)	Replaces data with a "null" value or a blank space. It simply removes the information.	Removing data while keeping the format.

AngularJS & Angular How To Run Together

I. Background – Why Run Two Versions at Once

II. The Official Tool – @angular/upgrade

III. Step-by-Step Implementation

IV. Summary

COMPANY PROFILE

COMPANY PORTFOLIO

ASK ISB Vietnam ABOUT DEVELOPMENT

I. Introduction

Domain 1 Overview: What You Need to Know

Task Statement 1.1: Define the Benefits of the AWS Cloud

Global Infrastructure Benefits

High Availability

Elasticity

Agility

Key Takeaways

What's Next?

CONTACT US

AngularJS & Angular How To Run Together

I. Background – Why Run Two Versions at Once

II. The Official Tool – @angular/upgrade

III. Step-by-Step Implementation

COMPANY PROFILE

COMPANY PORTFOLIO

ASK ISB Vietnam ABOUT DEVELOPMENT

Data Masking Guide: How to Protect Sensitive Data Before Using AI

1. The Temptation and the "AI Trap"

2. What is Data Masking?

3. The "Danger Zone": 6 Types of Data You Must Never Paste

4. Practical Data Masking Techniques

A. Popular Data Masking Techniques

B. For Tech Staff - Automation

5. Static vs. Dynamic Masking

Conclusion

How to Optimize jqGrid for Large Datasets

I. Introduction

AWS Certified Cloud Practitioner (CLF-C02) – Domain 1 (Part 1): Understanding AWS Cloud Benefits

Domain 1 Overview: What You Need to Know

Task Statement 1.1: Define the Benefits of the AWS Cloud

Global Infrastructure Benefits

High Availability

Elasticity

Agility

Key Takeaways

What's Next?

CONTACT US