Migrating From AngularJS To Angular

Hi all,

Here we’ll call Angular 1.x as AngularJs and for Angular 2+ as Angular.

In this blog, we will learn how to migrate from Angular JS to Angular.

For seamless migration from AngularJs to Angular, Angular provides a library called ngUpgrade which provides a tool UpgradeModule. This tool provide utilities which are used for bootstrapping and making the application a hybrid application which supports Angular and AngularJs codes.

Installing typescript

For writing code in Angular we need Typescript, so we’ll install the typescript compiler using npm

npm i typescript --save-dev

Now we’ll install the dependencies types so that you can use the already used libraries.

npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev

Now configure the typescript compiler adding tsconfig.json in your project, and add a script for compiling the typescript files into your package.json file

"script": {
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  ...

Install Angular

Now we can install Angular to our current project and make it hybrid, now migrate you application incrementally using ngUpgrade.

After adding Angular and its dependencies to package.json and a module loader, run below command:

npm install

Now we have to do some path adjustments of our directory, we have to use files from node_modules and project root instead of the /app folder. Move app/index.html to project root folder and change the path of developer server in package.json. Now your project will be served from the root. If you don’t want to change the paths of images and assets, then add base tag to the index.html and add /app to its href property.

<base href="”/app/”" />

Now add all the Angular polyfills in the head section of your index.html file.

<script src="/node_modules/core-js/client/shim.min.js"> </script>
<script src="/node_modules/zone.js/dist/zone.js"> </script>
<script src="/node_modules/systemjs/dist/system.src.js"> </script>
<script src="/systemjs.config.js"> </script>

Now its time to install upgrade package using npm install @angular/upgrade –save.

Creating and adding AppModule

Before creating Angular AppModule rename the app module file of AngularJs to app.module.ajs.ts and change the script in the index.html.

App.module.ajs.ts
'use strict';

// Define the `yourApp` AngularJS module
angular.module('yourApp', [
  'ngAnimate',
  'ngRoute',
  'core',
  'userDetail',
  'userList',
]);

Now create an Angular AppModule with NgModule class.

App.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    BrowserModule,
  ],
})
export class AppModule {
}

Bootstrapping your hybrid application

Now we’ll bootstrap your application to make it a hybrid application which uses both Angular and AngularJs, after this setup you’ll be able to convert your application to Angular.

Right now your application gets bootstrapped using AngularJs ng-app directive which is attached in the index.html , now this will not work we have to remove it from index.html. Import UpgradeModule in the AppModule file and then override ngDoBootstrap method:

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

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.documentElement, [yourApp']);
  }
}

Now we’ll bootstrap our AppModule inside the src/main.ts , this main.ts is configured inside webpack or systemjs config, so that browser will start the application from this point.

Main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Now both Angular and AngularJs are running at the same time.