Migrating AngularJs to Angular – part 1

In my previous article, I explained that every company has to think about what they want to do with the old AngularJs application? For some companies, it’s better to completely rewrite the application. Maybe even not in Angular anymore? (if you have the resources for it) And for some companies, it’s better to create a hybrid situation/application in which you can let the AngularJs application, with new Angular components, co-exist. This can really help you to easily make the transition from AngularJs to Angular. 

This blog post is the first part of a series of blogs that will help you to take a look at a hybrid AngularJs/Angular application. Let’s start by setting up an environment for our migration.

In this article, I will show you how you can create a hybrid AngularJs 1.7x with an Angular 8x  application. Be aware, I do expect that you have some experience in AngularJs, Angular, Webpack, Javascript and Typescript. This post will be all about setting up Webpack, Angular and our AngularJs environment.

setup with Angular CLI

First set up an environment in which we can use as use starting point. We do this from scratch. Go to the main folder in which your entire AngularJs application is residing. Let’s call it ‘app-old’.
I am renaming this folder to “app-old”. Now go 1 level up in your directory structure. You should now see only your app-old folder. Now open a console and type:

ng new AngularApp

This will make the Angular CLI set up a new environment for an Angular application.
Now you have the start of an Angular app in the same folder as your app-old.

Now copy your app-old folder (and all its contents) to AngularApp/src/
So you will now have something like this

setting up Webpack

Were are gonna use Webpack as a Module Loader. I am not gonna talk to about what Webpack is and how it works, that’s outside of this article and you can really spend multiple blog articles on Webpack alone. But if you want some help on that please check out these links:
https://webpack.js.org/
https://webpack.js.org/guides/getting-started/

Are you new to Webpack, check out this link before continuing?

https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

To add Webpack to our application we navigate to our AngularApp directory.
Now open a command prompt and type

npm install webpack webpack-cli

This will install Webpack and de Webpack-CLI which you will need.

In order to create our Hybrid AngularJs application we need some additional loaders/plugins for Webpack :

These packages let you configure your Webpack.config in a way that it recognizes the files and know what to do with it.
So it’s time to configure these loaders in our webpack.config. If you don’t have one I suggest you create them.
Go inside in your AngularApp folder and create a file called webpack.config.js. (normally you have best practices telling you, you need to create a common webpack.config, webpack.config.dev, webpack.config.prod, etc, but to keep it simple we create just 1 file)

In your webpack.config file paste the following code:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
    mode: 'development',
    entry: {
        'ng1': './src/index.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/dev'),
        filename: '[name].bundle.js'
    },
 
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'config/index.html'
        }),
        new CopyWebpackPlugin([
            {
                from: 'src/app-old/*.html',
                to: '',
                flatten: true
            }
        ])
    ]
}

}

A little explanation about these loaders. Why do we need them for our Webpack installation?
Loaders are preprocessors that are able to do a little work on files before it bundles your packages. Every loader is capable of doing something different.

LoadersDescription
angular2-template-loader Loads and compiles Angular Components
awesome-typescript-loader Loads TypeScript 2.0+ like JavaScript
css-loaderLoads CSS file with resolved imports and returns CSS code
html-loader Exports HTML as string, require references to static resources
HtmlWebpackPlugin The plugin will generate an HTML5 file for you that includes all your Webpack bundles in the body using script tags
CopyWebpackPluginCopies individual files or entire directories, which already exist, to the build directory.

There are a lot more cool third party Loaders. I suggest you check them out at: https://github.com/webpack-contrib/awesome-webpack#loaders

Take a good look because these can really make your life easier.

preparing your Angular App

Now we have successfully installed and configured Webpack let us take a look at our Angular app we installed in the previous paragraph.
Now open a code editor and open the folder AngularApp/Src. I use Visual Studio Code for this. 🙂

In the AngularApp/Src folder create a file called index.ts. In this file, we will create references to the AngularJs files. After that we are gonna make sure that Webpack will load all these references. So add the following lines to the index.ts file

import './app-old/libs/breadcrumb/angular-breadcrumb.min';
import './app-old/script';
import './app-old/services/gotService';
import './app-old/services/navService';

A sharp eye will see that we are missing the AngularJs lib files that we used for our old AngularJs application. We can do two things here. We can load the AngularJs through Webpack our we can insert them by adding the lib files to the Index.ts. This is totally up to you.

I am gonna use the node package manager to add the AngularJs files to our project. https://www.npmjs.com/package/angular
I like to import all my libs through npm.

After you have installed the AngularJs and the Angular-Ui-Router packages we need to add them in our index.ts file.

import 'angular';
import 'angular-ui-router';
import './app-old/libs/breadcrumb/angular-breadcrumb.min';
import './app-old/script';
import './app-old/services/gotService';
import './app-old/services/navService';

Make sure you add Angular and Angular-Ui-Router to the top of your file.

Test

Now everything is in place we can start a test run to see if we configured all correctly.
Open a command console and go the root of your Angular app. (Not your app-old directory).
Now type

webpack

If everything is okay, you should see something like this.

If you see no errors everything is fine and we are ready to go the next part.
In the next part, we are gonna rewrite AngularJs code so that it can be migrated to Angular.

If you see any things inside my blogpost that is not correct, please feel free to comment on that. I really would appreciate.

Leave a Reply