1

The question is on the same lines as this one, however the other way around.

I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.

I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with <div ng-app="app"> <div ng-view=""> </div></div>

Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.

I have a few questions;

  1. Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
  2. If it would, is there an easy way to get the js files converted to .ts files.

EDIT

I got this to work by using the angular.boostrap call as shown below. Following is my code snippet for my component

import {Component, AfterViewInit, OnInit} from 'angular2/core';

    declare var angular:any;
    @Component({
        selector: 'server-monitor',
        templateUrl: 'app/components/server-monitor/dist/index.html',
        styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
            'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
            ],
    })
    export class ServerMonitorComponent  implements AfterViewInit, OnInit{

ngOnInit(){
        angular.bootstrap(document, ['app']);
    }
}

However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.

When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.

0

1 Answer 1

1

In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.