Use Angular2 componets (TypeScript) in AngularJS application (plain old ES5)

Question

I have troubles trying to use angular2 components in an an ES5 angularJS application with requireJS. When i use angular2.dev.sfx.js then i can use follwing code for bootstrapping:

define([
'nxApp',
'nxRoute',
 ], 
   function(nxApp, nxRoute){
     var upgradeAdapter = new ng.UpgradeAdapter();
     upgradeAdapter.bootstrap(document.body, ['nxApp']);
     return upgradeAdapter;
});

But then i cannot make use of import {Component} from 'angular2/angular2' in typescripts, because this translates to define(['angular2/angular2']... which in turn results in a script error as the script can not be loaded beacuse requireJS searches for angular2.js in the app root folder but it does not exist there.

When I use angular2.dev.js and system.js then the TypeScripts work but i cannot get a reference for angular 2 in my es5 bootsrapping code. ng ist not defined anymore an trying to place angular2/angular2 in the define throws me ann error that the common module has not been loaded.

Is it possible at all to use angular2 typescript components in a ES5 application?

Thanks.

user39558 · Accepted Answer · 2015-12-02 13:08:57Z

1

I had to convert the ES5 Javascript part to make use of System.js. It has a similar configuration to RequireJs, the shims had to be replaces by meta.

With that i could load angular2.dev.js and system.js as it is shown in the angular 2 Quickstart. require('angular2/angular2') could then be used to get angular2 from within ES5 javascript.

answered Dec 2, 2015 at 13:08

user39558

1418 bronze badges

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

Collectives™ on Stack Overflow

Use Angular2 componets (TypeScript) in AngularJS application (plain old ES5)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related