Angular JS to Angular Upgrade Process

AngularJS to Angular Upgrade Process

Web: www.jspanther.com Email: info@jspanther.com

AngularJS is almost at the end of its lifespan. The product entered its Long Term Support (LTS) period in 2018. However, this period had been extended until December 31, 2021, due to COVID-19.

By 2021, the AngularJS team stopped updating the framework. This means that critical security updates will no longer be available. If your app is still running on AngularJS, it's time to evaluate strategies for migrating to a newer platform.

In this PDF, you will be learning how to migrate/upgrade your legacy AngularJS Application to an Angular application. We have also discussed preliminary steps to follow before the migration process.

So, let's begin, 1) Set up typescript Angular can work without TypeScript, but if you want to use TypeScript you can set it up in advance. If you have TypeScript ready, then you don't need to worry about setting it up when you actually migrate your code.

If you want to use Angular in your project, @types/angular will help you set it up.

You'll also need to make sure your TS and JS code work together. Luckily, the TS compiler can help with that. The --allowJs compiler option allows JS files to be compiled using the TS compiler.

You should also look into a TS module integration with the module system used by your project. Our framework uses CommonJS, which includes the -module="commonjs" and --esModuleInterop=true options.

For JS interoperability, the TSC configuration should be like this: { "allowJs": true, "module": "commonjs", "esModuleInterop": true }

2) Clean up code structure If you're not already using the AngularJS style guide, then consider using it. The guide is old, but a lot has changed in the JavaScript ecosystem since it was written. You don't need to follow this guide to the letter, but you can find great advice regarding AngularJS best practices and code structure. I recommend "Rule of 1."

3) AngularJS components AngularJS 1.5 introduced a new Component API. This API is similar to the one provided in Angular. If possible, try to use it as much as possible because this will likely mean less code needs to be rewritten. *More information on these with additional preparation steps can be found in the official documentation.

4) Avoid Scope You should try to avoid using $scope in your code. $scope is not used in Angular anymore. Using components from AngularJS will help because the API is designed to reduce the need for and discourage the use of $scope.

5) Use the ngUpgrade library Angular is not backward compatible with AngularJS, but there is an official way to ease step-by-step migration. The ngUpgrade library provides tools to mix and match AngularJS and Angular code inside a hybrid application.

AngularJS and Angular are two frameworks for Developing Web Applications.

Code written for AngularJS will run in the AngularJS framework, and code written for Angular will run in the Angular framework. The ngUpgrade library provides tools that make it easy for components written in different frameworks to work together.

The ngUpgrade is a great help because it has a lot of documentation that explains the main parts of the migration process. *For more information on ngUpgrade and the migration process, you can check out the official documentation or the ngMigration forum.

7 Steps of AngularJS to Angular Migration Process

Sometimes things come up that are not covered in the official documentation. In this section, we'll discuss the seven steps to migrating successfully. We'll describe the situations we encountered when setting up ngUpgrade. Hopefully, this will give you more context on what to expect for your migration.

Step 1: Built the application In the past, we used Webpack and Gulp to build our application. But then we started using Angular CLI, which is a set of tools that comes with Angular. We asked ourselves if we should switch to using Angular CLI. The benefits of using CLI are that it provides a predefined list of commands for all the things you might want to do with your application, like building it, running it, testing it, and linting it.

We were originally going to use Angular CLI for our project, but then we found out that it wouldn't work with the elements of our project that we needed. We ended up keeping Webpack instead because it allows more customization.

We decided to upgrade to Angular 8 because the Angular CLI builders were officially supported and we didn't want to add more changes and complexity to the migration process. When the time came for us to upgrade, we knew that we could always go back and utilize Angular CLI in the future, especially when the next major version of Angular was going to be 8+.

Note: We used Webpack 4. If you are using a different version, your configuration might be different. You can find help with that in the Webpack documentation. If some plugins or loaders need an upgrade, you might need to do that. Otherwise, you can find alternatives.

Step 2: Template loading configuration HTML templates are used by both Angular and AngularJS. Hybrid applications require support for both framework-specific and shared templates. In some situations, you may need to split the HTML files across two distinct loading phases.

For example, We used an AngularJS Template loader to preload templates. This caused problems with Angular. To fix this, we split the AngularJS application source code and stored it in two different directories: /public and /shared. Newer

Angular code designates the /src directory where its code is stored.

Consequently, configuring Webpack to use different loaders for different paths was simple. { test: /\.html$/, include: [ resolvePath("src") ], exclude: /index\.html$/, use: { loader: "html-loader", options: { attrs: false } } }, { test: /\.html$/, include: [ resolvePath("public"), resolvePath("shared") ], use: [{ loader: "ngtemplate-loader", options: { relativeTo: `${__dirname}/` } }, { loader: "html-loader", options: { attrs: false } }] }

You can set up different loader chains for Angular and AngularJS templates by adding two rules for HTML files and including different paths for them. You can also try other webpack configuration options to achieve a similar result.

Step 3: Choose between Babel and TSC When introducing TS, we had to decide which compiler/transpiler to use. In our specific case, Babel was already used in the project. Babel offers more flexibility, configuration, and extensibility options than the TypeScript compiler.

The Angular Ahead-of-Time compiler only supports the TypeScript compiler.

While you can live without AOT, it ultimately helps improve application size and rendering performance. After considering the pros and cons, we decided to use the TypeScript compiler.

Step 4: Prepare TS Compiler for Angular TS decorators are used by a large portion of Angular's functionality. You must enable two TS compiler options in order for decorators to function. { "experimentalDecorators":true, "emitDecoratorMetadata":true }

● experimentalDecorators enable decorators. ● emittedDecoratorMetadata provides this data to Angular in the compiler code. Angular needs information about decorators in order to work.

These settings are specified in the tsconfig.json file, just like other TS compiler configuration options.

Step 5: Set up browser support Read the browser support page when setting up an Angular application.

Depending on your requirements, you may need to include required polyfills.

Step 6: Bootstrap hybrid applications The first thing you should do after installing is set up bootstrapping. The official guide explains how to bootstrap Angular and AngularJS components of the application.

Step 7: Adjust Routing If you are using AngularJS and UI-Router, you can use the default routing mechanism supported by ngUpgrade. But if you are using UI-Router and need to support both AngularJS and Angular, you can use the "hybrid" feature of UIRouter. We ended up using this in our own application.

If you are using UI-Router events and don't want to modify your code, you may explicitly turn them on. It is a simple two-step procedure: 1. Import "@uirouter/angularjs/release/stateEvents".

2. Add "ui.router.state.events" with other UI-Router dependencies to the AngularJS app module dependencies.

Example code is shown below. const uiRouter = require("@uirouter/angularjs").default; const { upgradeModule } = require("@uirouter/angular-hybrid"); require("@uirouter/angularjs/release/stateEvents"); let dependencies = [uiRouter, upgradeModule.name, "ui.router.state.events"]; let ngModule = angular.module("app.core.routing", dependencies);

Closing up The AngularJS to Angular upgrade process can be daunting, but our team at JS Panther is here to help.

We have the experience and expertise necessary to guide your company through every step of the process, from planning to execution.

Don’t go it alone – contact us today for a free consultation and let us show you how we can help make your upgrade as smooth and stress-free as possible.