So, you are finally ready to start to migrate your old AngularJS to the new fancy Angular 7. But it is kind of big and you cannot afford not to release for half a year. So how are you going to do it? You want to upgrade to the latest Angular version, but you can’t do it with a big bang. Well there is a great hybrid solution made by the Angular team called @Angular/Upgrade. It basically lets you run AngularJS inside Angular and makes all you’re AngularJS Services, Components, Directives etc. available in Angular and vice versa.

Getting your AngularJS Code ready

First, we need to get our source code and build process ready. Secondly, we need to switch to webpack, this will make the rest of the steps way easier. Because every application has different needs I won’t go into detail on how to do this. But for those of you who’ve never used Webpack before, this quickstart will give you a head start.

If you haven’t done so already install all your dependencies with a package manager like NPM, this will save you a lot of headaches while merging AngularJS with Angular.

The last step is to migrate all JavaScript files to typescript. Although recommended it is only required if you are planning to migrate your existing AngularJS code to Angular.

rename *.js *.ts

Should do the trick on windows.
To use TypeScript, you need to add TSConfig file, a basic example is found below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noStrictGenericChecks": true,
    "lib": ["es2018", "dom"],
    "suppressImplicitAnyIndexErrors": true,
    "rootDir": "src",
    "outDir": "dist",
    "baseUrl": "./"
  }
}

Optionally you could add type definitions for AngularJS and other dependencies this will add type hint’s for your old AngularJS code.

Installing Angular

So the first step is to installing the Angular Framework. Just run the following NPM command and your good.

1

npm i –save @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic core-js zone.js

We need to add one more dependency. This package will handle the communication between AngularJS and Angular.

1

npm i –save @angular/upgrade

Setting up the hybrid

Now that we have everything installed we can start coding. First add an file called app.module.ts to your source root. This will be our root angular module and will bootstrap AngularJS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { UpgradeModule } from "@angular/upgrade/static";

@NgModule({
  imports: [BrowserModule, UpgradeModule],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}
  public ngDoBootstrap() {
    // bootstrap(angularJs root element in dom, AngularJS root module, bootstrap options)
    this.upgrade.bootstrap(document.body, ["app"], { strictDi: true });
  }
}

Angular doesn’t magically know that this is the root module. The code to tell Angular this is usually placed in a file called main.ts, this file needs to be added as an entry in the webpack configuration.

1
2
3
4
5

import "./app"; // AngularJS code
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";

platformBrowserDynamic().bootstrapModule(AppModule);

Finally, we need to add some Polyfills. Usually this is added in a separate file and added to the webpack config as an entry. So, let’s add a polyfills.ts

1
2
3

import "core-js/es6/reflect";
import "core-js/es7/reflect";
import "zone.js/dist/zone";

That’s it. You are running in hybrid.

So, what’s next

There is not one way to upgrade your project. If you’re planning to migrate your existing AngularJS components to Angular you should take a look at upgrading AngularJS components to work with Angular over here and Downgrading Angular Components to work with AngularJS over here. These will allow you to keep upgrade a component without breaking the stuff around it.
But if you are on an older code base that uses separate controllers and html templates, you should rewrite your code to a component-based system. A tool that could help you is the hybrid library for UI-Router. This will allow you to upgrade page by page. You can find this library over here.

This blog is written by:
Martin Ligtenberg

Bij Cloud Republic werken developers die steen goed zijn in het bouwen van maatwerkapplciaties in de Cloud.
Wij geloven dat synergie in een team belangrijk is. Wij streven naar een team met soortgelijke skills die elkaar weten te versterken.
Om te toetsen of nieuwe medewerkers passen en om huidige medewerkers een duidelijke groei richting te geven hebben we een baseline opgesteld.

Deze baseline is een set van skills en competenties die je “zou moeten” beheersen. Ik zeg met klem “zou moeten” want we weten dat de perfecte developer niet bestaat.
Wij vinden het belangrijker dat je een duidelijke groei richting hebt, dan dat je alle competenties al beheerst.

Wij geloven dat je de basis kennis van Front-end, Back-end, Cloud en DevOps moet hebben om effectief maatwerkapplicaties in de Cloud te bouwen. Dit betekent niet dat je je niet kan specialiseren, we moedigen specialisme’s in één van de competenties ook aan!

Investering

Microsoft is onlangs gestart met de uitrol van Role-based certificeringen. 2 van deze certificeringstrajecten zijn ons op het lijf geschreven, namelijk:

We willen medewerkers motiveren om aantoonbare kennis van Azure op te doen en daar doen we dan ook alles voor.
Medewerkers krijgen naast een vergoeding voor de examens ook tijd om te studeren, zodat je niet alles thuis in de avonduurtjes hoeft te doen. Sterker nog, als er genoeg animo is huren we soms zelfs een trainer in om de medewerkers in een sneltrein vaart klaar te stomen voor de examens.

Meer weten over Cloud Republic? Bezoek: https://cloudrepublic.nl of neem contact op met @DibranMulder op Twitter of op LinkedIn.

Welcome to our blog, Cloud Republic will post here about: Cloud Development

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// A Hello World! program in C#.
using System;
namespace HelloWorld
{
    class Hello 
    {
        static void Main() 
        {
            Console.WriteLine("Hello World!");

            // Keep the console window open in debug mode.
            Console.WriteLine("Press any key to exit.");
            Console.ReadKey();
        }
    }
}