user3869623 user3869623 - 1 year ago 351
AngularJS Question

Using angular1 component (requirejs module) inside angular2 component

I have an ng1 component in javascript written as requirejs module.
I need to use this component inside my ng2 component (until my old ng1 app is fully ported to ng2).
Here is the plnkr :
Here is my bootstrap logic:

import {App} from './app';
import {upgradeAdapter} from './adapter';

var appComponent = upgradeAdapter.downgradeNg2Component(App);

requirejs( ['ng1App'],
function(ng1App) {
// following line throws error
upgradeAdapter.bootstrap(document.body, ['ng1App']);
} );

it gives me following error

angular2-polyfills.js:286 Uncaught Error: AngularJS v1.x is not loaded!

Appreciate any pointers.

The other question i have is how do i import the requirejs modules for individual ng1 components in my ng2 component :

import {Component} from '@angular/core'
import {upgradeAdapter} from './adapter';

// How do i dynamically load the ng1-comp rquirejs module here?

selector: 'my-app',
providers: [],
template: `
<h2>Hello {{name}}</h2>
directives: [upgradeAdapter.upgradeNg1Component('ng1Comp')]
export class App {
constructor() { = 'Angular2 (Release Candidate!)'

Answer Source

Finally figured it out.. The requirejs config needs to be converted to systemjs or other module loader config. Converting to system js is easy..

// map systemJS apis to corresponding apis in requirejs
window.require = System.amdRequire;
window.requirejs = System.amdRequire;
window.define = System.define;
System.config(function getNG1Config() {
  return {
    defaultJSExtensions: true,
    baseUrl: '/',
    waitSeconds: 0,
    paths: {
      'angular-ui-router': '', //needs to be defined before 'angular'
      'angular': '', 
      '@angular/common': '',
      '@angular/compiler': '',
      '@angular/core': '',
      '@angular/http': '',
      '@angular/platform-browser': '',
      '@angular/platform-browser-dynamic': '',
      '@angular/router-deprecated': '',
      '@angular/upgrade': '',
      'upgradeAdapter': './upgradeAdapter',
      'rxjs/*': '',

      'app': 'src/app',
      'bootstrap': './bootstrap'
    map: {
    meta: {
      'app': {
        deps: ['angular', 'angular-ui-router']
      'bootstrap': {
        deps: ['angular', 'angular-ui-router']
    packages: {
      'angular': {
        main: 'angular.min.js',
        defaultExtension: 'js'
      'angular-ui-router': {
        main: 'angular-ui-router.js',
        defaultExtension: 'js'
      'rxjs': {
        defaultExtension: 'js'
      'angular2-in-memory-web-api': {
        defaultExtension: 'js'
      './': {
        defaultExtension: 'js'
      'upgradeAdapter': {
        defaultExtension: 'js'

Here is the plunker :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download