How to upgrade angularjs module to inject in angular2 component

Question

I read the Angular 2 upgrade guide and successfully bootstrapped a hybrid app (ng1 as base code and now incrementally rewriting the components and services to ng2).
Now what I don't understand is how I can use 3rd party ng1 modules, let angular2 inject them into my HeaderComponent?
I just saw examples of upgrading providers and components, but I think I'm still confused abou the module concept in angular2 so I don't get how to upgrade ng1 modules. Someone can please enlighten me?

upgrade_adapter.ts

import {AppModule} from './app.module';
import {UpgradeAdapter} from '@angular/upgrade';

export const upgradeAdapter = new UpgradeAdapter(AppModule);

app.module.ts

// imports...
@NgModule({
    imports: [ 
        BrowserModule, 
        HttpModule 
    ],
    declarations: [ 
        HeaderComponent 
    ],
    providers: [ MyService ]
})
export class AppModule { }

index.ts

import { upgradeAdapter } from './upgrade_adapter';
// more imports...

angular.module(MODULE_NAME, [
    //...
])

// HeaderComponent uses a ng1 3rd party module, how to use that module in that component
.component('header', upgradeAdapter.downgradeNg2Component(HeaderComponent))

// adding some ng1 components...

.factory('myService', upgradeAdapter.downgradeNg2Provider(MyService));

// bootstrap the application
angular.element(document).ready(function () {
    upgradeAdapter.bootstrap(document.body, [MODULE_NAME]);
});

EDIT:
The 3rd party module is written in JS.

lib/angular-modules/communication/index.js

var communicationModule = angular.module('communication', [])
    .factory('communication', require('./communication.factory'));
module.exports = communicationModule.name;

Oliver · Accepted Answer · 2016-11-02 16:05:56Z

1

So I had a similar problem, basically I want to declare ng1 components in child modules. The only way I've found to do it is to use a dummy class to build the upgradeAdapter then switch it out just before calling the bootstrap method. You'll need to create new modules for Angular 2 and declare the ng1 components in them.

Hope this helps, took me ages to work out.

upgrade_adapter.ts

import {UpgradeAdapter} from '@angular/upgrade';
import { NgModule, forwardRef } from '@angular/core';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => DummyClass)
@NgModule({})
export class DummyClass { }

app.module.ts

import { Ng1Module } from 'ng1.module';
// imports...
@NgModule({
    imports: [ 
        BrowserModule, 
        HttpModule,
        Ng1Module
    ],
    declarations: [ 
        HeaderComponent 
    ],
    providers: [ MyService ]
})
export class AppModule { }

ng1.module.ts

import { upgradeAdapter } from './upgrade-adapter'

@NgModule( {
    declarations:[upgradeAdapter.upgradeNg1Component('ng1Component'),]
})
export class Ng1Module {}

index.ts

import { upgradeAdapter } from './upgrade-adapter'
import { AppModule} from './app.module'

/** codes **/

angular.element(document).ready(function () {
    upgradeAdapter['ng2AppModule'] = AppModule;
    upgradeAdapter.bootstrap(document.body, ['app']);
});

answered Nov 2, 2016 at 16:05

Oliver

1,52018 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lenny Over a year ago

This doesn't work in my case as I want to upgrade a whole ng1 module, which itself contains serveral factories and requires some other 3rd party libs (e.g. angular-translate). So as there is no upgradeAdapter.upgradeNg1Module or something, I guess there is no way of reusing my existing ng1 module.

Oliver Over a year ago

Not that I've seen, as I understand it you'd have to essentially declare the module in ng2 and redeclare all the services and components. This should still work for 3rd party libs.

Collectives™ on Stack Overflow

How to upgrade angularjs module to inject in angular2 component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related