Angular 1 and 2 Integration Typescript example – Directive

When you are upgrading your existing Angular 1.x app to Angular 2, you may find that your existing application was written in javascript, but you prefer to write new Angular 2 code in Typescript during the upgrade. Not to mention that you can pre-compile Typescript into javascript and use it as is, here is another way to achieve the same goal in this example. Pure javascript version of this example is also available here.

 

In this example, we will be creating an angular 1 and 2 hybrid application that demonstrates below use cases.

On a single page,

  1. use Angular 1 directive (in javascript)
  2. use Angular 2 component (in Typescrit)
  3. use an Auglar 1 directive that uses Angular 2 component (in javascript)
  4. use an Angular 2 component that uses Angular 1 directive (in Typescript)

The page structure will be like below: –

Angular 1 and 2 Integration Typescript example - Directive page structure

I am just trying to cover all scenarios that may happen during upgrade process, it doesn’t necessarily mean that you will encounter them all.

So, let’s get started.

Folder Structure

Below is the folder structure of this example. As always, the source code is available for download.

Angular 1 and 2 Integration typescript Example - Directive folder

app.js

If you are familiar with Angular 1, you know that we need to declare our app module. To keep the example simple and clean, this is all for app.js.

angular-one.directive.js

Next, let’s create an Angular 1 directive. Below is a very typical directive with template in Angular 1.

angular-two.directive.ts

And we create a very basic Angular 2 component as well. If you are not familiar with Angular 2 component, you may check my other posts.

adapter.ts

In order to bootstrap an Angular 1 and Angular 2 hybrid application, we need to use UpgradeAdapter  provided by Angular 2 upgrade module.

In adapter.ts, we create our adapter instance here so it can be used later.

boot.ts

Here is the place where we bootstrap the app. Before we do so, we need to downgrade the <angular-two/>  component so it can be available for use.

So far, we have already covered the use case 1 and 2, which means you should be able to use <angular-one/>  and <angular-two>  component on your page, like below: –

index.html

Result

Angular 1 and 2 Integration Typescript example - Directive result short

Umm…, looks good, isn’t it? Wait, what about use case 3 and 4?

For use case 3 and 4, let’s create another 2 components to demonstrate the integration.

angular-one-two.component.js

This is another Angular 1 directive, but it uses the Angular 2 component <angular-two/>  that we created above.

Well, actually, we don’t have to do anything special for this directive, because we have already downgraded the <angular-two/>  component as shown in boot.ts

angular-two-one.component.ts

This component is for demonstrating the use case 4, and to me, use case 4 is very likely to happen when we are upgrading to Angular 2, for example, creating a new component in Angular 2 but still requires third party Angular 1 directives. So here is our <angular-two-one/>  component that uses Angular 1 directive <angular-one/>  and the other Angular 2 component <angular-two/> .

In Angular 2, if we need to use other components in your template, we need to inject them via directives  attribute. Since <angular-one/>  is an Angular 1 directive, we need to upgrade it first before we can inject it. This is done by calling adapter.upgradeNg1Component() .

To be able to use this new <angular-two-one/>  component, again, we need to downgrade it. What did I mean by again? because we have already downgraded one above. So our boot.ts is now becoming like this: –

The index.html for the full example is now looking like this: –

Result of the full example

Angular 1 and 2 Integration Typescript example - Directive full result

Full source code for this example is available here.

Related Links


facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.
  • Yage Jin

    Hi Hong, as I was trying to figure out a way to integrate Angular 1 and 2, I found your article. I am new to Angular 2, and I am trying to learn. When I was trying to run the code, it complains about cannot find “myApp” in boot.js, and AngularTwoComponent does not have property “someText”. Do you have any suggestions what I should do to fix it?

    • Wayne Hong

      Hi Yage,

      Did you download all the source code and have you modified the code? which version of Angular 2 are you using? my example was based on beta.0. I suspect that you might be using a different version, i.e. RC?

      • Yage Jin

        Well, I just found out something really interesting. When I run “npm start” with the constructor commented out, and un-comment the constructor later, everything works just fine. But if I do npm start with the constructor, it complains about the property someText and wouldn’t run.
        And yes, im using RC.

  • Mahesh K

    hi hong,
    your article is awesome.. but when i try to demonstrate your code I am facing two issues, the following are the logs,
    1. src/boot.ts(5,1): error TS2304: Cannot find name ‘myApp’.
    src/boot.ts(6,1): error TS2304: Cannot find name ‘myApp’.

    2.404 GET /@angular/upgrade

    can you help me to resolve this..

    • Wayne Hong

      Hi Mahesh,

      Thanks for your comment. did you take my source code without changing anything?

      • Mahesh K

        Sorry Hong, it’s working now.. it asked package.json while start the npm, so I copied my own package.json file. So I think the issue was in my package.json file. I changed my package.json file from my another project now it’s working.. Anyway thank you for your reply..

      • Mahesh K

        Hi Hong,
        How could i use index.html with RC?